Размытие png. Продвинутые CSS фильтры

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-

filter
blur()	Значение задается в единицах длины, например px , em . Применяет размытие по Гауссу к исходному изображению. Чем больше значение радиуса, тем больше размытие. Если значение радиуса не задано, по умолчанию берется 0 . Синтаксис filter: blur(3px);
brightness()	Значение задается в % или в десятичных дробях. Изменяет яркость изображения. Чем больше значение, тем ярче изображение. Значение по умолчанию 1 . Синтаксис filter: brightness(50%); filter: brightness(.5);
contrast()	Значение задается в % или в десятичных дробях. Регулирует контрастность изображения, т.е. разницу между самыми темными и самыми светлыми участками изображения/фона. Значение по умолчанию 100% . Нулевое значение скроет исходное изображение под темно-серым фоном. Значения, увеличивающиеся от 0 до 100% или от 0 до 1 , будут постепенно открывать исходное изображение до оригинального отображения, а значения свыше будут увеличивать контраст между светлыми и темными участками. Синтаксис filter: contrast(20%); filter: contrast(.2);
drop-shadow()	Фильтр действует подобно свойствам box-shadow и text-shadow . Использует следующие значения: смещение по оси Х смещение по оси Y размытость растяжение цвет тени. Отличительная особенность фильтра заключается в том, что тень добавляется к элементам и его содержимому с учетом их прозрачности, т.е. если элемент содержит текст внутри, то фильтр добавит тень одновременно для текста и видимых границ блока. В отличие от других фильтров, для этого фильтра обязательно задание параметров (минимальное - величина смещения). Синтаксис filter: drop-shadow(2px 3px 5px black);
grayscale()	Извлекает все цвета из картинки, делая на выходе черно-белое изображение. Значение задается в % или десятичных дробях. Чем больше значение, тем сильнее эффект. Синтаксис filter: grayscale(.5); filter: grayscale(50%);
hue-rotate()	Меняет цвета изображения в зависимости от заданного угла поворота в цветовом круге. Значение задается в градусах от 0deg до 360deg . 0deg - значение по умолчанию, означает отсутствие эффекта. Синтаксис filter: hue-rotate(180deg);
invert()	Фильтр делает негатив изображения. Значение задается в % . 0% не применяет фильтр, 100% полностью преобразует цвета. Синтаксис filter: invert(100%);
opacity()	Фильтр работает аналогично со свойством opacity , добавляя прозрачность элементу. Отличительная особенность - браузеры обеспечивают аппаратное ускорение для фильтра, что позволяет повысить производительность. Дополнительный бонус - фильтр можно одновременно сочетать с другими фильтрами, создавая при этом интересные эффекты. Значение задается только в % , 0% делает элемент полностью прозрачным, а 100% не оказывает никакого эффекта. Синтаксис filter: opacity(30%);
saturate()	Управляет насыщенностью цветов, работая по принципу контрастного фильтра. Значение 0% убирает цветность, а 100% не оказывает никакого эффекта. Значения от 0% до 100% уменьшают насыщенность цвета, выше 100% - увеличивают насыщенность цвета. Значение может задаваться как в % , так и целым числом, 1 эквивалентно 100% . Синтаксис filter: saturate(300%);
sepia()	Эффект, имитирующий старину и «ретро». Значение 0% не изменяет внешний вид элемента, а 100% полностью воспроизводит эффект сепии. Синтаксис filter: sepia(150%);
url()	Функция принимает расположение внешнего XML-файла с svg-фильтром, или якорь к фильтру, находящемся в текущем документе. Синтаксис filter: url(#filterId); /* если фильтр находится в этом документе */ filter: url(filter.svg#filterId); /* если фильтр с id="filterId" находится в файле filter.svg*/
none	Значение по умолчанию. Означает отсутствие эффекта.
initial	Устанавливает это свойство в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

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

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

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

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 { background-color: rgba(255,255,255,.6); backdrop-filter: blur(5px) }
Каждый элемент за header`ом размыт на 5px. Это так просто.

filter()

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

Element { background: filter(url(path/to/img.jpg), blur(5px)); }
В результате, теперь можно применять фильтры для изображений, перед использование в качестве фона. Вы можете подумать, что она - вариация background-filter (или background-opacity, background-blur), но она намного мощнее.

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

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

Несколько вещей, которые надо знать:

• есть баг с background-size
• функцию можно анимировать
• функция требует префиксi: -webkit-filter()

Стоит отметить, что backdrop-filter и filter() можно легко анимировать с CSS transitions или анимацией, или с помощью JavaScript.

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

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

По своему действию blur CSS очень похож на фильтр «Размытие по Гауссу ». Теперь мы можем достичь такого же эффекта на веб-страницах.

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

Обратите внимание на IE 9 +

Когда в Microsoft решили довести Internet Explorer до современных веб-стандартов, это привело к потере многих собственных CSS значений , включая фильтры DX , которые поддерживались в этом браузере, начиная с IE 5.5 . К сожалению, их нельзя было заменить альтернативными из CSS3 , что поставило IE9 , 10 и 11 в безвыходное положение. На момент написания этой статьи разработчики, которым нужны изображения с точно таким же эффектов размытием, используют в качестве кроссбраузерного решения скрипт StackBlur , работающий на основе canvas .

Код HTML:

Затем эффект размытия, примененный через класс:

img.blur { width:367; height:459px; -webkit-filter: blur(3px); filter: blur(3px); }

SVG фильтр размытия

На данный момент CSS blur background работает в Google Chrome , Safari (мобильной и настольной версиях ) и Firefox 35+ . Для получения поддержки более ранних версий Firefox , нужно применить фильтр SVG :

Сохраните файл под названием blur.svg , а CSS замените на:

img.blur { width:367; height:459px; filter: url(blur.svg#blur); -webkit-filter: blur(3px); filter: blur(3px); }

Поддержка старых версий IE

Для получения такого же эффекта в IE 4 — 9 , нужно использовать старый фильтр DX от Microsoft . Наш класс будет выглядеть следующим образом:

img.blur { width:367; height:459px; filter: url(blur.svg#blur); -webkit-filter: blur(3px); filter: blur(3px); filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius="3"); }

Выключение эффекта

Если хотите сфокусировать изображение, нужно при следующем вызове CSS filter blur установить для него значение none. В данном случае я изменяю поведение фильтра при наведении курсора мыши через :hover :

img.blur:focus, img.blur:hover { -webkit-filter: blur(0px); filter: blur(0px); filter: none; filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius="0"); }

При наведении курсора в браузере (кроме IE ) вы увидите, что размытое изображение постепенно становится резче благодаря CSS-переходу .

Обрезка краев изображения

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

1. Если у вас изображение, у которого все края одного цвета, можно установить цвет фона (background-color ) в или элемент-контейнер такого же цвета;
2. Используйте свойство clip , чтобы обрезать края изображения. Clip всегда указывается в следующем порядке.

clip: rect(top, offset of right clip from left side, offset of bottom from top, left)

Для изображения, размером 367 пикселей в ширину, 459 пикселей в высоту и эффект blur CSS 2 пикселя, Clip будет «сформулирован » так:

clip: rect(2px,365px,457px,2px);

Обратите внимание, что Clip применяется только к элементам, имеющим position: absolute . Если нужно получить поддержку в IE8 и более ранних версиях, не забудьте убрать px на конце значений.

Оберните изображение в элемент-контейнер (например