CSS opacity и filter — прозрачность и фильтры

opacity задаёт прозрачность всего элемента. filter применяет визуальные эффекты: размытие, яркость, контраст, оттенки. backdrop-filter — эффект матового стекла под элементом.

opacity — прозрачность элемента

/* 0 = полностью прозрачный, 1 = непрозрачный */
.invisible { opacity: 0; }     /* невидим, но место занимает */
.semi      { opacity: 0.5; }   /* 50% прозрачности */
.visible   { opacity: 1; }     /* полностью виден */

/* Плавное появление при hover */
.card img {
  opacity: 0.7;
  transition: opacity 0.3s ease;
}
.card:hover img {
  opacity: 1;
}

/* Отключённый элемент */
.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Важно: opacity влияет на ВЕСЬ элемент — текст, фон, дочерние элементы */
.parent { opacity: 0.5; }
/* .child тоже будет 50% прозрачным, даже если opacity: 1 */

opacity vs rgba — в чём разница

/* ❌ opacity — делает прозрачным ВСЁ включая текст */
.overlay-bad {
  background: black;
  opacity: 0.5;    /* и фон и текст 50% прозрачны */
  color: white;
}

/* ✅ rgba — только фон прозрачный, текст остаётся */
.overlay-good {
  background: rgba(0, 0, 0, 0.5);  /* только фон */
  color: white;  /* 100% непрозрачный */
}

/* Когда что использовать */

/* opacity — для анимаций появления/исчезания */
.modal {
  opacity: 0;
  transition: opacity 0.3s;
}
.modal.visible { opacity: 1; }

/* rgba/hsla — для полупрозрачных фонов */
.card {
  background: rgba(255, 255, 255, 0.9);  /* почти белый фон */
  color: #111;   /* текст непрозрачный */
}

CSS filter — визуальные фильтры

filter применяет графические эффекты к элементу (обычно изображению). Работает как фильтры в Photoshop — прямо в браузере.

/* blur — размытие */
img { filter: blur(4px); }   /* 4px размытия */
img { filter: blur(0); }     /* убрать размытие */

/* brightness — яркость */
img { filter: brightness(1.5); }  /* ярче */
img { filter: brightness(0.7); }  /* темнее */
img { filter: brightness(0); }    /* чёрный */

/* contrast — контраст */
img { filter: contrast(1.5); }  /* больше контраста */
img { filter: contrast(0.5); }  /* меньше */

/* grayscale — оттенки серого */
img { filter: grayscale(1); }    /* полностью чёрно-белый */
img { filter: grayscale(0.5); }  /* наполовину */

/* sepia — сепия */
img { filter: sepia(1); }    /* полная сепия */
img { filter: sepia(0.5); }  /* лёгкая сепия */

/* saturate — насыщенность цветов */
img { filter: saturate(2); }    /* вдвое ярче цвета */
img { filter: saturate(0.5); }  /* блёклые цвета */
img { filter: saturate(0); }    /* = grayscale(1) */

/* hue-rotate — поворот цветового тона */
img { filter: hue-rotate(90deg); }   /* сдвиг цветов на 90° */
img { filter: hue-rotate(180deg); }  /* противоположные цвета */

/* invert — инверсия */
img { filter: invert(1); }    /* инвертированные цвета */
img { filter: invert(0.5); }  /* частичная инверсия */

/* drop-shadow — тень по форме (не прямоугольная) */
img { filter: drop-shadow(4px 4px 8px rgba(0,0,0,0.3)); }
/* Для PNG с прозрачностью — тень повторяет контур */

/* opacity через filter */
img { filter: opacity(0.5); }  /* = opacity: 0.5 */

Несколько фильтров — через пробел

/* Комбинировать несколько фильтров через пробел */
.vintage {
  filter: sepia(0.5) contrast(1.2) brightness(0.9);
}

.dramatic {
  filter: contrast(1.5) saturate(1.3) brightness(0.95);
}

/* Hover — убрать фильтр плавно */
.card img {
  filter: grayscale(1) brightness(0.8);
  transition: filter 0.4s ease;
}
.card:hover img {
  filter: grayscale(0) brightness(1);  /* цвет возвращается */
}

/* Затемнение при загрузке */
.loading-img {
  filter: blur(20px) brightness(0.7);
  transition: filter 0.8s ease;
}
.loading-img.loaded {
  filter: none;
}

Таблица функций CSS filter

backdrop-filter — эффект матового стекла

backdrop-filter применяет фильтр к тому, что находится позади элемента. Создаёт эффект матового стекла (glassmorphism).

/* Классический glassmorphism */
.glass-card {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);  /* обязательно для Safari */
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 16px;
  padding: 24px;
  color: white;
}

/* Тёмное стекло */
.dark-glass {
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(16px) brightness(0.9);
  -webkit-backdrop-filter: blur(16px) brightness(0.9);
}

/* Навбар с blur */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  z-index: 100;
}

/* Overlay модального окна */
.modal-backdrop {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

cursor — тип курсора мыши

/* Стандартные значения */
a, button    { cursor: pointer; }     /* рука — кликабельно */
input, textarea { cursor: text; }     /* I-beam — текст */
.draggable   { cursor: grab; }        /* захват */
.dragging    { cursor: grabbing; }    /* захватил */
.resize-n    { cursor: n-resize; }    /* изменение размера */
.loading     { cursor: wait; }        /* ожидание */
.disabled    { cursor: not-allowed; } /* запрет */
.help        { cursor: help; }        /* подсказка (?) */
.move        { cursor: move; }        /* перемещение */
.hidden-cur  { cursor: none; }        /* скрыть курсор */
.crosshair   { cursor: crosshair; }   /* прицел */
.zoom-in     { cursor: zoom-in; }     /* увеличить */
.zoom-out    { cursor: zoom-out; }    /* уменьшить */

/* По умолчанию */
div { cursor: default; }  /* стрелка */

/* Кастомный курсор */
.custom-cursor {
  cursor: url('/cursors/custom.png'), auto;
  /* url — путь к изображению (рекомендуется .cur или .png 32x32px) */
  /* auto — запасной вариант если файл не загрузился */
}

Часто задаваемые вопросы

opacity vs rgba — что выбрать?

Правило простое: если нужен прозрачный фон при непрозрачном тексте — используй rgba(r, g, b, a) в свойстве background. Если нужно плавное появление/исчезание всего элемента целиком — opacity + transition. Если нужно скрыть элемент сохранив место в layout, но убрав события — opacity: 0 + pointer-events: none.

Почему backdrop-filter не работает?

Три причины: 1) Отсутствует -webkit-backdrop-filter — в Safari нужен этот префикс. 2) Родительский элемент имеет overflow: hidden — это может блокировать backdrop-filter. 3) Нет ничего видимого позади — backdrop-filter работает с контентом НИЖЕ по z-index. Если фон белый или пустой, эффект не виден. Поместите карточку поверх изображения или градиента.

Как сделать эффект матового стекла на CSS?

Четыре компонента glassmorphism: 1) background: rgba(255,255,255,0.15) — полупрозрачный белый фон. 2) backdrop-filter: blur(12px) + -webkit-backdrop-filter: blur(12px) — размытие фона. 3) border: 1px solid rgba(255,255,255,0.25) — слегка видимая рамка. 4) Позади должно быть что-то: изображение, градиент, другой контент. Без фонового контента эффект не виден.