Фильтры и эффекты

filter: blur, brightness, grayscale, sepia, drop-shadow; mix-blend-mode, backdrop-filter и доступные эффекты без грубого контента.

Уровень: средний 10 разделов 1,5 часа

1. Семейство filter

filter применяется ко всему элементу (картинке, блоку, тексту) и меняет его визуально: резкость, цвет, затемнение. Это «фотошоп в CSS» на одном узле.

.grain { filter: grayscale(100%); }
.lowlight { filter: brightness(0.8); }
.unsharp { filter: blur(2px); }

несколько фильтров — через пробел в одной строке: filter: brightness(1.05) saturate(1.2);
фильтры дороги для больших областей — применяйте экономно.

2. Основные фильтры

Фильтр	Что делает
blur(px)	размытие (классика — раскрытие и фон)
brightness(%)	яркость
contrast(%)	контраст
grayscale(%)	чёрно-белый (100% — полный)
sepia(%)	сепия
saturate(%)	насыщенность
hue-rotate(deg)	сдвиг оттенка
invert(%)	инверсия
opacity(%)	прозрачность
drop-shadow()	тень вдоль силуэта (svg-friendly)

3. drop-shadow

drop-shadow() рисует тень по контуру непрозрачных пикселей — незаменима для png/svg с прозрачностью: тень копирует форму, а не прямоугольник.

.logo { filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25)); }
.icon-badge { filter: drop-shadow(0 1px 4px rgba(15, 23, 42, 0.3)); }

4. mix-blend-mode

Взаимодействие цветов элемента и фона под ним: multiply, screen, overlay, difference. Классика — лёгкое «вплетение» текста в фото (overlay) и изменение цвета по hover-фону.

.hero__text { mix-blend-mode: overlay; }
.badge { mix-blend-mode: multiply; }
.icon-blend { mix-blend-mode: difference; }

mix-blend считается по полной композиции страницы — дорого для больших участков и странно в тёмных фонах. Проверяйте на реальном фоне, не на белом.

5. backdrop-filter

backdrop-filter размывает НЕ элемент, а то, что под ним: стеклянные панели (glassmorphism), непрозрачная шапка при скролле.

.menubar {
  backdrop-filter: blur(12px);
  background: rgba(255, 255, 255, 0.6);
}
.card-hud { backdrop-filter: saturate(1.2) blur(8px); }

backdrop-filter + полупрозрачный фон — «матовое стекло». Всегда оставляйте лёгкий непрозрачный фон как запас для старых браузеров.

6. Фильтры на hover и анимации

.photo:hover { filter: saturate(1.3) brightness(1.05); transition: filter 0.3s; }
.blur-bg:hover { filter: blur(0); }
.gray-on { filter: grayscale(100%); }
.gray-on:hover { filter: none; }

переходы по filter плавные благодаря transition;
hover-размаятивать не надо — размытие занимает большой экран.

7. Эффект «затемнение» без JS

Классический оверлей при открытой модалке: backdrop-filter на body + размытие/притемнение главного. Чисто CSS-состояния и даже без JS на открытии.

.locked { overflow: hidden; }
.locked main { filter: blur(4px) brightness(0.85); }
.locked::backdrop { background: rgba(15, 23, 42, 0.5); }

8. Визуальные состояния состояния

disabled-кнопка: filter: grayscale(0.6) opacity(0.6);
ошибка поля: outline + отсутствие фильтров;
активный пункт меню: saturate(1.2) или подсветка через фон.

.btn:disabled { filter: grayscale(0.7) opacity(0.6); cursor: not-allowed; }

9. Производительность и а11y

фильтры — CPU/GPU-затратны; на больших блоках (hero-фото) применять солидно;
blur на огромном изображении — тормоза: размывайте маленькую копию;
grayscale — плохой знак для контента, который должен читаться;
не делайте hover-видимость только через filter (клавиатура!).

Фильтр создаёт контекст наложения: fixed и z-index «заперты». Если модалка поднялась странно — проверьте filter на предке (см. позиционирование и слои).

10. Чек-лист фильтров

несколько функций — в одной строке filter;
drop-shadow/тень по прозрачному PNG — дружелюбна;
mix-blend проверен на реальном фоне, не на белом;
backdrop-filter имеет непрозрачный запас;
тяжёлые blur — умеренно; on-hover — плавно через transition;
состояния видимы и без мыши (focus).

Что дальше

Курс завершён.

← Вернуться к курсам