CSS-фильтр

Раньше, чтобы показать чёрно-белую версию логотипа или затемнить фото под текстом, нужно было готовить отдельную картинку в графическом редакторе. Свойство filter делает это в браузере: элемент отрисовывается как обычно, а потом к получившемуся изображению применяются эффекты. Фильтровать можно не только картинки, но и любой блок вместе с текстом.

Набор функций

• blur(4px) — размытие;
• brightness(0.8), contrast(1.2), saturate(2) — яркость, контраст, насыщенность;
• grayscale(100%), sepia(100%), invert(100%) — серый, сепия, негатив;
• hue-rotate(90deg) — сдвиг оттенков;
• opacity(50%) — прозрачность, как у отдельного свойства непрозрачности;
• drop-shadow() — тень по контуру.

Функции можно перечислять через пробел, они применяются по порядку. Родственное свойство backdrop-filter обрабатывает не сам элемент, а то, что под ним: так делают эффект матового стекла у шапки или модального окна.

Пример: логотипы партнёров

.partners img {
  filter: grayscale(100%);
  opacity: 0.7;
  transition: filter 0.3s, opacity 0.3s;
}
.partners img:hover {
  filter: none;
  opacity: 1;
}

Разноцветные логотипы клиентов в общем блоке выглядят ровно и спокойно, а при наведении каждый становится цветным. Картинки остаются оригинальными, отдельные серые версии не нужны.

drop-shadow против box-shadow

Тень блока box-shadow всегда повторяет прямоугольник элемента. Фильтр drop-shadow() учитывает прозрачность: у PNG-иконки или SVG-фигуры тень ляжет по силуэту, а не по рамке картинки.

Цена эффекта

Фильтры не бесплатны. Размытие большой площади, особенно backdrop-filter на фиксированной шапке, заставляет браузер постоянно перерисовывать область при прокрутке. На слабых телефонах это ощущается как подтормаживание, поэтому радиус размытия держат небольшим, а эффект проверяют на реальных устройствах. Если сайт уже медленный, такие детали стоит смотреть в общем списке при ускорении сайта. Ещё один побочный эффект: элемент с фильтром, как и с трансформацией, создаёт новый контекст наложения и становится точкой отсчёта для потомков с position: fixed.