Эффект размытого стекла украшает собой дизайн вашей страницы. В этой статье вы найдете 2 способа создать эффект стекла с помощью CSS.
Способ 1. CSS для старых и новых браузеров
Первый способ имеет довольно широкую поддержку браузера, но для него требуется больше CSS, чем для второго подхода, который мы рассмотрим ниже.
Для начала установим фиксированный фон для body, чтоб эффект стекла был виден на фоне изображения.
CSS cвойства для <body> предусматривают центрирование элемента внутри него:
| 1 2 3 4 5 6 7 8 9 | body { background: url(images/somephoto.jpg) no-repeat; background-attachment: fixed; background-size: cover; display: grid; align-items: center; justify-content: center; height: 100vh; } |
Теперь добавим div с классом .container, который и станет нашей панелью из матового стекла. Для него запишем свойство background: inherit; для того, чтобы картинка была такой же. Сам контейнер меньше, чем размер <body>, но фоновое изображение и все свойства для фона унаследованы от <body>:
| 1 2 3 4 5 6 7 8 9 10 | .container { width: 30rem; height: 20rem; box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .2); border-radius: 5px; position: relative; z-index: 1; background: inherit; overflow: hidden; } |
Теперь нужно добавить псевдоэлемент ::before для .container - это как раз то, что даст нам размытое стекло. Его свойства связаны с абсолютным позиционированием и координатами со значением 0, чтобы растянуть этот псевдоэлемент на весь родительский контейнер:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | .container::before { content: ""; position: absolute; /*наследуем изображение*/ background: inherit; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; margin: -20px; /*размываем элемент*/ box-shadow: inset 0 0 2000px rgba(255, 255, 255, .5); filter: blur(10px); } |
Цвет мы задаем, используя тень (свойство box-shadow) с очень большим размытием, а затем с помощью фильтра (filter: blur(10px)) размываем еще наше стекло. Кроме того, важно, чтоб наш псевдоэлемент ::before также унаследовал фоновое изображение от родителя-контейнера (свойство background: inherit).
Результат можно посмотреть ниже.
See the Pen How to Create a Frosted Glass Effect in CSS - Method 1 by Envato Tuts+ (@tutsplus) on CodePen.
Способ 2. Современный подход к созданию эффекта стекла
Теперь об альтернативном способе размытия стекла, который использует немного меньше стилей CSS-фильтра фона, но также имеет меньшую поддержку браузера.
Мы используем ту же разметку: элемент .container внутри body с тем же фоновым изображением, но фиксировать его уже не обязательно.
| 1 2 3 4 5 6 7 8 | body { background: url(images/somephoto.jpg) no-repeat; background-size: cover; display: grid; align-items: center; justify-content: center; height: 100vh; } |
Для контейнера нужно записать CSS-свойство, называемое backdrop-filter. Для некоторых браузеров на платформе Chrome понадобится еще указание свойства с префиксом: -webkit-backdrop-filter: blur(3px).
Все остальные стили для.container определяют его размеры. Нам важен цвет фона - выбираем для примера полупрозрачный белый (свойство background-color: rgba(255, 255, 255, .15)):
| 1 2 3 4 5 6 7 8 9 10 | .container { width: 30rem; height: 20rem; box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .2); border-radius: 5px; background-color: rgba(255, 255, 255, .15); /*размываем элемент*/ -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); } |
Результат css-свойств 2 способа вы увидите ниже.
See the Pen How to Create a Frosted Glass Effect in CSS - Method 2 by Envato Tuts+ (@tutsplus) on CodePen.
Вот и все! Поиграйте со значением blur(), чтобы получить желаемый эффект, но больше ничего не нужно.
Вы также можете прочитать про другие css-фильтры и посмотреть, что еще можно сделать на их основе в примерах.
Генератор для создания эффекта
На сайте css.glass вы можете настроить несколько параметров для вашего эффекта стекла и скопировать полученный код.
В заключение
Если вам нужен эффект размытого стекла, который можно использовать на веб-странице, то эти два метода - отличное выбор.
Недостатком использования второго из этих способов является недостаточная на данный момент поддержка браузерами. Прямо сейчас вы можете ожидать поддержки фонового фильтра css в Chrome, Edge и Safari и самых последних версиях Mozilla Firefox. Однако, web не стоит на месте, так что в дальнейшем это изменится.
Пробуйте - эффект размытого стекла может быть очень хорошим способом улучшения пользовательского интерфейса для браузеров, которые его поддерживают.
Примеры использования эффекта матового стекла
Автор Kyle Wetton
See the Pen CSS - Frosted Glass by Kyle Wetton (@kylewetton) on CodePen.
Автор Jon Kantner
Одна иконка
See the Pen Glass Icon by Jon Kantner (@jkantner) on CodePen.
Несколько иконок + эффект наведения
See the Pen Icons With Glass and Color Tiles by Jon Kantner (@jkantner) on CodePen.
Автор Jhey
See the Pen Glide To Reveal with CSS :has() by Jhey (@jh3y) on CodePen.
Форма авторизации от Daniel
See the Pen Slide Sign In/Sign Up form by Daniel (@dnlzrgz) on CodePen.
На основе статьи "Два способа создания эффекта матового стекла CSS"
