Как сделать размытие css

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

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

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

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

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

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

Решение

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

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

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

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

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

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

Как сделать размытие css

Если вы нажмете кнопку "Сохранить", ваш код будет сохранен и вы получите URL, с который вы можете поделиться с другими.

Нажав кнопку "Сохранить", вы соглашаетесь с нашим правила и условия.

Все коды в общих файлах предоставляется пользователями и принадлежат объявлениям.

Все общие файлы становятся общедоступными. Лицензия не применяется.

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

schoolsw3.com не несет ответственности за любые утраты или повреждения любого рода во время использования предоставленного кода.

Не удалось сохранить код

В коде слишком много символов.

Ваш код был сохранен

Файл был сохранен в:

Сохранить на Google диске

Если у вас есть аккаунт Google, вы можете сохранить этот код на Google диске.

Кроссбраузерный эффект размытия(blur) изображения в css

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

Посмотреть и скачать демо пример вы можете перейдя по ссылкам ниже.

Обзор

Проголосуйте за урок
Оценка

Итог : Уважаемые читатели! Если вам понравилась статья не поленитесь проголосовать и оставить комментарий, ведь так я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!

7 комментариев

Естественно первым делом кинулся проверять кроссбраузерность метода в IE, и, как всегда, облом. Не работает метод в Эксплорере, почему? А так хотелось&#8230;.

В IE9 фильтр работает, за более ранние версии ничего сказать не могу&#8230; В IE отвечающий за размытие параметр &#8212; filter: progid:DXImageTransform.Microsoft.Blur(parameters);
Тут можно более подробно почитать за Blur Filter в Internet Explorer.

Да, в статье все красиво написано, у Вас в примере все правильно написано, но в IE 10 (Win 8 x64) пример, однако, не работает.
Вот скриншот
http://i072.radikal.ru/1411/82/d9cd02cc5e98.jpg
Я не вредничаю, а только лишь хочу добиться кроссбраузерности, так как эффект достоен внимания и хочется его использовать.

И точно, в IE9 работало лишь потому, что в IE10 уже фильтры DX больше не поддерживаются.
Пришлось чуток поморочить голову, но не зря. Решение для достижения эффекта размытия в IE10 нашел в использовании SVG фильтров.
Демо пример (скрин не прилагаю) &#8212; http://jsfiddle.net/s9ek8bf6/
Возможно Вам будет интересно глянуть и на такое решение, ну и возможно поможет в дальнейшем еще и такой пример.
Спасибо за комментарии и замечания, этот момент действительно достоин внимания.

&#128578; Действительно работает. Данная картинка, я так понял, обернута в svg. Вот только как теперь к данным элементам можно променять эффект hover?

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *