Эффект фонового фильтра с помощью CSS

Эффект фонового фильтра с помощью CSS

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

Эффект фонового фильтра с помощью CSS

Подход? Очень простой:

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

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

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

Комментарии также стоит изучить, потому что они касаются поддержки браузерами. Покрытие на самом деле довольно хорошее. Caniuse показывает 83% глобального охвата без поддержки Firefox (и, как ожидается, Internet Explorer). Один комментатор предложил хороший запасной вариант, вместе с небольшим изменением, которое ослабляет эффект:

Отлично. Но мы можем продвинуться немного дальше, введя @supports, как показано в нашей статье в Альманахе о background-filter:

Обратите внимание на -webkit префикс. Все еще стоит использовать его в производстве, хотя это и не проблема, если вы подключены к Autoprefixer. Вот демоверсия из альманаха:

Хорошо, может быть, это не однострочное решение, как казалось. Но эй, это круто, что подобные вещи относительно просты в CSS.

Автор: Geoff Graham

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

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

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

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

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

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Метки:

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

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

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