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

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

Фильтры задаются с помощью свойства filter.

• Яркость — brightness. Допустимы числовые значения от 0 и выше или проценты. Со значением фильтра 1 или 100% элемент отображается без изменений. .effect { filter: brightness(2); /* увеличивает яркость вдвое */}
• Контрастность — contrast. Как и у фильтра яркости в качестве значения можно использовать числа или проценты. .effect { filter: contrast(0.5); /* снижает контрастность наполовину */ }
• Бесцветность — grayscale. Допустимы числовые значения от 0 до 1 и процентные значения от 0% до 100%. При значениях 0 или 0% элемент отображается без изменений.
• Сепия — sepia. Допустимы числовые значения от 0 до 1 и процентные значения от 0% до 100%. При значениях 0 или 0% элемент отображается без изменений.
• Инверсия цвета — invert. Допустимые простые числовые значения от 0 до 1 и процентные значения от 0% до 100%.
• Цветовая насыщенность — saturate. Допустимые простые числовые значения от 0 и выше и процентные значения от 0% и выше. При значении фильтра 1 или 100% элемент отображается без изменений. Если установить нулевое значение, то картинка обесцветится, как при использовании фильтра grayscale. .effect { filter: saturate(2); /* цвета ярче вдвое */ filter: saturate(50%); /* цвета вдвое бледнее */ filter: saturate(0); /* обесцвеченная картинка */ }
• поворот цвета hue-rotate, если представить все цвета в виде круга, то этим фильтром можно повернуть цвет картинки вдоль круга на определённый угол. Значение задаётся в градусах от 0deg до 360deg. Допускается также использование отрицательного угла. Положительное значение будет вращать цвет по часовой стрелке, а отрицательное — против. При значении фильтра 0degэлемент отображается без изменений.
• Фильтр blur задаёт размытость объекта. Его значение задаётся в пикселях от 0px и выше.
• Фильтр opacity задаёт уровень непрозрачности объекта. Работает точно так же, как свойство opacity. Допустимые значения от 0 до 1 или от 0% до 100%.Между фильтром и свойством opacity всё же есть «невидимое» отличие. Некоторые браузеры используют аппаратное ускорение для отрисовки фильтров, а для свойства opacity ускорение не используется. Поэтому применение фильтра opacity может существенно улучшить производительность по сравнению с аналогичным свойством.
• фильтр drop-shadow добавляет тень к объекту. Синтаксис фильтра такой же, как и у свойства box-shadow с отличием фильтр тени не поддерживает параметр inset для внутренней тени, а кроме того на текущий момент не поддерживается растяжение. Пример: filter: drop-shadow(0px 0px 5px green);Фильтр тени имеет преимущества перед свойством box-shadow.Во-первых, при отрисовке в браузере фильтра drop-shadow используется аппаратное ускорение, что улучшает производительность. А дополнительного ускорения при использовании свойства box-shadow в браузере нет.Во-вторых, фильтр drop-shadow применяется к непрозрачному контуру картинок, а прозрачные области игнорируются, в то время как box-shadow задает прямоугольную тень по границе всего изображения.На примере полупрозрачной PNG-картинки можно оценить, как работают эти два свойства. Но стоит задать такой картинке непрозрачный фон, как поведение фильтра изменится.Нужно заметить, что фильтры пришли в CSS из SVG, поэтому drop-shadow и box-shadowразличаются в реализации. То есть с одними и теми же параметрами тени будут выглядеть по-разному.

На текущий момент не все браузеры поддерживают CSS-фильтры. Для корректной работы фильтров в Chrome и Safari необходимо указывать префикс -webkit-.

Фильтры можно применять без ограничений не только к картинкам, но и к другим HTML-элементам.

К одному и тому же блоку можно применить несколько фильтров одновременно. Для этого все фильтры просто перечисляются через пробел после слова filter, например: filter: sepia(50%) blur(5px) opacity(50%); Стоит помнить, что перечисление фильтров в разном порядке даёт разный результат. Это так, потому что каждый следующий фильтр применяется уже к изображению с эффектом.

Если применить несколько фильтров drop-shadow к одному блоку, то их комбинация даст интересный эффект. Так как каждый следующий фильтр в комбинации применяется к изображению с предыдущими фильтрами, то ещё одна тень у блока с тенью создаст двойную тень. Кстати, фильтр drop-shadow бывает полезно применять не только к изображениям, но и к обычным элементам. Тень будет, как и в случае с картинками, идти по непрозрачному контуру. В область тени включаются также псевдоэлементы блока.

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

К CSS-фильтрам можно применять анимации и плавные переходы. Например:

Теперь рассмотрим применение к фильтрам плавных переходов.

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

Кстати, у свойства filter значение по умолчанию — none. Воспользуемся им для отмены эффекта фильтра по наведению на фотографию.