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

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

SVG и CSS слились воедино и создали такое интересное CSS свойство как filter. Давайте же его испытаем!

Работа фильтров

Filter работает как постпроцесс, он попиксельно обрабатывает картинку и задает ей тот или иной эффект (может даже несколько). Представьте свою картинку, наложите на неё синюю пленку и вы увидите, что ваша картинка стала синей  :mrgreen: Так примерно и работает фильтр.

Если вы работаете с несколькими фильтрами, то вы как бы накладываете их на друг дружку. Помните, что чем больше фильтров вы используете, тем больше времени тратит браузер на отрисовку страницы.

Использование CSS фильтров

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

1

Допустим превратим цветное в черно-белое:

filter: grayscale(100%);

Сделать бесцветными картинки на сайте

2

Вы можете менять силу фильтра при помощи процентов (7%). Также для регулировки некоторых фильтров применяются пикселы (22px), точка (0.8) и градус (250deg).

Сделаем не 100%, а всего лишь 40% черно-белого.

filter: grayscale(40%);

Обесцвечивание рисунка

 

Множественные фильтры

Вы можете задействовать несколько фильтров! Ставите пробел и прописываете ещё один фильтр 😉

filter: grayscale(90%) invert(150%);

Двойные фильтры

 

Перемена цветов

Фильтр hue-rotate меняет цвета! От выбора угла зависит какой будет цвет, всего цвета можно крутить до 360 градусов.

filter: hue-rotate(60deg);

Смена Цвета html

 

Цветовая насыщенность

Saturate определяет насыщенность цвета. По умолчанию насыщенность цветов 100%, но вы можете либо уменьшать влияние цвета (-100), либо увеличивать его (100+).

filter: saturate(400%);

Прибавление цветов на изображении

 

Инверсия

Invert – это своего рода свойство, позволяющее полностью перевернуть краски с ноги на голову.

Работает от 0 до 100% :

  • 0% – это нормальное состояние для изображения.
  • 100% полноценная инверсия цветов на картинке.

filter:invert(100%);

Тепловые очки

 

Размытость

Blur создает эффект размытости, что примечательно в пикселях. Причём не нужно сильно увеличивать px, достаточно всего четырех пикселов, чтобы картинка выглядела “пьяной”.

filter:blur(4px);

CSS размытость

 

Яркость

Brightness уменьшает или увеличивает яркость картинки. Изначально уровень света (100%), но можно его снизить вплоть до 0% или повысить до 300%.

filter:brightness(200%);

Увеличить яркость у картинок при помощи CSS

 

Контрастность

Уровень контрастности может быть ниже или выше. По умолчанию равняется 100%.

filter:contrast(200%);

Уровень констраста

 

Прозрачность

Opacity лучше задавать по привычке: 0.2, 0.5 и тому подобное! Данный фильтр идет от 1 до 0.

  • 0 – это полная прозрачность
  • 1 – это нет прозрачности (по умолчанию)

filter:opacity(0.5);

Прозрачность добавить в КСС

 

Сепия

Эффект сепии: действует от 0% до 100%.

Используйте 100%, чтобы увидеть результат от наложенного фильтра.

filter: sepia(100%);

Картинка сепия CSS

 

Тени

В фильтрах я нашел 4 параметра для тени:

  • Первый – смещает тень в правую или левую сторону. Если положительное число, то тень смещается вправо “20px”. Если негативное число, то тень идет в левую сторону “-20px”
  • Второй – смещает тень в верхнюю или нижнюю сторону. Положительное число идёт вниз, а отрицательное вверх.
  • Третий – определяет уровень размытости тени. Не может быть отрицательного толка.
  • Четвертый – это цвет, задавайте любой цвет для тени yellow, black, red, purple, blue и так далее.
  • Пятый почему-то не работает, видимо drop-shadow имеет только четыре параметра для оптимизации тени, в отличии от box-shadow.

Чтобы тень смотрелась равномерно не задействуйте смещение, поставьте её в стабилизирующий нолик. Оперируйте только размытием тени, как это показано в примере ниже.

filter: drop-shadow(0px 0px 15px lime);

Тень фильтр

Везде ли работает filter? Нет, не везде! У меня он работал в таких браузерах как Google Chrome, Спутник, Maxthon, UC Browser, Opera Neon.  Не работал в Internet Explorer и Хамелеоне.

Нужно ли использовать CSS Filters на своим сайтах?

Да, но с одной пометкой – любой из фильтров нагружает сайт, это может негативно отразиться на его производительности.

На самом деле большое количество фильтров работают быстро и не тормозят сайт, но есть так называемые “нежелательные”, которые следует использовать по минимуму. К нежелательным фильтрам относятся blur и drop-shadow, их можно включить, но в том случае, если они прописаны с минимальным количеством пикселов (от 0 до 30px).


Социальные кнопки помогают моему сайту становится известнее! Не забывайте их нажимать, чтобы благодарить меня за бесплатный контент  :mrgreen: