Контакты

Как размыть фон на css. Продвинутые CSS фильтры

  • 18.06.2019

По своему действию 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 на конце значений.

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

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

Размытый текст

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

Перевод статьи “Cross-browser Image Blur with CSS ” был подготовлен дружной командой проекта

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

Каждый из нас хотя бы раз имел возможность наблюдать эффект размытия на странице. Зачастую для его создания используется jQuery-библиотека bjurjs . Однако, не на всех сайтах целесообразно использовать jQuery, да и технологии не стоят на месте: теперь мы можем воспользоваться решением на чистом CSS. Попробуем?

Пример простейшей разметки:

Blur

Welcome to our website!

Итак, задан родительский div с классом wrapper , служащий контейнером для двух вложенных div’ов: inner-wrapper будет содержать текст приветствия, а blur - изображение, к которому нужно применить эффект размытия.

Обратимся к стилям.

Wrapper { position : relative ; width : 500px ; height : 500px ; margin : 0 auto ; } .inner-wrapper , .blur { position : absolute ; width : 500px ; height : 300px ; left : 0 ; top : 0 ; bottom : 0 ; right : 0 ; }

Как можно видеть, дочерние блоки абсолютно позиционированы и находятся на одном уровне. Дело в том, что эффект размытия будет применяться и к тексту приветствия, чего нам хотелось бы избежать. Поэтому лучше управлять положением блоков относительно друг друга при помощи z-index . Сделаем это, а также зададим необходимый бэкгрануд для.blur:

