От автора: мне нравятся эти маленькие посты, где какой-то хитроумный дизайн решается одной строкой CSS с использованием малоизвестного свойства. В этом случае дизайн представляет собой эффект матового стекла, а свойство CSS — backdrop-filter.
Подход? Очень простой:
.container { backdrop-filter: blur(10px);
}
Комментарии также стоит изучить, потому что они касаются поддержки браузерами. Покрытие на самом деле довольно хорошее. Caniuse показывает 83% глобального охвата без поддержки Firefox (и, как ожидается, Internet Explorer). Один комментатор предложил хороший запасной вариант, вместе с небольшим изменением, которое ослабляет эффект:
.container { background: rgba(0,0,0,0.8); backdrop-filter: saturate(180%) blur(10px);
}
Отлично. Но мы можем продвинуться немного дальше, введя @supports, как показано в нашей статье в Альманахе о background-filter:
.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
Источник: https://css-tricks.com
Редакция: Команда webformyself.
