Свойство CSS backdrop-filter

Свойство CSS backdrop-filter

От автора: до вчерашнего дня я никогда не слышал о свойстве backdrop filter CSS, но через пару часов изучения я понял, что это не что иное, как магия. Это связано с тем, что оно добавляет фильтры (например, изменение оттенка, контраста или размытия) для фона элемента не затрагивая текст или другие элементы внутри него.

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

Свойство CSS backdrop-filter

Это всего лишь одна строка CSS для создания этого эффекта фона:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

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

Каждый из этих блоков — это просто отдельный div, для которого я применяю различные фильтры. Вот и все! Я до сих пор не могу поверить, насколько это на самом деле просто. Конечно, вы можете использовать их так:

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

Но подождите, зачем нам это нужно? Ну, изучив свойство немного глубже, вы возможно придете к выводу, что пример по умолчанию неплохо подойдет для модальных окон. Это то, с чем Гильермо Эстевс экспериментировал еще в 2015 году:

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

Обратите внимание на поддержку браузерами

Свойство backdrop-filter не поддерживается на момент написания этой статьи. И даже в Safari, где оно поддерживается, вам все равно понадобится префикс. Firefox не поддерживает его вообще. Но действительно ли веб-сайты должны выглядеть одинаково в каждом браузере?

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

Свойство CSS backdrop-filter

Автор: Robin Rendle

Источник: https://css-tricks.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Курс по CSS3

Прямо сейчас изучите CSS3 с нуля!

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree