Filter css что это

Продвинутые CSS фильтры

Перевод статьи advanced css filters, авторства Vincent De Oliveira, найденная мною в последнем дайджесте.

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

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

CSS фильтры такие как blur(), contrast() или grayscale() — отличное дополнение к CSS, несмотря на то, что SVG может позволить сделать восхитительные вещи. Больше узнать о них вы можете на множестве ресурсов.

Сегодня я хочу пойти чуть дальше, показав новые возможности CSS.

backdrop-filter

В первую очередь — это backdrop-filter свойство, определенное в Filter Effect Level 2. Оно позволяет применять фильтры к фону(backdrop) элемента, а не к его фону(background).

Я был настроен скептически, но я начал играться в WebKit nightlies в феврале, и изменил свое мнение — это очень круто. Каждый согласится со мной, что подтверждается моим Vine (сервис, похожий на Сoub — прим. переводчика) постом, который собрал более 20 тысяч просмотров за 48 часов.

В июне, Apple анонсировала на WWDC, что эти свойства будут доступны в Safari 9. Это хорошая новость. Самое время проверить, (автор использует бету iOS 9 и Safari 9).

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

Каждый элемент за header`ом размыт на 5px. Это так просто.

Живой пример на JSBin (только Safari 9).

В демо, я использовал для того, чтобы применить backdrop-filter вместе с небольшими корректировками (background-color и позиционирование), чтобы сохранить читаемость header`а в неподдерживаемых браузерах.

backdrop-filter может повысить читаемость текста, наложенного поверх изображения:

Живой пример на JSBin (только Safari 9).

Комбинируя несколько фильтров, вы можете сделать простые графические эффекты, близкие к тем, которые предлагает CSS blend-modes:

Живой пример на JSBin (только Safari 9).

filter()

Иногда, надо наложить фильтр ни на элемент, ни на фон(backdrop). Вы просто хотите применить его к фону(background), но свойства background-filter нет. Вот тут может пригодиться функция filter(), не следует путать со свойство filter. Функция принимает два параметра: изображение и фильтр, возвращает новое изображение. Это изображение можно использовать с любым CSS свойством, поддерживающим изображения. Как то так:

В результате, теперь можно применять фильтры для изображений, перед использование в качестве фона. Вы можете подумать, что она — вариация background-filter (или background-opacity, background-blur), но она намного мощнее.

Живой пример на JSBin (только Safari 9).

Хорошая новость в том, что даже без упоминания Apple, она доступна в Safari 9.

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

OK, сейчас поддержка минимальна, но это станет возможным на миллионах iPhone`ов и iPad`ов до конца года.

Источник

[Перевод] 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

Фильтры можно применять к любому видимому элементу на странице.

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

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

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

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

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

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

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

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

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

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

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

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

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

