Filter: применение фильтров к элементам и изображениям

Что такое фильтры и зачем они нужны? 🌈

Фильтры в CSS — это мощный инструмент, который позволяет изменять внешний вид элементов и изображений, добавляя визуальные эффекты: размытие, контраст, тени и даже цветовые трансформации.

Их можно применять к любым HTML-элементам, но чаще всего они используются для:
- Стилизации изображений
- Создания hover-эффектов
- Затемнения или осветления фона
- Эффектов наложения

Основные фильтры и их синтаксис 🎨

Фильтры задаются через свойство filter с различными функциями. Вот самые популярные из них:

Фильтр	Описание	Пример значения
`blur()`	Размытие элемента	`blur(5px)`
`brightness()`	Яркость (1 = исходная)	`brightness(0.7)`
`contrast()`	Контрастность (1 = исходная)	`contrast(150%)`
`grayscale()`	Обесцвечивание (0% — 100%)	`grayscale(80%)`
`hue-rotate()`	Сдвиг цветового оттенка (0–360deg)	`hue-rotate(90deg)`
`invert()`	Инверсия цветов (0% — 100%)	`invert(100%)`
`opacity()`	Прозрачность (0 — 1)	`opacity(0.5)`
`saturate()`	Насыщенность (1 = исходная)	`saturate(2)`
`sepia()`	Эффект сепии (0% — 100%)	`sepia(50%)`
`drop-shadow()`	Тень (аналог `box-shadow`, но для содержимого)	`drop-shadow(2px 2px 5px #333)`

Примеры с кодом 💻

1. Размытие фона и повышение контраста

.hero-image {
  filter: blur(3px) contrast(120%);
}

Эффект: Фоновое изображение будет слегка размыто, но при этом цвета станут насыщеннее.

2. Эффект "старой фотографии"

.vintage-photo {
  filter: sepia(70%) brightness(0.8) contrast(1.2);
}

Применение: Добавляет желтоватый оттенок, затемняет и усиливает контраст, имитируя винтажный стиль.

3. Динамический hover-эффект на кнопке

.button {
  transition: filter 0.3s ease;
}

.button:hover {
  filter: brightness(1.2) drop-shadow(0 0 8px rgba(255, 0, 0, 0.5));
}

Что произойдёт: При наведении кнопка станет ярче и получит красноватую тень.

Комбинирование фильтров 🔥

Фильтры можно объединять для сложных эффектов. Порядок важен! Например:

.magic-effect {
  filter: hue-rotate(180deg) saturate(2) blur(1px);
}

💡 Совет от Данилы Бежина
Поиграйте с hue-rotate() в сочетании с анимацией — можно создать плавную смену цветов без SVG-фильтров!

Особенности `drop-shadow()` vs `box-shadow` 🏷️

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

Пример:

.icon {
  filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.5));
}

Здесь тень повторит форму иконки, а не её прямоугольный контейнер.

Анимация фильтров 🎬

Фильтры можно плавно анимировать через transition или @keyframes.

.pulsing-element {
  filter: brightness(1);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.5); }
}

Результат: Элемент будет периодически «пульсировать», становясь ярче.

Производительность и ограничения ⚠️

Фильтры — ресурсоёмкие эффекты, особенно blur() и drop-shadow().

Оптимизация:
- Избегайте анимации фильтров на многих элементах одновременно.
- Для сложных эффектов (например, размытия фона) иногда лучше использовать backdrop-filter.

✨ Фишка: backdrop-filter позволяет применять фильтры к области позади элемента — идеально для модальных окон с прозрачным фоном!

Практическое применение: затемнение фона

.overlay {
  position: relative;
}

.overlay::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  filter: blur(8px);
}

Таким способом можно создать эффект «размытого подложки» без редактирования самого изображения.

Итог 🏁

Фильтры в CSS — это:
✅ Простые в использовании, но мощные инструменты.
✅ Гибкость: можно комбинировать и анимировать.
✅ Кроссбраузерность (кроме некоторых старых версий IE).