Мы принимаем к оплате:

«Подарочный сертификат» от нашего Учебного Центра – это лучший подарок для тех, кто Вам дорог! Оплате обучение и подарите Вашим родным и близким обучение по любому из курсов!!!

«Сертификат на повторное обучение» дает возможность повторно пройти обучение в нашем Учебном Центре со скидкой 1000 рублей!

А также:


Фильтры в css


[Перевод] CSS Filters

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

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

Фильтры были созданы как часть спецификации SVG. Их задачей было применение эффектов, основанных на пиксельной сетке к векторной графике. Со временем интернет-браузеры были наделены поддержкой SVG и полезность фильтров стала очевидна. Robert O’Callahan из Mozilla описал идею применения SVG фильтров к элементам DOM с помощью описания их в CSS. Он создал пример в котором показал насколько проще может быть применение SVG эффектов в комбинации с CSS. Рабочие группы CSS и SVG объединились и создали новое CSS свойство filter. Документация по данной спецификации находится здесь.

Новая жизнь свойства «filter»
Порой просматривая CSS код какой-либо странички в интернете вы не редко натыкаетесь на данное свойство. Но в большинстве случаев это свойство записано для старых версий Internet Explorer, оно управляет некоторыми эффектами, реализованными в браузере. Свойство это было опущено в пользу стандартного, которое уже сейчас является частью спецификации CSS3.
Как работают фильтры
Что же делают фильтры? Можно представить себе что это некий постпроцесс, который творит чудеса с элементами на странице уже после того как они были отрисованны. Загружая веб-страницу, браузер создает ее макет, применяет стили и на конечном этапе рендерит ее. Фильтры применяются после всех этих операций, но до того, как отрисованная страница попадет на экран. Они обрабатывают страницу попиксельно применяя заданные эффекты и отрисовывают результат поверх оригинала. Таким образом применяя несколько фильтров можно достигать различных эффектов, они как бы накладываются друг на друга. Чем больше фильтров, тем больше времени требуется браузеру чтобы отрисовать станицу.
Описание фильтров с помощью SVG и CSS
Существует несколько способов описания и применения фильтров. Сам по себе SVG является элементом, в котором фильтры описываются с помощью синтаксиса XML. Описание фильтров используя CSS стили дает тот же результат, но благодаря синтаксису CSS этот способ является много проще. Большинство стандартных CSS фильтров могут быть описаны и с помощью SVG, так же CSS позволяет ссылаться на фильтры описанные в SVG формате. Здесь мы поговорим только о фильтрах доступных в CSS.
Как использовать СSS Filters
Фильтры можно применять к любому видимому элементу на странице.

div { filter: grayscale(100%); }

Данный пример изменит цвет контента находящегося внутри тега на ч/б.

Каждый фильтр имеет параметр который позволяет изменять силу действия фильтра.

div { filter: grayscale(50%); }

Можно применять несколько фильтров одновременно.

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

Какие фильтры доступны для использования в CSS

grayscale(значение)

Конвертирует цвета в ч/б. Значение задается как в процентах (0% — 100%), так и в десятичных дробях (0 — 1).

sepia(значение)

Создает эффект сепии. Значение задается как в процентах (0% — 100%), так и в десятичных дробях (0 — 1).

saturate(значение)

Управляет насыщенностью цвета. Значение задается как в процентах (0% — 100%), так и в десятичных дробях (0 — 1).

hue-rotate(угол)

Меняет цвета изображения в зависимости от заданного угла. Угол поворота определяет на сколько изменится данный цвет в цветовом круге от красного до фиолетового. Значение задается в градусах (0deg — 360deg).

invert(значение)

Инвертирует цвета. Значение задается как в процентах (0% — 100%), так и в десятичных дробях (0 — 1).

opacity(значение)

Задает прозрачность элемента. Значение задается как в процентах (0% — 100%), так и в десятичных дробях (0 — 1).

Данный фильтр работает так же как и CSS свойство opacity. Единственное различие в том, что фильтр поддерживает аппаратное ускорение, а свойство нет. Таким образом применение фильтра даст большую производительность.

brightness(значение)

Изменяет яркость изображения. Значение задается как в процентах (0% и больше), так и в десятичных дробях (0 и больше).

contrast(значение)

Изменяет контрастность изображения. Значение задается как в процентах (0% и больше), так и в десятичных дробях (0 и больше).

blur(радиус)

Создает эффект размытости. Значение задается в пикселях (px).

drop-shadow(x, y, радиус, цвет)

Создает тень аналогично CSS свойству box-shadow, но только фильтр имеет поддержку аппаратного ускорения. Значения задаются аналогично значениям CSS аналога.

drop-shadow(16px 16px 20px black);

filter: drop-shadow(inset 0 0 2rm blue);

url(ссылка на SVG фильтр)

Можно создавать собственные фильтры с помощью SVG элемента filter и ссылаться на них из CSS. Каждый фильтр имеет свой id.

SVG: ... CSS:

div { filter: url(#foo); }

custom (coming soon)

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

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

Большинство фильтров работают довольно быстро на любом устройстве поддерживающем их. Однако фильтры blur и drop-shadow, использующие эффект размытости, работают намного медленнее остальных. Как именно они работают?

Когда вы применяете фильтр blur, он смешивает цвета пикселей вокруг каждого пикселя, таким образом создавая эффект размытости. Например, если задан радиус 2px, то фильтр будет выбирать по два пикселя во всех направлениях и смешивать их цвета и так для каждого пикселя. Чем больше радиус, тем больше времени нужно на расчет эффекта. Так как фильтр выбирает пиксели во всех направлениях, то при увеличении радиуса размытости в 2 раза количество пикселей возрастает в 4 раза. Это означает, что времени на расчет потребуется ровно в 4 раза больше. Фильтр drop-shadow содержит в себе фильтр blur.

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

Большинство CSS фильтров сейчас доступны для использования в браузере FireFox и браузерах на движке WebKit. В скором времени надеемся увидеть поддержку в браузерах Opera и IE10. Так как спецификация все еще находится в разработке, приходится использовать вендорные префиксы. Для WebKit -webkit-filter, для FireFox префикс не требуется.

Ниже приведена таблица совместимости фильтров с браузерами.

Полезные ссылки
Рисуем с помощью CSS фильтров. Двигаем ползунки смотрим что получилось. Туториал с примерами. Официальная W3C документация по спецификации Filter Effects 1.0 Пример UI созданного с помощью фильтров.

Оригинал статьи: UNDERSTANDING CSS FILTER EFFECTS

P.S.

— В Chrome 19 фильтр drop-shadow не размывает границы тени.

— Фильтр яркости на деле не понимает значения больше 1 (100%). В оригинальной статье говорится о том, что значение 1 (100%) является значением нормальной яркости, и при увеличении его можно повысить силу действия фильтра. На самом деле значение 1 (100%) дает повышение яркости до предела, а отрицательное -1 (-100%) понижает яркость.

— Пример со всеми фильтрами — ссылка.

— Пример использования фильтров с CSS3 Transitions на состояние :hover — ссылка. — Анимированная мозайка с использованием фильтра blur(). Убедитесь сами как данный фильтр съедает ваш процессор (аппаратное ускорение должно быть отключено) — ссылка. Теги:
  • css
  • фильтры
  • web-разработка

CSS фильтры изображений

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

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

Но все же в CSS-фильтрах имеется один небольшой недостаток – не все веб-браузеры поддерживают визуальные эффекты. Разумеется, это лишь вопрос времени. И к наступлению часа «х» разработчикам нужно быть готовым. А пока рассмотрим то, что на данный момент уже реализовано.

Поддержка CSS фильтров браузерами

В основном все ходовые браузеры, Firefox, Chrome, Opera, имеют «дружеское» отношение с фильтр-эффектами. Чего не скажешь о IE, который напрочь отказывается поддерживать эффекты, даже в самых поздних версиях.

Браузер Explorer Chrome Firefox Safari Opera Android iOS
Версия no 31+ 35+ 7+ 18+ 4.4+ 6+
filter (-webkit-) + (-webkit-) (-webkit-) (-webkit-) (-webkit-)

Функции и синтаксис CSS фильтров

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

Синтаксис

Список фильтров

Фильтр Описание
blur (px) Фильтр для размытия изображения. Степень размытия указывается в пикселях. Если число не задано, то по умолчанию используется 0.
drop-shadow () Тень. Альтернатива свойству box-shadow с аналогичными параметрами и тем же порядком прописывания. Исключением является четвертое значение «растяжение»: почти все браузеры его не поддерживают.
grayscale (%) Фильтр «обесцветить». Применяются оттенки серого цвета к изображению в зависимости от указанного процента. Не допускается отрицательное значение, а оригинальность картинки равна 0.
brightness (%) Настройка яркости изображения. Значение в 100% показывает исходную точку яркости. Регулировка совершается как отрицательно (-50%), так и положительно (150%).
contrast (%) Настройка контрастности изображения. Как и в предыдущем фильтре, значение в 100% покажет исходную точку. Изменения можно задавать отрицательные (-20%) и положительные (120%).
hue-rotate (deg) Поворотное наложение тона цвета. В зависимости от указанного градуса (от 0deg до 360deg) на изображение будет налаживается цвет, который определяется по цветовому кругу.
invert (%) Инверсия изображения. Применяется значение от 0 до 100% без отрицательного параметра.
saturate (%) Насыщенность изображения. Исходное положение определяется в 100% и не имеет отрицательного значения.
sepia (%) Эффект сепия. Оригинальность картинки определяется в 0% и доступна до значения 100% без отрицания.
opacity (%) Прозрачность картинки. Еще один фильтр, у которого есть аналогичное свойство opacity с таким же способам в использовании. Настройка допускается от 0 до 100% без отрицательного параметра.
url () CSS ссылка на SVG элемент с определенным идентификатором #id.
initial Устанавливает значение свойства по умолчанию.
inherit Наследует все значения свойства своего родительского элемента.

Примеры CSS filters

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

Фильтр размытия [blur]

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

В оформлении сайта (к примеру – размытие) можно использовать как подкладку для лучшей читаемости текста, расположенного на картинке. Собственно, размытие совершается по гауссу от значения 0 px и до полного исчезновения.

Оригинал Фильтр Hover-эффект

Фильтр тень [drop-shadow]

Свойство тень пришло к нам еще с третьей версией каскадной таблицы. Безусловно, оно знакомо всем, кто занимается сайтостроением, так как box-shadow в дизайне играет далеко не последнюю роль. Фильтр drop-shadow можно назвать неполноценной альтернативой с аналогичными параметрами, а их всего 5, не считая внутреннюю тень.

Порядок прописывания такой: 5px/-5px (смещение по горизонтали), 5px/-5px (смещение по вертикали), 15px (радиус размытия тени), 5px/-5px (растягивание тени), black (цвет). Фильтр поддерживает весь синтаксис кроме растягивания и значения inset (внутренняя тень), а также добавления нескольких теней через запятую. Но несмотря на все это, присутствуют свои достоинства, к примеру, фильтр учитывает псевдоэлементы, что позволяет отображать точную форму тени элемента. Посмотреть пример.

Также интересным является то, что когда у блока нет фона, а лишь задана обводка border, то при использовании box-shadow будет отображаться тень с якобы учетом фона, то есть сплошная. А в случае использования drop-shadow тень принимает форму обводки без учета фона.

Оригинал Фильтр Hover-эффект

Фильтр обесцвечивания [grayscale]

Классический стиль фотографии для всех времен в правильном направлении. Фильтр допускает лишь одно значение — положительное. В зависимости от указанного процента оттенки серого будут плавно заменять цвет изображения. Также вместо процентов можно применять дробь до целого числа (0.01/1).

Оригинал Фильтр Hover-эффект

Фильтр яркости [brightness]

Добавление света к «неизведанным» черным углам изображения. В обработке фотографий применяется нередко, так как любительские снимки, как правило, совершаются в плохо освещенных местах. Яркость фильтра регулируется от 0% (полностью черная картинка) до почти полного исчезновения изображения. Оригинальная точка определяется в 100%, а значение также можно указывать дробью.

Оригинал Фильтр Hover-эффект

Фильтр контрастности [contrast]

Нехитрый способ сделать изображение более выразительным, поэкспериментировав с настройками яркости самых светлых и темных частей картинки. Фильтр contrast готов этому помочь. Его параметры, как и у многих, исключают отрицательное значение (-150%), а исходное положение обозначается в 100%. Кроме процентов, допускается также дробь (1.5).

Оригинал Фильтр Hover-эффект

Фильтр тона цвета [hue-rotate]

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

Если значение указано положительное (150deg), то поворот происходит по часовой стрелке. Соответственно, если отрицательное, то против часовой. В двух положения начинается от 0deg до 360deg.

Оригинал Фильтр Hover-эффект

Фильтр инверсия [invert]

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

Оригинал Фильтр Hover-эффект

Фильтр насыщенность [saturate]

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

Оригинал Фильтр Hover-эффект

Фильтр сепия [sepia]

Имитация эффекта старинных фотографий (слегка коричневый оттенок). Таким образом достигается ретро стиль изображения, который пользуется особой популярностью. Фильтр сепия регулируется от 0% (исходное положение) до 100%.

Оригинал Фильтр Hover-эффект

Фильтр прозрачность [opacity]

Фильтр аналогичный свойству opacity из каскадной таблицы 3-й версии. Синтаксис такой же, а значение прозрачности регулируется от 0% до 100% (исходное положение).

Оригинал Фильтр Hover-эффект

Фильтр ссылка [url]

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

Пример, пример, пример

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

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

Оригинал Фильтр Hover-эффект

Фильтр DuoTone [двухцветная модель]

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

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

Скачать библиотеку

Генератор CSS filters

Уже давно повелось создавать генераторы различных CSS свойств. Генераторы градиентов, CSS кнопок и многое-многое другое. Они служат как инструмент, упрощающий работу. А для начинающих вебмастеров могут нести двойную пользу. Ими очень легко пользоваться: перемещаете ползунки, и сразу же виден результат. А по окончании остается лишь скопировать сгенерированный код. То же и с генераторами CSS фильтров. Вот два из них для ознакомления:

http://webcodetools.com/css-generators/ http://www.cssreflex.com/css-generators/filter/

Заключение

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

Css filter или какие есть в css фильтры изображений?

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

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

Теория — как пишутся фильтры

Это важно знать. На данный момент фильтры стоит писать только с префиксом -webkit. Без него, скорее всего, они работать не будут. Общий синтаксис свойства такой: -webkit-filter: название фильтра(значение); Что ж, на этом короткая вступительная часть закончена, переходим к самому главному!

Яркость и контрастность

Первые два фильтра, которые мы рассмотрим. Яркость задается так:

.city{ -webkit-filter: brightness(1.6); }

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

.city{ -webkit-filter: contrast(1.6); }

В этих фильтрах значение можно задавать от 0.1 до 10, где 1 — нормальная яркость и контрастность изображения.

Управление насыщенностью цвета

Для этого создали два фильтра — grayscale и saturate. Первый делает картинку менее насыщенной в цветах, добавляет ей эффект черно-белого фото, второй — наоборот, добавляет красок. Примеры использования:

.city{ -webkit-filter: grayscale(0.7); }

В grayscale можно писать значение от 0 до 1, где 1 — максимальный эффект черно-белого фото. Как видим, значение 0.7 тоже делает фото гораздо насыщенным на цвета. А теперь сделаем наоборот:

.city{ -webkit-filter: saturate(3); }

В фильтре saturate уже допускается значение от 0.1 до 10. 1 — нормальное состояние. Мы увеличили насыщенность цвета в 3 раза и вот что получилось:

Да, это реклама, но надеюсь, она будет полезна вам. GetUniq это сервис для вебмастеров и всех работающих с трафиком людей, с помощью которого можно выгоднее пополнять счета в кабинетах рекламных сетей, таких как Яндекс.Директ, MyTarget, ВК Таргет и другие. Без использования сервиса вам придется заплатить 1180 рублей за пополнение счета в Директе на 1000, а используя возможности Getuniq за эти же 1180 на ваш счет поступит 1100-1200 рублей! То же самое для всех других сетей. Я сам уже начал использовать и порекомендовал всем знакомым вебмастерам, рекомендую и вам. При желании, по этой ссылке вы можете почитать мой обзор сервиса.

Поворот цвета и инверсия

Вот это, как по мне, самые интересные фильтры. Благодаря Invert можно создать картинку в полностью противоположных цветах. Указывается значение от 0 до 1, где 1 — полная противоположность текущим цветам.

.city{ -webkit-filter: invert(0.7); }

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

.city{ -webkit-filter: hue-rotate(156deg); }

Значение можно указывать от 0 до 360deg. И да, 180 градусов — это полная инверсия цвета.

Размытие и полупрозрачность

Эти фильтры уже наверняка известны, если вы используете css3. Например, у теней можно задавать размытие, а свойство opacity позволяет задать прозрачность. Теперь эти возможности появились в виде фильтров.

.city{ -webkit-filter: blur(4px); }

Размытие задается в пикселях. Обычно хватает от 1 до 10 пикселей. С помощью экспериментов вы можете выяснить, как необходимо сделать вам.

.city{ -webkit-filter: opacity(0.45); }

По умолчанию прозрачность картинки — 0%, то есть она полностью непрозрачна. Значение opacity(1) соответствует полной непрозрачности, а opacity(0.1) — практически полной непрозрачности. Получается, фильтр делает то же самое, что и свойство opacity? Да, действуют они абсолютно одинаково. Но разница все же есть. По мнению некоторых, применения фильтра дает больше производительности.

Сепия

Отдельно нужно написать об этом фильтре. Сепия — это что-то вроде эффекта старой фотографии. Тут лучше 1 раз увидеть:

.city{ -webkit-filter: sepia(0.8); }

Значение задается от 0 до 1. 1 — максимальный эффект сепии.

Тень

Вот еще что, тень какая-то? Да, с помощью фильтров также можно создавать тень, такую же, как с помощью box-shadow. Но все же тень при помощи фильтра работает немного по-другому. Чтобы это продемонстрировать, мне нужна png-картинка. И теперь применим к ней тень:

.key{ -webkit-filter: drop-shadow(5px 5px 0 red); }

Как видите, она задается с помощью drop-shadow, в скобках перечисляются 4 параметра. Отсутствует растяжение, а также не поддерживается ключевое слово inset, которое создает внутреннюю тень. Обо всем этих параметрах теней вы можете прочитать здесь более подробно. И вот что получилось: Как видите, drop-shadow делает тень четко по краям изображения, box-shadow так не может. Это основное отличие этих двух свойств.

Плавные переходы и анимации фильтров

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

Ну а я покажу пару примеров. В частности, плавное появление тени у картинки при наведении на нее.

.key{ transition: 0.6s; } .key:hover{ -webkit-filter: drop-shadow(-5px -5px 0 brown); }

Результат вы можете увидеть по наведению на изображение.

Ну и еще один пример — анимация. Я уже говорил о том, что можно запустить бесконечную анимацию любого фильтра. Результат получается любопытным, так что занятие это достаточно интересное. Например, сейчас я сделаю бесконечный поворот цвета:

@keyframes filter{ from{-webkit-filter: hue-rotate(0deg);} to{-webkit-filter: hue-rotate(360deg);} }

Теперь остается добавить созданные эффекты нашему изображению:

.city10{ animation-name: filter; animation-duration: 3s; animation-iteration-count: infinite; }

Вот что получаем в итоге: Что ж, на этом мы разобрали все фильтры в css. Я насчитал 10. С их помощью вы уже сегодня можете только на чистом css делать очень много интересных вещей с картинками. Если у вас остались какие-то вопросы, задавайте их в комментарии, а я пойду пока чайку попью

Эффекты CSS-фильтров

В данной статье рассматриваются API, которые еще не полностью стандартизированы и все еще продолжают развиваться. Будьте осторожны при использовании экспериментальных API, в собственных проектах.

Введение

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

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

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

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

У Роберта O’Каллахана из Mozilla возникла блестящая идея — использовать SVG фильтры путем применения CSS к «обычному» HTML-контенту.

Роберт разработал прототип, который показал, насколько мощными возможностями может обладать комбинация фильтров и стилей CSS. Рабочие группы W3C, занимавшиеся CSS и SVG, решили упорядочить через CSS-стили использование фильтров как для HTML, так и для SVG, и таким образом родилось свойство CSS — «filter«.

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

Новая жизнь свойства CSS «filter»

Веб-разработчики иногда переживают дежавю, когда видят «filter» в стилях CSS. Это связано с тем, что старые версии Internet Explorer имели свойство «filter», реализуемое через CSS для обеспечения некоторых функций платформы. Это было старое определение стандарта свойства «filter», которое теперь является частью CSS3.

Поэтому, когда вы видите «filter» в среде некоторых старых веб-страниц, не путайте его с новыми фильтрами. Новое свойство «filter» — это объект, в котором происходят все преобразования, и новые версии IE реализуют его так же, как и все остальные современные браузеры.

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

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

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

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

Еще один образ, который можно представить — это фильтр, помещенный на объектив фотокамеры. Вы видите через объектив камеры внешний мир, измененный эффектом фильтра.

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

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

Фильтры, определяемые с помощью SVG и CSS

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

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

Большинство CSS-фильтров может быть выражено в терминах фильтров SVG, и CSS также позволяет ссылаться на фильтр, определенный в SVG.

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

Как применять CSS-фильтр

Примечание: описания и примеры, приведенные ниже, используют официальный синтаксис W3C, который рано или поздно будет доступен во всех современных браузерах. Чтобы использовать фильтры в данный момент, вы должны использовать версию свойства «filter» с вендорным префиксом. Но не волнуйтесь, есть простой способ справиться со всем этим, о чем мы расскажем в конце этой статьи.

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

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

и тогда все содержимое внутри всех элементов на странице будет окрашено в серые тона. Отлично подходит для создания страницы в стиле телевизионной картинки 40-х годов прошлого века:

Оригинальное изображение

Изображение после применения фильтра

Большинство фильтров используют определенную форму параметра для регулировки того, насколько интенсивно применяется фильтр.

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

div { +filter: grayscale(50%); }

Отфильтрованное на 50% изображение

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

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

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

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

Какие эффекты фильтров доступны через CSS

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

Давайте рассмотрим каждый из них и разберемся, что они делают.

grayscale(amount)

Этот фильтр переводит цвета входящего изображения в оттенки серого. «amount» указывает, на сколько процентов применяется данный фильтр. Если «amount» равно 100%, то все цвета будут представлены в оттенках серого, если это 0% — цвета остаются неизменными.

Вы можете использовать для определения значения число с плавающей точкой, если предпочитаете обойтись без процентов. То есть, 0 обозначает то же, что и 0%, 1.0 — 100%:

Оригинал

grayscale(100%)

Этот фильтр передает цвета с оттенками сепии, как на старых фотографиях. «amount» используется так же, как и для фильтра grayscale.

А именно: 100% делает все цвета полностью представленными в оттенках сепии, меньшие значения позволяют применить эффект не так интенсивно:

Оригинал

sepia(100%)

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

Данный эффект также позволяет использовать значение, превышающее 100%, чтобы действительно подчеркнуть насыщенность. Определенно это тот эффект, который может сделать изображения действительно потрясающими!

Оригинал

saturate(10)

Примечание: В Chrome версии 19, в соответствии со спецификацией W3C, функция saturate() принимает целое значение (без знака процентов) вместо десятичных чисел или процентов. Не волнуйтесь, об этой ошибке известно разработчикам, вскоре она будет исправлена.

hue-rotate(angle)

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

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

Оригинал

hue-rotate(90deg)

Этот эффект переворачивает цвета — так что, если параметр «amount» равен 100%, результат будет выглядеть как негатив пленки старого фотоаппарата! Аналогично предыдущим фильтрам, используя значения меньше 100%, мы можем регулировать интенсивность применения фильтра:

Оригинал

invert(100%)

Если вы хотите, чтобы контент выглядел полупрозрачным, этот фильтр — то, что вам нужно. Значение «amount» определяет, насколько прозрачным будет содержимое страницы. Так значение 100% устанавливает полную непрозрачность, то есть изображение на входе будет аналогично выходному изображению.

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

«amount» 0% означает, что изображение полностью исчезнет — но обратите внимание, вы все равно можете задавать для них отслеживание событий, таких как клик мыши и т.д. Это возможно даже для полностью прозрачных объектов. Что удобно, если вы хотите создать интерактивные области, в которых совсем ничего не будет отображаться.

Этот фильтр работает так же, как свойство «opacity», которое вы уже знаете. Как правило, для свойства CSS «opacity» не применяется аппаратное ускорение, но некоторые браузеры, реализующие фильтры с использованием аппаратного ускорения, для большей производительности ускоряют версию фильтра непрозрачности:

Оригинал

opacity(50%)

Этот эффект действует, как регулировка яркости в телевизоре. Он изменяет цвета от полностью черного до первоначального цвета пропорционально заданному параметру «amount«.

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

Конечно, вы можете продолжить — установив что-то вроде 200%, вы получите изображение в два раза более яркое, чем оригинал — отличный способ для обработки снимков, сделанных при низкой освещенности!

Оригинал

brightness(140%)

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

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

Оригинал

contrast(200%)

blur(radius)

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

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

Параметр «radius» влияет на то, как много пикселей на экране смешиваются друг с другом. Чем больше его значение, тем сильнее размытие. Ноль, конечно, оставляет изображение без изменений:

Оригинал

blur(10px)

Хорошо иметь в распоряжении эффект, который дает возможность сделать так, чтобы контент выглядел, будто он расположен на солнце, которое отбрасывает тень на землю позади него. И это, конечно, достигается с помощью фильтра «drop-shadow».

Он делает снимок изображения, переводит его в один цвет, размывает, а затем немного компенсирует результат так, что это выглядит, как тень от исходного контента. Параметр «shadow» на самом деле является немного более сложным, чем просто одно значение. Это ряд значений, разделяемых пробелом — и некоторые значения являются необязательными!

«shadow» задает такие параметры, как расположение тени, степень размытия, цвет тени и т.д. Для получения полной информации о том, что задается значениями параметра «shadow», ознакомьтесь со спецификацией «box-shadow» CSS3 Backgrounds.

Несколько примеров, приведенных ниже, должны дать вам представление о том, какие варианты эффектов доступны с помощью этого фильтра:

drop-shadow(16px 16px 20px black)

drop-shadow(10px -16px 30px purple)

Это еще одна операция с фильтрами, которая похожа на существующий CSS функционал, доступный через свойство ‘box-shadow’. Использование этого фильтра означает, что в некоторых браузерах вы можете оптимизировать его работу с помощью аппаратного ускорения, как это было описано в разделе «opacity».

Фильтры url-адресов, связанных с SVG

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

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

Например, SVG-разметка для фильтра может представлять собой примерно следующее:

...

А в CSS вы можете разместить такой простой код:

div { +filter: url(#foo); }

И вуаля! Все блоки в документе будут оформлены с применением SVG-фильтра.

custom (ожидается вскоре)

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

Эта часть спецификации «filter» все еще находится в стадии обсуждения, но как только она будет реализована в большинстве популярных браузеров, мы обязательно подробно ее опишем.

Вопросы производительности

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

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

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

Тем не менее, фильтры, которые выполняют различные виды размытия, как правило, медленнее, чем другие. Это относится к таким эффектам, как ‘blur’ и ‘drop-shadow’. Это, конечно, не означает, что вы не должны их использовать, просто нужно понимать, как они работают.

Когда вы применяете фильтр ‘blur’, для генерации эффекта размытия он смешивает цвета из разных пикселей по всему выходному изображению. Так, скажем, если параметр ‘radius’ равен 2, то для генерации смешанных цветов фильтр должен обрабатывать 2 пикселя в каждом направлении от каждого исходного пикселя.

Так как это делается для каждого исходного пикселя, то автоматически это означает большое количество расчетов. И чем больше радиус, тем больше расчетов. Поскольку ‘blur’ обрабатывает пиксели в каждом из направлений, удвоение радиуса означает, что должно быть обработано в 4 раза больше пикселей.

То есть каждое увеличение радиуса в два раза влечет за собой замедление работы в четыре раза. Фильтр ‘drop-shadow’ содержит эффект ‘blur’ как одну из составляющих частей обработки объектов. Поэтому он ведет себя так же, как и ‘blur’, когда вы изменяете части ‘radius’ и ‘spread’ параметра ‘shadow’.

Однако с ‘blur’ на самом деле не все так плохо, так как на некоторых платформах можно использовать графический процессор для его ускорения. Но это доступно не во всех браузерах.

Если вы сомневаетесь, лучше всего экспериментировать и вывести наименьшее значение ‘radius’, которое дает вам приемлемый визуальный эффект. Такая настройка сделает счастливее ваших пользователей, особенно если они заходят на ваш сайт со смартфона.

Если вы используете ‘url’ фильтры, ссылающиеся на SVG-фильтры, они могут содержать любые произвольные эффекты фильтров, и поэтому также могут работать медленно.

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

Доступность в современных браузерах

На данный момент ряд CSS эффектов «filter» доступны в WebKit-браузерах и Mozilla Firefox. В ближайшее время мы ожидаем того же и в Opera, а также в Internet Explorer 10.

Так как спецификация находится в стадии разработки, некоторые производители браузеров реализовали этот материал с помощью префиксов. Таким образом, в WebKit вам нужно использовать ‘-webkit-filter’, в Mozilla Firefox ‘-moz-filter’. Кроме того следите за версиями, выходящими для других браузеров, по мере их релиза.

Не все браузеры будут поддерживать абсолютно все эффекты фильтров, поэтому набор фильтров будет варьироваться для разных платформ. В настоящее время браузер Mozilla Firefox поддерживает только функцию ‘filter: url()‘ — без вендорного префикса, поскольку ее реализация предваряет другие функции эффектов.

Ниже мы просуммировали основные эффекты 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() Chrome, Mozilla  По-разному, быстро и медленно

Перевод статьи «Understanding CSS Filter Effects» был подготовлен дружной командой проекта Сайтостроение от А до Я.


Смотрите также



Компьютерные курсы по направлениям:

Для начинающих


A

Компьютер для начинающих: Word, Excel, Access и другие программы!

Графические пакеты


B

Популярные пакеты Adobe Photoshop, CorelDraw, ArchiCAD, AutoCAD и другие!

WEB + анимация


C

Курсы по созданию сайтов, WEB-дизайну и крутой анимации в Adobe Flash!

Бухгалтерия + делопроизводство

Сетевые технологии


E

Курсы сборки ПК, системных администраторов и защиты информации!