Создает эффект размытости. Значение задается в пикселях (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.

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

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

Синтаксис:

В свойстве может быть использована одна или несколько функций:

Для применения в свойстве одновременно нескольких функций их названия нужно разделять пробелом.

Пример применения CSS filter blur :

Пример применения нескольких фильтров:

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

Чтобы использовать свойство, необходимо указать значение для одной из функций, перечисленных выше. Если значение является недействительным, то функция возвращает « none «. За исключением отдельных случаев, функции, которые принимают значение в процентах ( например, 34% ), также принимают численные значения, заданные десятичной дробью.

Ниже мы применим множество различных функций фильтров к этому изображению ( в том числе и для создания CSS blur effect ):

grayscale()

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

sepia()

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

saturate()

hue-rotate()

Применяет к входящему изображению смещение цветовых тонов. Значение “ angle ” определяет количество градусов по круговой диаграмме цветов, на которое будут скорректированы цвета исходного изображения. Значение 0 градусов оставляет исходное изображение без изменений. Если параметр “ angle ” не задан, используется значение 0. Максимальное значение 360 градусов.

invert()

opacity()

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

Эта функция аналогична более традиционному свойству opacity. Разница заключается в том, что некоторые браузеры применяют для фильтров аппаратное ускорение. Отрицательные значения не допускаются ( как и в blur image CSS ).

brightness()

Изменяет яркость изображения. Значение 0% создает полностью черное изображение. Значение 100% оставляет исходное изображение изменений. Допускаются значения больше 100%, которые дают на выходе еще более яркое изображение. Если параметр не задан, используется значение 100%.

Задает контрастность входящего изображения. Значение 0% создает полностью черное изображение, 100% — оставляет исходное изображение без изменений. Допускаются значения больше 100%, которые на выходе дают меньше контрастности. Если параметр не задан, используется значение 100%.

drop-shadow()

Применяет к входящему изображению эффект тени. Фильтр создает размытую, смещенную версию входящего изображения с альфа-маской определенного цвета, которая выводится под изображением. Функция принимает параметр type ( определен в CSS3 Backgrounds ). Ключевого слова « inset » не допускается.

Анимация фильтров

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

Примечания

Фильтры для IE

Свойство filter также используется следующим образом:

В основном используется для непрозрачности, когда необходимо добавить поддержку в IE 8 и ниже.

Источник

filter

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

Описание

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

В стандарт CSS включены несколько функций, которые обеспечивают предопределённые эффекты. Вы также можете ссылаться на SVG фильтр с URL-адресом на элемент фильтра SVG.

Синтаксис

С помощью функции, используйте:

Для ссылки на SVG (en-US) элемент, используйте:

Формальный синтаксис

Примеры

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

Примеры использования функции URL с SVG ресурсом показаны ниже.

Функции

The url() function takes the location of an XML file that specifies an SVG filter, and may include an anchor to a specific filter element.

blur() [размытие]

Applies a Gaussian blur to the input image. The value of ‘radius’ defines the value of the standard deviation to the Gaussian function, or how many pixels on the screen blend into each other, so a larger value will create more blur. If no parameter is provided, then a value 0 is used. The parameter is specified as a CSS length, but does not accept percentage values.

brightness() [яркость]

Applies a linear multiplier to input image, making it appear more or less bright. A value of 0% will create an image that is completely black. A value of 100% leaves the input unchanged. Other values are linear multipliers on the effect. Values of an amount over 100% are allowed, providing brighter results. If the ‘amount’ parameter is missing, a value of 1 is used.

contrast() [контраст]

Adjusts the contrast of the input. A value of 0% will create an image that is completely black. A value of 100% leaves the input unchanged. Values of amount over 100% are allowed, providing results with less contrast. If the ‘amount’ parameter is missing, a value of 1 is used.

drop-shadow() [тень]

Applies a drop shadow effect to the input image. A drop shadow is effectively a blurred, offset version of the input image’s alpha mask drawn in a particular color, composited below the image. The function accepts a parameter of type (defined in CSS3 Backgrounds), with the exception that the ‘inset’ keyword is not allowed. This function is similar to the more established box-shadow property; the difference is that with filters, some browsers provide hardware acceleration for better performance. The parameters of the parameter are as follows.

grayscale() [оттенки серого]

Converts the input image to grayscale. The value of ‘amount’ defines the proportion of the conversion. A value of 100% is completely grayscale. A value of 0% leaves the input unchanged. Values between 0% and 100% are linear multipliers on the effect. If the ‘amount’ parameter is missing, a value of 0 is used.

hue-rotate() [изменение оттенка]

Applies a hue rotation on the input image. The value of ‘ angle ’ defines the number of degrees around the color circle the input samples will be adjusted. A value of 0deg leaves the input unchanged. If the ‘ angle ’ parameter is missing, a value of 0deg is used. Though there is no maximum value, the effect of values above 360deg wraps around.

invert() [инвертирование]

Inverts the samples in the input image. The value of ‘ amount ’ defines the proportion of the conversion. A value of 100% is completely inverted. A value of 0% leaves the input unchanged. Values between 0% and 100% are linear multipliers on the effect. If the ‘ amount ’ parameter is missing, a value of 0 is used.

opacity() [непрозрачность]

Applies transparency to the samples in the input image. The value of ‘ amount ’ defines the proportion of the conversion. A value of 0% is completely transparent. A value of 100% leaves the input unchanged. Values between 0% and 100% are linear multipliers on the effect. This is equivalent to multiplying the input image samples by amount. If the ‘ amount ’ parameter is missing, a value of 1 is used. This function is similar to the more established opacity property; the difference is that with filters, some browsers provide hardware acceleration for better performance.

saturate() [насыщенность]

Saturates the input image. The value of ‘ amount ’ defines the proportion of the conversion. A value of 0% is completely un-saturated. A value of 100% leaves the input unchanged. Other values are linear multipliers on the effect. Values of amount over 100% are allowed, providing super-saturated results. If the ‘ amount ’ parameter is missing, a value of 1 is used.

sepia() [сепия]

Converts the input image to sepia. The value of ‘ amount ’ defines the proportion of the conversion. A value of 100% is completely sepia. A value of 0% leaves the input unchanged. Values between 0% and 100% are linear multipliers on the effect. If the ‘ amount ’ parameter is missing, a value of 0 is used.

Комбинирование функций

You may combine any number of functions to manipulate the rendering. The following example enhances the contrast and brightness of the image.

Источник

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

Введение

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

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

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

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

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

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

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

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

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

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

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

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

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

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

и тогда все содержимое внутри всех элементов

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

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

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

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

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

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

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

grayscale(amount)

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

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

sepia(amount)

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

saturate(amount)

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

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

hue-rotate(angle)

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

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

invert(amount)

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

opacity(amount)

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

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

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

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

brightness(amount)

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

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

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

contrast(amount)

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

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

blur(radius)

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

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

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

drop-shadow(shadow)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник