Css размытые края. Поддержка старых версий IE. SVG фильтр размытия
Проблема
В статье «Как сделать эффект лайтбокса » мы познакомились со способом отвлечения внимания от фрагментов веб-приложения посредством их затемнения с помощью полупрозрачной черной подложки. Но если страница содержит большое количество деталей, то затемнять ее приходится очень сильно, для того чтобы обеспечить достаточный контраст с отображающимся поверх текстом или привлечь внимание к световому коробу или другому элементу.
Более элегантный способ, заключается в том, что мы размываем все остальное, за исключением подсвеченного элемента, в дополнение к затемнению или вместо него. Кроме того, это создает более реалистичный эффект глубины, имитируя то, как наше зрение воспринимает объекты, находящиеся физически ближе к нам, когда мы на них фокусируемся. Однако реализовать этот эффект куда сложнее.
До появления спецификации Filter Effects это было вообще невозможно, и даже с использованием фильтра blur() задача остается непростой. К чему привязывать размывающий фильтр? Или мы должны применить его ко всему, за исключением определенного элемента? Если мы применим его к элементу
, то будет размыто все содержимое страницы, включая элемент, к которому мы хотим привлечь внимание.Ситуация очень похожа на ту, которую мы рассматривали в статье «Эффект матированного стекла» , однако прибегнуть к тому же решению здесь мы не можем, так как позади нашего диалоговогоокна может находиться все что угодно, а не только фоновое изображение. Что же делать?
Решение
К сожалению, для данного эффекта нам потребуется дополнительный элемент HTML: мы должны будем обернуть все содержимое нашей страницы, за исключением элементов, которые не должны размываться, в элемент-обертку, а затем применить размытие к нему.
Для этого идеально подойдет элемент
HTML
O HAI, I’m a dialog. Click on me to dismiss.
На рисунке вы видите, как это выглядит без подложки. Таким образом, нам необходимо применять класс к элементу
main.de-emphasized {
filter: blur(5px);
}
Как подтверждает рисунок ниже, это уже огромный шаг вперед. Однако сейчас размытие применяется немедленно, что выглядит не слишком естественно и ухудшает впечатление пользователя от взаимодействия со страницей. Поскольку фильтры CSS поддерживают анимацию, мы можем заставить размытие страницы проявляться плавно и постепенно:
main {
transition: .6s filter;
}
main.de-emphasized {
filter: blur(5px);
}
Часто бывает полезно комбинировать два эффекта снижения значимости (затемнение и размытие).
Один из способов сделать это - использовать фильтры brightness() и/или contrast() :
main.de-emphasized {
filter: blur(3px) contrast(.8)
brightness(.8);
}
Результат вы видите на рисунке. Затемнение посредством фильтров CSS означает, что если они не поддерживаются, то никакое резервное решение не применяется. Возможно, затемнение лучше воплощать с помощью какого-нибудь другого метода, который также может служить резервным решением (например, используя свойство box-shadow , как мы делали в предыдущем секрете). Это также избавит нас от «эффекта сияния», который можно наблюдать по краям на рисунке.
По своему действию 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 действует и за пределами границ элемента, размывая края изображения с его окружением. Если нужно, чтобы изображение было размыто только внутри, для этого есть несколько возможных методов:
- Если у вас изображение, у которого все края одного цвета, можно установить цвет фона (background-color ) в или элемент-контейнер такого же цвета;
- Используйте свойство 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 на конце значений.
Оберните изображение в элемент-контейнер (например
Размытый текст
Этот фильтр можете пока использовать и для размытия текста.
Перевод статьи “Cross-browser Image Blur with 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 | Наследует значение свойства от родительского элемента. |
Привет друзья, сегодня у меня для вас действительно БОЛЬШОЙ урок, целых 27 минут. Но в нём мы будем рассматривать ну просто очень, очень, очень интересное свойство, которое позволит Вам задавать различные спецэффекты для изображений, не лазя в программу Photoshop и другие редакторы.
Filter – это свойство в CSS3, которое может видоизменять ваши картинки. Накладывать размытость, увеличивать контраст и яркость, добавлять тень, менять цвета и многое, многое другое.
Всего у Filter есть 10 значений, которые позволяют вытворять «всякую интересную всячину» с элементами сайта. Предлагаю теперь, разобрать все эти 10 значений на практике в видеоуроке ниже.
Видео Filter CSS 3 – фильтры изображений:
Пример страницы, которую мы создаём в уроке:
Скачать файл-заготовку можно по .
Внимание! Свойство filters сейчас на стадии тестирования и поддерживается только браузером Firefox полностью. А браузером Chrome и другими на основе движка Webkit, это свойство работает только при добавлении префиксов. Префиксы я показываю в конце урока, поэтому рекомендую его сначала проходить на Firefox последней версии.
Кому лень смотреть видео, можете посмотреть подробную инструкцию ниже со всеми правилами фильтров.
10 эффектов фильтров в CSS3
Обращаю внимание, что все эффекты на картинках ниже, реализованы только при помощи CSS3, поэтому в старых браузерах они видны не будут!!!
1. Фильтр размытие - blur
Если говорить простым языком, то это обычное размытие картинки. Фильтр подойдет, если вам нужно сделать края более мягкими. За счет размытия создается ощущение фона, который не в фокусе.
Давайте попробуем применить наш фильтр на лисичке, прописав вот такой код:
Слева, для наглядности, я поставил обычную картинку, а вот справа то же самое изображение, только изменённое при помощи CSS3.
Фильтр со значением blur указывается именно в пикселях. Причем, чем больше это значение, тем больше проявляется размытость картинки.
Фильтр яркость - brightness
Этот фильтр напоминает изменение яркости экрана телевизора. В данном случае регулируется цвет между черным и оригинальным цветом по мере добавления параметров.
А вот и наш подопытный конь:
Регулировать вы можете от 0% и более. При 0% изображение будет черным, при 100% - оригинальным, а при 200% - станет ярче в два раза. Это очень хороший эффект, особенно для темных изображений.
Фильтр brightness может задаваться 3 способами:
- целые числа
- дробные числа
- проценты
Причем ограничений в принципе нет. В примере мы поставили значение 2 и увеличили яркость нашей картинки на 2 раза или на 200%.
3. Фильтр контрастность - contrast
Этот фильтр позволит вам повысить контраст картинки, регулируя разницу между светлыми и темным тонами изображения. Здесь значения также задаются тремя способами: целые числа, дробные числа и проценты. Таким образом, 100% - это значение по умолчанию. 0% - черное изображение. А все, что больше 100%, добавляет вам контраст.
На этот раз будем издеваться над котом. Добавим ему на +50% контрастности:
Вот результат:
Как видите, теперь мы даже можем не пользоваться Photoshop для создания контраста и размытия. Вот прямо в CSS берём и изменяум изображения, как нашей душе угодно.
4. Фильтр насыщенность - saturate
Это очень классный эффект, который сделает ваши изображения более яркими и насыщенными. Значения указываем в трех вариантах: целые и дробные числа, а также, проценты. Укажем значение - 200%. Повысим насыщенность нашей картиночки в 2 раза.
Море стало заметно приятнее:
Посмотрите, насколько сочное получилось изображение. По, моему очень классный эффект! Поедем??
5. Фильтр прозрачность - opacity
Устанавливает прозрачность. На значения данного фильтра вводятся определенные ограничения:
- проценты: от 0% до 100
Давайте попробуем уменьшить прозрачность на 50% следующей картинке.
Посмотрите, что вышло:
6. Фильтр Инверсия - invert
Он позволяет вам "переворачивать" цвета. На значения данного фильтра также вводятся ограничения:
- целые и дробные числа: от 0 до 1
- проценты: от 0% до 100
В нашем случае установим максимальное значение - 100 %:
И красивая спортивная машина лёгким движением руки превращается в...
Этот фильтр помог нам создать эффект негатива на самом изображении.
7. Фильтр cепия - sepia
Он позволит вам изменить цвет, добавив оттенок сепия. То есть вы получите имитацию старой фотографии. На значения фильтра ограничения указываются те же самые, что и в двух предыдущих.
- целые и дробные числа: от 0 до 1
- проценты: от 0% до 100
Ну что? Попробуемс?
Трах-тибидох! Лёгким мановением руки мы состарим это фото на пару десятков лет Кажется, у меня крыша потекла с этими примерами.
В нашем случае мы указали дробное значение - 0,5. Но вы можете экспериментировать, как вашей душе угодно!
8. Фильтр оттенки серого - grayscale
Данный фильтр позволяет нам превращать цвета в оттенки серого. На значения фильтра также наложены ограничения:
- целые и дробные числа: от 0 до 1
- проценты: от 0% до 100
Таким образом, при 100% все изображение будет с оттенками серого, а при 0% останется неизменным. 0 приравнивается к 0%, а 1,0 - к 100%.
Зададим значение - 0.7 (или 70%):
Я не смог коротко перевести на русский 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()
Я с нетерпением жду, когда в браузерах введут эти фичи. SVG тоже может это делать, но такие же крутые эфекты можно легко сделать с CSS. С прошлого года, много споров вокруг CSS были сфокусированы на архитектуре, методологии, инструментах. Хорошо помнить о том, что CSS так же и о графическом дизайне (вместе с SVG).
OK, сейчас поддержка минимальна, но это станет возможным на миллионах iPhone`ов и iPad`ов до конца года.
