Фильтры позволяют с помощью CSS получать Фотошопо-подобные эффекты. С помощью filter мы можем создать такие эффекты как оттенки серого, сепия, размытость, контрастность, всего одной строчкой. В этой статье мы рассмотрим несколько эффектов.
Немного истории
Первоначально фильтры были созданы как SVG (Scalable Vector Graphics), функции для обработки векторной графики. В 2008 году по мнению Роберта О’Каллахан из Mozila, фильтры имеют «серьезные ограничения», поэтому не могут в полную меру использоваться в HTML. Таким образом он начал экспериментировать с применением эффектов по средствам CSS. Перенесемся на несколько лет и W3C создана спецификация, поддержка которой осуществлена в браузерах на WebKit (в конце прошлого года 2011).
Как работают CSS фильтры
Фильтры могут применяться к DOM объектам, такие как изображения, текст, а также к CANVAS и видео. Параметры, которые они принимают, регулируют уровень фильтрации. Перед выводом страницы фильтры выполняют загрузку элемента, как растровое изображение. На основе параметров применяется фильтры, а затем происходит рендринг страницы.
Теперь самое интересное
Мы должны использовать префикс поставщика filter, так как спецификация находиться еще на стадии разработки. Чтобы увидеть как работают фильтры возьмем за образ картинку с Лягушенком.
Наше оригинальное изображение
grayscale — Оттенки серого
grayscale – фильтр переводит исходное изображение в черно-белое
img {
-webkit-filter : grayscale ( 100% ) ;
}
Мы установили параметр равное 100%, который полностью перевел изображение в черно-белое, при значении 0% картинка останется без изменений.
hue-rotate
Этот фильтр изменяет угол цвета основываясь на цветовом колесе и смещает его на заданное значение, которые мы устанавливаем
img {
-webkit-filter : hue-rotate ( 150deg ) ;
}
Зеленый оттенок в оригинальном изображении имеет угол около 63 град, при установке значения 150 град., мы изменяем угол цвета на 150 град (получаем 213 град), что приводит к такому результату.
sepia
Это фильтр устанавливает так называемый сепия тон (подходит для старинных фотографий ).
img {
-webkit-filter : hue-rotate ( 150deg ) ;
}
Значение 100% делает нашего лягушонка, как героя из старого вестерна.
contrast
Мы можем регулировать контрастность изображения. Значение 0% сгенерирует черное изображение, а 100% возвратит исходное.
img {
-webkit-filter : contrast ( 250% ) ;
}
Мы использовали значение более 100%, что привело к высококонтрастному изображению.
blur
blur позволяет применить к изображению Гауссовское размытие.
img {
-webkit-filter : blur ( 6px ) ;
}
Параметр контролирует сколько пикселей в радиусе будут сливаться с друг другом, чем больше параметр тем больше размытие.
Комбинирование эффектов
Мы можем использовать несколько фильтров в одном селекторе, что создает интересные визуальные эффекты.
img {
-webkit-filter : grayscale ( 100% ) brightness ( -5% ) contrast ( 180% );
}
В примере мы пробуем сочетание grayscale, brightness, contrast, в результате получаем стиль нуар.
drop-shadow
Параметры схожи по синтаксису с box-shadow
img {
-webkit-filter : drop-shadow ( 20px 15px 20px #000 );
}Может возникнуть вопрос: «зачем drop-shadow, когда есть box-shadow?» Drop-shadow более мощнее, в этом легко убедиться на примере. Если мы возьмем наше изображение со штрихованным краем, то обратим внимание что тень генерируется по краю изображения.
Теперь, используем картинку с прозрачным фоном. Я удалил фон изображения (в Photoshop’е)и сохранил в PNG с прозрачностью. Тогда как box-shadow обрабатывает тень по краю изображения, а drop-shadow генерирует тень учитывая прозрачность.
(Слева) drop-shadow генерирует тень по штрихованному краю, (справа) тень падает, учитывая прозрачность.
Поддержка браузеров
В настоящее время данные фильтры работают только в браузеран на основе WebKit (Chrome, Safari и iOS Safari). Полный список поддержки данны фильтров можно увидеть в таблице совместимости.
CSS фильтры еще один пример, что мы не должны себя ограничивать Фотошопом, при создании Web контента.
Этот мощный инструмент, который помогает программистам и дизайнерам сократить разрыв между дизайном и кодом.
Оригинал статьи (англ.)