Inner-wrapper { z-index : 100 ; color : #fff ; text-align : center ; text-shadow : 0 0 5px rgba (0 , 0 , 0 , .5 ); } .blur { z-index : 99 ; background-image : url(image.png) ; background-size : cover ; background-repeat : no-repeat ; }

На данный момент получаем простейшую страничку с картинкой и текстом:

Настало время применить магию! Увы, firefox пока не поддерживает css-фильтры, поэтому в дело пойдёт небольшой трюк: нужно «скормить» ему svg-файл со следующим содержимым:

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

Inner-wrapper { z-index : 100 ; /* текст не размыт */ color : #fff ; text-align : center ; text-shadow : 0 0 5px rgba (0 , 0 , 0 , .5 ); } .blur { z-index : 99 ; /* изображение размыто */ background-image : url(image.png) ; background-size : cover ; background-repeat : no-repeat ; -webkit-filter : blur (5px ); -moz-filter : blur (5px ); filter : blur (5px ); filter : url("blur.svg#blur") ; /* путь к svg */ }

А вот и итоговый вариант с применением эффекта размытия:

Единственный недостаток: нечёткие границы размытия, которые выходят за пределы родительского элемента. Часто такой побочный эффект может быть нежелательным. Ну, что ж, можно поиграть с радиусом размытия или применить overflow: hidden .

Я не смог коротко перевести на русский 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`ов до конца года.

Этот ответ предназначен для макета горизонтальной карты Material Design с динамической высотой и изображением.

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

объяснение

Код

Wrapper { display: flex; width: 100%; border: 1px solid rgba(0, 0, 0, 0.16); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.16), 0 1px 1px rgba(0, 0, 0, 0.23); background-color: #fff; margin: 1rem auto; height: auto; } .wrapper:hover { box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); } .link { display: block; width: 200px; height: auto; overflow: hidden; position: relative; border-right: 2px solid #ddd; } .blur { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 100%; height: 100%; filter: blur(5px); -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); } .pic { width: calc(100% - 20px); max-width: 100%; height: auto; margin: auto; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; } .pic:hover { transition: all 0.2s ease-out; transform: scale(1.1); text-decoration: none; border: none; } .content { display: flex; flex-direction: column; width: 100%; max-width: 100%; padding: 20px; overflow-x: hidden; } .text { margin: 0; }

Agendum dicendo memores du gi ad. Perciperem occasionem ei ac im ac designabam. Ista rom sibi vul apud tam. Notaverim to extendere expendere concilium ab. Aliae cogor tales fas modus parum sap nullo. Voluntate ingressus infirmari ex mentemque ac manifeste eo. Ac gnum ei utor sive se. Nec curant contra seriem amisit res gaudet adsunt.

2018-12-04T00:00Z

На вкладке.content в CSS измените ее на position:absolute . В противном случае отображаемая страница не будет прокручиваться.

2018-12-11T00:00Z

Пожалуйста, проверьте приведенный ниже код:

BackgroundImageCVR{ position:relative; padding:15px; } .background-image{ position:absolute; left:0; right:0; top:0; bottom:0; background:url("http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg"); background-size:cover; z-index:1; -webkit-filter: blur(10px); -moz-filter: blur(10px); -o-filter: blur(10px); -ms-filter: blur(10px); filter: blur(10px); } .content{ position:relative; z-index:2; color:#fff; }

2018-12-18T00:00Z

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

Вы также можете использовать backdrop-filter

Существует поддерживаемое свойство, называемое backdrop-filter , которое в настоящее время поддерживается в Edge , Safari и iOS Safari (см. caniuse.com для статистики).

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

Вы бы использовали его так:

Box { -webkit-backdrop-filter: blur(5px); // Use for Safari 9+, Edge 17+ (not a mistake) and iOS Safari 9.2+ backdrop-filter: blur(5px); // No one supports non prefixed yet }

2018-12-25T00:00Z

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

В примере я создал два контейнера: .background-image и.content .

Оба они размещены с position: fixed и left: 0; right: 0; left: 0; right: 0; , Разница в их отображении происходит из значений z-index которые были установлены по-разному для элементов.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam erat in ante malesuada, facilisis semper nulla semper. Phasellus sapien neque, faucibus in malesuada quis, lacinia et libero. Sed sed turpis tellus. Etiam ac aliquam tortor, eleifend rhoncus metus. Ut turpis massa, sollicitudin sit amet molestie a, posuere sit amet nisl. Mauris tincidunt cursus posuere. Nam commodo libero quis lacus sodales, nec feugiat ante posuere. Donec pulvinar auctor commodo. Donec egestas diam ut mi adipiscing, quis lacinia mauris condimentum. Quisque quis odio venenatis, venenatis nisi a, vehicula ipsum. Etiam at nisl eu felis vulputate porta.

Fusce ut placerat eros. Aliquam consequat in augue sed convallis. Donec orci urna, tincidunt vel dui at, elementum semper dolor. Donec tincidunt risus sed magna dictum, quis luctus metus volutpat. Donec accumsan et nunc vulputate accumsan. Vestibulum tempor, erat in mattis fringilla, elit urna ornare nunc, vel pretium elit sem quis orci. Vivamus condimentum dictum tempor. Nam at est ante. Sed lobortis et lorem in sagittis. In suscipit in est et vehicula.

Проблема

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

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

До появления спецификации Filter Effects это было вообще невозможно, и даже с использованием фильтра blur() задача остается непростой. К чему привязывать размывающий фильтр? Или мы должны применить его ко всему, за исключением определенного элемента? Если мы применим его к элементу , то будет размыто все содержимое страницы, включая элемент, к которому мы хотим привлечь внимание.

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

Решение

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

Для этого идеально подойдет элемент

, так как он имеет двойное предназначение: отмечает собой основное содержимое страницы (диалоговые окна к основному содержимому обычно не относятся) и дает нам крючок, на который мы сможем навесить нужные стили. Разметка будет выглядеть приблизительно так:
HTML
Bacon Ipsum dolor sit amet…

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 , как мы делали в предыдущем секрете). Это также избавит нас от «эффекта сияния», который можно наблюдать по краям на рисунке.




Статьи по теме

Последние статьи
Популярные статьи
Выбор редакции
rzdoro.ru