Фильтры

В этой статье мы рассмотрим эффекты фильтров CSS, что они делают и как их использовать. Будут примеры фильтров CSS3, поговорим о производительности фильтров на настольных и мобильных устройствах, так как скорость важна для работы пользователям. И в конце рассмотрим состояние современных браузеров отобразить эффекты фильтра CSS3.

Оглавление:
  1. Как работают фильтры CSS
  2. Применить фильтр CSS
  3. Фильтр grayscale
  4. Фильтр sepia
  5. Фильтр saturation
  6. Фильтр hue-rotate
  7. Фильтр invert
  8. Фильтр opacity
  9. Фильтр brightness
  10. Фильтр ontrast
  11. Фильтр blur
  12. Фильтр drop-shadow
  13. Фильтры CSS в SVG
  14. Производительность
  15. Поддержка

Фильтры CSS представляют собой мощный инструмент, который веб-разработчики могут использовать для интересных визуальных эффектов. Эффекты фильтра появились как часть спецификации Scalable Vector Graphics (SVG). И были созданы для применения различных эффектов к растровым изображениям на основе векторной графики. Со временем, производители браузеров добавили поддержку фильтра SVG, полезность этого стала очевидной. Роберт O’Callahan из Мозила выступил с идеей, использовать фильтры SVG путем применения CSS. Это была блестящая идея, прототипы показали насколько мощные могут быть фильтры CSS. Группа W3C решила одобрить использование фильтров для HTML и SVG с помощью стилей CSS, и таким образом родился filter в CSS. Сейчас есть тонны работ с фильтрами работающих на CSS и SVG.

Все примеры фильтров в этой статье доступные непосредственно из CSS.

К началу

Как работают фильтры CSS

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

Если использовать их правильно, они не повлияют на скорость загрузки вашего сайта!

Применить фильтр CSS

Фильтры CSS будут работать во всех современных браузерах. Чтобы использовать фильтры, вы должны применить префиксы для свойства filter. Нет ни чего сложного ниже простой пример.

div { 
-webkit-filter: grayscale(100%);
   -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
     -o-filter: grayscale(100%);
        filter: grayscale(100%);
}

Изображение внутри всех элементов div будет выглядеть как фото 41-го года.

Эффекты фильтра
Оригинал изображения
Эффекты фильтра Оттенки серого отфильтрованного изображения
Фильтр оттенки серого grayscale

Большинство фильтров используют параметры контроля на сколько выполнить фильтрацию. Например, если вы хотите выполнить половину от первоначального цвета с оттенками серого нужно сделать так:

div { filter: grayscale(50%); }
Эффекты фильтра 50% серый
Фильтр оттенки серого grayscale 50%

Если вы хотите применять несколько значений фильтров, достаточно поместить их в CSS следующим образом:

div{ filter: grayscale(100%) sepia(100%); }

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

Эффекты фильтра
Одновременно применить grayscale и Sepia

Всё зависит от вашего воображения, экспериментируйте.

CSS вводит кучу стандартных фильтров, что делает их использование на много легче. Давайте посмотрим на каждый из них, и что они делают.

К началу

Фильтр grayscale

Фильтру grayscale можно указать сколько для изображения применить серого. Если 100%, то всё изображение будет с оттенками серого, если 0% цвет не изменится, 0 работает так же как 0%, а 1,0 работает так же как 100%.

Эффекты фильтра
Оригинал изображения
Эффекты фильтра оттенки серого (100%)
Применение фильтра grayscale 100%
К началу

Фильтр sepia

Фильтр sepia сделает фотографию чернобелой. Контролируется так же, как и фильтр grayscale, но эффект следует применять в меньшем количестве.

Эффекты фильтра
Оригинал изображения
Эффекты фильтра сепия (100%)
Применение фильтра Sepia 100%
К началу

Фильтр saturation

Фильтр saturation добавит эффект насыщенности цветов, и делает их более яркими. Это классный эффект, который может делать фотографии привлекательными. Эффект позволяет использовать значение для фильтра больше чем 100%, чтобы была еще больше насыщенность.

Эффекты фильтра
Оригинал изображения
Эффекты фильтра насыщенность (10)
Примененить фильтр aturation
К началу

Фильтр hue-rotate

Фильтр hue-rotate можно использовать для интересных вещей, и при этом не нужен фотошоп. Эффект angle изменяет угол освещения, чтобы исходное изображение выглядело в другом цвете.

Эффекты фильтра
Оригинал изображения
Эффекты фильтра оттенок поворота (90 градусов)
Применение фильтра angle 90 градусов
К началу

Фильтр invert

Фильтр invert переворачивает цвета — количество эффекта контролируется. Чтобы изменить эффект инвертирования, использует значения от 100% и меньше.

Эффекты фильтра
Оригинал изображения
Эффекты фильтра инвертирование 100%
Применение фильтра invert 100%
К началу

Фильтр opacity

Фильтр opacity делает изображение полупрозрачным. Нужное количество непрозрачности контролируется 100% — полностью непрозрачен, меньше 100% изображения станет менее непрозрачным, и его будет видно все меньше и меньше. 0% означает что изображение полностью исчезнет — это можно использовать если вы хотите создать активную область ничего не показывая, что то наподобие overflow:hidden.

Непрозрачность в фильтре opacity работает так же, как свойство opacity в CSS3. Прозрачность CSS не является аппаратным ускорением, но браузеры, которые поддерживают фильтры, используют аппаратное ускорение для фильтра opacity чтобы увеличить производительность.

Эффекты фильтра
Оригинал изображения
Эффекты фильтра прозрачность (50%)
Применение фильтр opacity 50%
К началу

Фильтр brightness

Фильтр brightness похож на регулировку яркости экрана телевизора. Он регулирует цвет между черным и полностью оригинальным цветом по мере добавлении параметров. Если вы установите 0% вы увидите только черный цвет, если увеличивать до 100%, всё больше и больше будет проясняется исходное изображение, 100% исходное изображение. Можно продолжать и установить до 200% что сделает изображение в два раза ярче, это можно использовать для тёмных изображений!

Эффекты фильтра
Оригинал изображения
Эффекты фильтра яркость (140%)
Применить фильтр brightness 140%
К началу

Фильтр ontrast

Фильтр ontrast позволит регулировать контрастность между темными и самыми светлыми тонами исходного изображения. Если установить значение 0% так же как с яркостью будет всё черное. Но, если вы измените значение до 100%, изменятся тона цвета. Можно установить значение больше 100% будет тот-же же эффект, который увеличивает разницу между светлыми и темными цветами.

Эффекты фильтра
Оригинал изображения
Эффекты фильтра контрастность (200%)
Применение фильтра contrast 200%
К началу

Фильтр blur

Фильтр blur сделает для изображения размытые края. Фильтр размоет все цвета, это похоже когда фон вне фокуса. Параметр radius (радиус) определяет сколько пикселей размыть, чем большее значение тем больше размытие. Значение 0 оставляет изображение без изменений.

Эффект фильтра
Оригинал изображения
Эффект фильтра размытие (10px)
Применение фильтра blur radius 10px
К началу

Фильтр drop-shadow

Фильтр drop-shadow — это еще один фильтр, похожий на существующий в CSS3 box-shadow. Если использовать фильтр — это означает, что он может использовать аппаратное ускорение некоторых браузеров. Параметры фильтра drop-shadow передаются немного сложнее, и имеют ряд значений разделенные пробелом. Обязательные значения: где находится тени, сколько применить размытие, цвет тени, и т.д. Для получения значения тени перейдите по ссылке инструменты CSS3, спецификация определяет тень в мельчайших подробностях.

Эффект фильтра тень (16px 16px 20px черного цвета)
Фильтр drop-shadow (16px 16px 20px Black)
Эффект фильтра тень (10px 16px 30px-фиолетовый)
Фильтр drop-shadow (10px 16px 30px purple)
К началу

Фильтры CSS в SVG

Так как, фильтры CSS изначально пришли из SVG, существуют различные способы использования фильтров. Сам элемент SVG обеспечивает различные эффекты фильтра используя синтаксис XML. Набор фильтров определяется в CSS, так их легче использовать.

Большинство фильтров CSS похожи на фильтры SVG, даже если хотите в таблице стилей могут быть ссылки на фильтр SVG. Дизайнеры приложили много усилий, чтобы сделать применение фильтров CSS проще.

Вы должны знать как применить фильтры CSS в SVG. Это легко сделать, все фильтры SVG определяются с атрибутом ID, который может быть использован для получения эффекта фильтра. Таким образом, чтобы использовать любой фильтр CSS в SVG, нужно добавить ссылку на него с помощью синтаксиса URL.

Разметка фильтра SVG может быть такой:

<filter id="foo">...</filter>

В CSS вы можете сделать что-то простое:

div { filter: url(#foo); }

Поле этого все элементы <div> в документе будут стилизованы фильтром SVG.

К началу

Производительность

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

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

Поскольку на некоторых платформах можно использовать GPU для ускорения — это не во всех браузерах. В случае сомнений лучше всего экспериментировать с радиусом, который даст вам желаемого эффекта, а затем попытаться уменьшить его как можно больше при сохранении лучшего визуального эффекта. Таким образом не уменьшиться скорость сайта на телефоне.

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

К началу

Поддержка

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

Таблица поддержки браузерами: “Фильтры”

Таблица поддержки браузерами: “Фильтры”

Ряд современных браузеров внедряют фильтры CSS для аппаратного ускорения GPU.

Производительность фильтров CSS
Эффект фильтра Поддержка браузеров Производительность
grayscale Chrome очень быстро
sepia Chrome очень быстро
saturate Chrome очень быстро
hue-rotate Chrome быстро
invert Chrome очень быстро
opacity Chrome может быть медленным
brightness Chrome быстро
contrast Chrome быстро
blur Chrome медленно
drop-shadow Chrome может быть медленным
url() Mozilla меняется: медленно/быстро

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