Эффекты фильтра CSS

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

Эффекты фильтра CSS

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

Прошлое, настоящее и будущее фильтров CSS

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

Поддержка браузерами SVG filters
Internet Explorer Chrome Opera Safari Firefox Android iOS Safari Android Chrome
10+ 31+ 27.0+ 7.0+ 31+ 4.4+ 7.1+ 42+

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

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

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

Определить фильтры с помощью SVG и CSS

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

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

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

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



div { +filter: grayscale(100%); }
/* Префиксы */
-webkit-filter: ...
 -moz-filter: ...
  -ms-filter: ...
   -o-filter: ...
    filter: ...


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

Эффекты фильтра

Исходное изображение..
Эффекты фильтра Оттенки серого отфильтрованного изображения
Фильтр оттенки серого (grayscale)

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



div { +filter: grayscale(50%); }
/* Префиксы */
-webkit-filter: ...
 -moz-filter: ...
  -ms-filter: ...
   -o-filter: ...
    filter: ...


Эффекты фильтра 50% серый
Фильтр оттенки серого (grayscale) (50%).

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



div{ +filter: grayscale(100%) sepia(100%); }
/* Префиксы */
-webkit-filter: ...
 -moz-filter: ...
  -ms-filter: ...
   -o-filter: ...
    filter: ...


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

Эффекты фильтра
Применить оттенки серого (grayscale) и эффект сепии (Sepia)

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

Доступные эффекты фильтров в CSS

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

Фильтр оттенки серого — grayscale (контролируется)

Превращает цвета в изображении в оттенки серого. Контролируется, сколько применить серого. Если это 100%, то все будет с оттенками серого, если это 0% цвета остаются неизменными, 0 работает так же, как 0% в то время как 1,0 работает так же, как 100%.

Эффекты фильтра
Оригинал нашего изображения
Эффекты фильтра оттенки серого (100%)
Фильтр оттенки серого (grayscale) (100%)
Фильтр cепия — sepia (контролируется)

Фильтр сепия изменить цвета с оттенками сепия, как на старых фотографиях. Контролируется так же, как и фильтр оттенки серого (grayscale), но эффект следует применять в меньшем количестве.

Эффекты фильтра
Оригинал нашего изображения
Эффекты фильтра сепия (100%)
Фильтр сепия (Sepia) (100%)
Фильтр насыщенность — saturation (контролируется)

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

Эффекты фильтра
Оригинал нашего изображения
Эффекты фильтра насыщенность (10)
Фильтр насыщенность (saturation) (10)
Фильтр оттенок освещения — hue-rotate (angle)

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

Эффекты фильтра
Оригинал нашего изображения
Эффекты фильтра оттенок поворота (90 градусов)
Фильтр оттенок освещения (angle) (90 градусов)
Фильтр инвертировать — invert (контролируется)

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

Эффекты фильтра
Оригинал нашего изображения
Эффекты фильтра инвертирование (100%)
Фильтр инвертировать (invert) (100%)
Фильтр непрозрачность — opacity (контролируется)

Если вы хотите что изображение выглядело полупрозрачным, установите нужное количество непрозрачности. 100% полностью непрозрачен, меньше 100% изображения станет менее непрозрачным (более прозрачным), и его будет видно все меньше и меньше. Количество 0% означает, что изображение полностью исчезнет — это нужно, если вы хотите создать активную области, ничего не показывая, что то наподобие overflow:hidden
Непрозрачность работает так же, как и свойство opacity в CSS3. Прозрачность CSS не является аппаратным ускорением, но некоторые браузеры, которые поддерживают фильтры, используют аппаратное ускорение для ускорения фильтра прозрачности для более высокой производительности.

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

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

Эффекты фильтра
Оригинал нашего изображения
Эффекты фильтра яркость (140%)
Фильтр яркость (brightness) (140%)
Фильтр контрастность — contrast (контролируется)

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

Эффекты фильтра
Оригинал нашего изображения
Эффекты фильтра контрастность (200%)
Фильтр контрастность (contrast) (200%)
Фильтр размытие — blur (радиус)

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

Эффект фильтра
Оригинал нашего изображения
Эффект фильтра размытие (10px)
Фильтр размытие (blur) (radius) (10px)
Фильтр тень drop-shadow (shadow)

Параметр тень (shadow), передаётся немного сложнее, и не только одно значение. Это ряд значений, разделенные пробелом, — и некоторые значения являются обязательными! Значение которые нужно устанавливать — где тени находится, сколько применить размытие, цвет тени, и т.д. В примере показано как можно контролировать тени. Для получения кода тени перейдите по ссылке инструменты CSS3 спецификация определяет тень в мельчайших подробностях. Ниже несколько примеров, которые должно дать вам идеи о том, как использовать тень.

Эффект фильтра тень (вставка 0 0 2RM синий)
Фильтр тень drop-shadow(inset 0 0 2em blue)
Эффект фильтра тень (16px 16px 20px черного цвета)

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

Это еще один фильтр, похожий на существующий в CSS3 box-shadow. Если использовать фильтр — это означает, что он может использовать аппаратное ускорение некоторых браузеров.

URL ссылки SVG фильтры

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

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



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


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



div { +filter: url(#foo); }
/* Префиксы */
-webkit-filter: ...
 -moz-filter: ...
  -ms-filter: ...
   -o-filter: ...
    filter: ...


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

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

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

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

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

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

Поддержка браузерами

Сейчас не все браузеры поддерживают все эффекты фильтров. В настоящее время фильтры CSS доступны в браузерах на основе WebKit и Mozilla. Мы ожидаем увидеть их в ближайшее время в опере, а также IE 10 . Поскольку спецификация находится в стадии разработки, некоторые производители браузеров внедрили этот материал с использованием поставщиков префиксов. Таким образом нужно использовать префиксы -webkit-filter, -moz-filte и следите за другими реализациями браузера по мере их появления.

Отметим, что ряд современных браузеров начинают внедрять фильтры CSS на аппаратное обеспечение (с GPU-ускорением). Когда их применят с поддержкой GPU, производительность будет значительно улучшена.

Эффект фильтра Поддержка браузеров Производительность
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 шейдеров для эффектов фильтра , где узнаете о CSS шейдеров: какие они, как они работают, и как их можно использовать для создания собственных эффектов.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML -теги и атрибуты: <a href= http://pixelcom.crimea.ua/"" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>