От автора: мне нравятся эти маленькие посты, где какой-то хитроумный дизайн решается одной строкой CSS с использованием малоизвестного свойства. В этом случае дизайн представляет собой эффект матового стекла, а свойство CSS — backdrop-filter.
Подход? Очень простой:
|
1 2 3 |
.container { backdrop-filter: blur(10px); } |
Комментарии также стоит изучить, потому что они касаются поддержки браузерами. Покрытие на самом деле довольно хорошее. Caniuse показывает 83% глобального охвата без поддержки Firefox (и, как ожидается, Internet Explorer). Один комментатор предложил хороший запасной вариант, вместе с небольшим изменением, которое ослабляет эффект:
|
1 2 3 4 |
.container { background: rgba(0,0,0,0.8); backdrop-filter: saturate(180%) blur(10px); } |
Отлично. Но мы можем продвинуться немного дальше, введя @supports, как показано в нашей статье в Альманахе о background-filter:
|
1 2 3 4 5 6 7 8 9 10 |
.container { background: rgba(0,0,0,0.8); } @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) { .container { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } } |
Обратите внимание на -webkit префикс. Все еще стоит использовать его в производстве, хотя это и не проблема, если вы подключены к Autoprefixer. Вот демоверсия из альманаха:
Хорошо, может быть, это не однострочное решение, как казалось. Но эй, это круто, что подобные вещи относительно просты в CSS.
Автор: Geoff Graham
Источник: //css-tricks.com
Редакция: Команда webformyself.
