CSS-фильтры для обработки изображений¶
CSS-фильтры для обработки изображений — это набор графических эффектов в каскадных таблицах стилей (CSS), позволяющих изменять внешний вид изображений и других элементов непосредственно в браузере без редактирования исходных файлов. Средства реализованы через свойства filter и backdrop-filter, а также через функцию filter() в SVG-контексте. Технология входит в спецификацию Filter Effects Module Level 1 консорциума W3C.
¶История и стандартизация
Ранние графические эффекты в вебе требовали растровых редакторов или тяжёлых JavaScript-библиотек. Свойство filter с набором функций было предложено в 2011–2012 годах и впервые реализовано в WebKit (Safari, Chrome). К середине 2010-х поддержка появилась в Firefox, Edge и Opera. Свойство backdrop-filter добавили позже — оно позволяет фильтровать область позади элемента. Стандарт развивается в рамках W3C; часть эффектов заимствована из спецификации SVG-фильтров.
¶Основные функции
Свойство filter принимает список функций, применяемых слева направо:
| Функция | Действие | Пример значения |
|---|---|---|
blur() | размытие по Гауссу | blur(4px) |
brightness() | яркость | brightness(1.5) |
contrast() | контраст | contrast(200%) |
grayscale() | обесцвечивание | grayscale(1) |
sepia() | эффект сепии | sepia(0.8) |
saturate() | насыщенность | saturate(2) |
hue-rotate() | сдвиг оттенка | hue-rotate(90deg) |
invert() | инверсия цветов | invert(1) |
opacity() | прозрачность | opacity(0.5) |
drop-shadow() | тень по контуру | drop-shadow(2px 2px 3px #000) |
Значения без единиц и проценты трактуются как множители; blur() и drop-shadow() принимают длины. Порядок функций влияет на результат: grayscale(1) brightness(2) и brightness(2) grayscale(1) дают разный итог.
¶Свойство backdrop-filter
backdrop-filter применяет те же функции к содержимому, находящемуся позади элемента, что используется для эффекта матового стекла. Для корректного отображения элементу часто задают полупрозрачный фон. Поддержка в браузерах ниже, чем у filter, и в ряде случаев требует префикса -webkit-.
¶Применение
- Ховер-эффекты: плавное обесцвечивание или повышение яркости при наведении курсора.
- Создание миниатюр и превью без серверной обработки.
- Коррекция изображений «на лету» в адаптивных макетах.
- Эффекты стекла в интерфейсах, модальных окнах и навигационных панелях.
- Доступность: повышение контраста для слабовидящих пользователей.
¶Производительность и совместимость
Фильтры обрабатываются графическим процессором, но сложные комбинации и большие площади могут снижать частоту кадров, особенно на мобильных устройствах. Анимация фильтров дороже анимации transform или opacity. Свойство will-change иногда помогает вынести элемент на отдельный слой. При отключённых фильтрах в старых браузерах изображение отображается без эффекта, поэтому критичные для восприятия изменения лучше дублировать на сервере.
¶Связь с SVG и Canvas
Функция filter() в SVG и CSS-свойство filter частично пересекаются: CSS-функции соответствуют примитивам SVG (feGaussianBlur, feColorMatrix и другим). Для сложных эффектов, недоступных в CSS, применяют SVG-фильтры, подключаемые через url(). Canvas предоставляет более гибкую попиксельную обработку, но требует JavaScript.
¶Ограничения
CSS-фильтры не изменяют исходный файл и не сохраняют результат — эффект существует только при отрисовке. Они не поддерживают произвольные цветовые матрицы и не позволяют адресно редактировать отдельные области изображения. Точность цветопередачи зависит от браузера и цветового профиля монитора.
IRONLIVE — база данных и аналитика по компаниям России.
На главную IRONLIVE →