Справочник CSS

filter: визуальные эффекты для изображений

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

Рабочий пример

.photo {
  filter: contrast(1.08) saturate(1.15);
}
.logo-muted {
  filter: grayscale(1) opacity(.65);
}

Несколько функций выполняются слева направо, поэтому порядок способен менять результат. drop-shadow учитывает прозрачный контур изображения, в отличие от прямоугольного box-shadow.

Когда применять

Фильтры подходят для небольших состояний и декоративной обработки. Сохраняй достаточный контраст и не прячь смысл только изменением цвета.

Проверь пример самостоятельно: измени исходные данные, убери одну строку и сравни результат. Такой короткий эксперимент помогает увидеть роль каждого свойства или метода и не превращает обучение в механическое копирование.

Частые ошибки

• Ставить сильный blur на большой движущийся элемент
• Ухудшать контраст текста вместе с контейнером
• Забывать проверить производительность на телефоне