Как размыть фон на css

Как размыть фон на css

Проблема

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

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

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

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

как размыть фон на css

 

Решение

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

Для этого идеально подойдет элемент  <main>, так как он имеет двойное предназначение: отмечает собой основное содержимое страницы (диалоговые окна к основному содержимому обычно не относятся) и дает нам крючок, на который мы сможем навесить нужные стили. Разметка будет выглядеть приблизительно так:
HTML
<main>Bacon Ipsum dolor sit amet…</main>
<dialog>
O HAI, I’m a dialog. Click on me to dismiss.
</dialog>
<!— любые другие диалоговые окна —>

Читайте также  Интерактивное сравнение изображений

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

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

 

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

 

ПОПРОБУЙТЕ САМИ!

http://play.csssecrets.io/deemphasizing-blur

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Поделиться
(Visited 1 329 times, 1 visits today)

Об авторе

admin administrator

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: