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

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

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

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

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

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

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Зарегистрироваться

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

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

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

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

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

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

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

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

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

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

Автор: Robin Rendle

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

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

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Зарегистрироваться

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

Метки:

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

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

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

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