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

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

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

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

Можно применять несколько фильтров одновременно. Классический способ применения таких эффектов — при наведении на элемент:hover .

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

IE: не поддерживает
Edge: 13.0 кроме url()
Firefox: 35.0
Chrome: 18.0 -webkit-
Safari: 9.1, 6.0 -webkit-
Opera: 40.0, 15.0 -webkit-
iOS Safari: 9.3, 6.1 -webkit-
Android Browser: 53.0, 4.4 -webkit-
Chrome for Android: 55.0, 47.0 -webkit-

SVG uses element to define filters. element uses an id attribute to uniquely identify it.Filters are defined within elements and then are referenced by graphics elements by their ids.

SVG provides a rich set of filters. Following is the list of the commonly used filters.

• feBlend
• feColorMatrix
• feComponentTransfer
• feComposite
• feConvolveMatrix
• feDiffuseLighting
• feDisplacementMap
• feFlood
• feGaussianBlur
• feImage
• feMerge
• feMorphology
• feOffset - filter for drop shadows
• feSpecularLighting
• feTile
• feTurbulence
• feDistantLight
• fePointLight
• feSpotLight

Declaration

Following is the syntax declaration of element. We"ve shown main attributes only.

Attributes

Example

Sample SVG Filter

Two elements defined as filter1 and filter2.

feGaussianBlur filter effect defines the blur effect with the amount of blur using stdDeviation.

in="SourceGraphic" defines that the effect is applicable for the entire element.

feOffset filter effect is used to create shadow effect. in="SourceAlpha" defines that the effect is applicable for the alpha part of RGBA graphics.

elements linked the filters using filter attribute.

Output

Filter with Shadow effect

Sample SVG Filter

Output

Open textSVG.htm in Chrome web browser. You can use Chrome/Firefox/Opera to view SVG image directly without any plugin. Internet Explorer 9 and higher also supports SVG image rendering.

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

Внимание: Пока что технология является экспериментальной и лучше всего работает в Google Chrome и Firefox. Давайте более подробно разберем эту методику.

Создаем кнопку

Для начала создадим простую кнопку:

Click me

С базовыми стилями кнопка будет выглядеть примерно так:

Теперь создадим фильтр внутри SVG объекта, который мы поместим в HTML:

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

Button { /* остальные стили */ -webkit-filter: url("#filter"); filter: url("/#filter"); }

Слэш во втором объявлении крайне важен, он нужен для работы фильтра в Firefox.

Принцип работы фильтра

SVG фильтр содержит в себе список примитивов. Более подробно об этом можно прочесть в статье Лукаса . Нам в частности интересен примитив .

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

— примитив, генерирующий «шум» (по алгоритму шума Перлина). Что будет, если применить этот шум к нашей кнопке:

Тут огромную роль играет свойство . С его помощью генерируется сам шум. Свойство принимает два параметра, которые отвечают за эффект по Х и У координатам. Поиграйтесь с ползунками, чтобы понять принцип:

Теперь применим фильтра и посмотрим, что произойдет:

Тут важное свойство – scale – с его помощью задается сила эффекта.

Также нужно указать источники для нашего фильтра: все фильтры принимают два источника с помощью свойств in и in2. Первый источник будет SourceGraphic (HTML элемент, к которому применяется фильр) и вторым источником будет наш первый фильтр (мы назвали его шумом).

Теперь наша карта смещения знает, что нужно двигать пиксели элемента SourceGraphic на основе сгенерированного шума .

С помощью свойсвт xChannelSelector и yChannelSelector задается цвет смещения пикселей (R, G или B) для каждой оси.
Осталось анимировать эти свойства при помощи JS (мы используем библиотеку анимации Greensock):

С фильтром можно экспериментировать, его можно применить к любому HTML Элементу. В демо ниже мы применили его к области textarea:

Много скрытых возможностей

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

Ну вот и все! Большинство эффектов в демо работают по описанному нами принципу.

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

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

Надеемся вам понравился эффект, и статья оказалась полезной для вас». Наш проект на

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

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

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

Шаг 1. HTML

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

Когда мы установили базовые стили, то отображение стандартной кнопки у нас будет примерно такого плана:

Теперь создадим фильтр внутри SVG объекта, который мы поместили в HTML:

Затем применим только что созданный фильтр к кнопке следующим образом:

Обратите внимание, что сплэш, во втором варианте фильтра, крайне важен, он нужен для работы фильтра в Firefox.

Принцип работы фильтра

SVG фильтр содержит в себе список примитивов. Нам в частности интересен примитив .

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

- примитив, генерирующий «шум» (по алгоритму шума Перлина). Что будет, если применить этот шум к нашей кнопке:

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

Также нужно указать источники для нашего фильтра: все фильтры принимают два источника с помощью свойств in и in2 . Первый источник будет SourceGraphic (HTML элемент, к которому применяется фильр) и вторым источником будет наш первый фильтр (мы назвали его шумом).

Теперь наша карта смещения знает, что нужно двигать пиксели элемента SourceGraphic на основе сгенерированного шума .

С помощью свойств xChannelSelector и yChannelSelector задается цвет смещения пикселей (R, G или B) для каждой оси. Осталось анимировать эти свойства при помощи JS (мы используем библиотеку анимации Greensock ).

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

Ну вот и все! Большинство эффектов в демо работают по описанному нами принципу.

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

Specifications

Browser compatibility

The compatibility table on this page is generated from structured data. If you"d like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

Legend

See also

• SVG filter primitive composes two objects together ruled by a certain blending mode. This is similar to what is known from image editing software when blending two layers. The mode is defined by the mode attribute.">
• SVG filter element changes colors based on a transformation matrix. Every pixel" s color value by an vector is matrix multiplied to create a new color:>
• SVG filter primitive performs color-component-wise remapping of data for each pixel. It allows operations like brightness adjustment, contrast adjustment, color balance or thresholding.">
• SVG filter primitive performs the combination of two input images pixel-wise in image space using one of the Porter-Duff compositing operations: over, in, atop, out, xor, and lighter. Additionally, a component-wise arithmetic operation (with the result clamped between ) can be applied.">
• SVG filter primitive applies a matrix convolution filter effect. A convolution combines pixels in the input image with neighboring pixels to produce a resulting image. A wide variety of imaging operations can be achieved through convolutions, including blurring, edge detection, sharpening, embossing and beveling.">
• SVG element allows filter effects to be applied concurrently instead of sequentially. This is achieved by other filters storing their output via the result attribute and then accessing it in a child.">
• SVG filter primitive is used to erode or dilate the input image. It" s usefulness lies especially in fattening or thinning effects.>
• SVG filter primitive allows to offset the input image. The input image as a whole is offset by the values specified in the dx and dy attributes.">
• SVG filter primitive lights a source graphic using the alpha channel as a bump map. The resulting image is an RGBA image based on the light color. The lighting calculation follows the standard specular component of the Phong lighting model. The resulting image depends on the light color, light position and surface geometry of the input bump map. The result of the lighting calculation is added. The filter primitive assumes that the viewer is at infinity in the z direction.">
• SVG filter primitive allows to fill a target rectangle with a repeated, tiled pattern of an input image. The effect is similar to the one of a .">
• SVG filter primitive creates an image using the Perlin turbulence function. It allows the synthesis of artificial textures like clouds or marble. The resulting image will fill the entire filter primitive subregion.">