Вы здесь: Главная » CSS » Создание эффекта размытого стекла в CSS

Создание эффекта размытого стекла в CSS

Эффект размытого стекла украшает собой дизайн вашей страницы. В этой статье вы найдете 2 способа создать эффект стекла с помощью CSS.

Способ 1. CSS для старых и новых браузеров

Первый способ имеет довольно широкую поддержку браузера, но для него требуется больше CSS, чем для второго подхода, который мы рассмотрим ниже.

Для начала установим фиксированный фон для body, чтоб эффект стекла был виден на фоне изображения.

CSS cвойства для <body> предусматривают центрирование элемента внутри него:

Теперь добавим div с классом .container, который и станет нашей панелью из матового стекла. Для него запишем свойство background: inherit; для того, чтобы картинка была такой же. Сам контейнер меньше, чем размер <body>, но фоновое изображение и все свойства для фона унаследованы от <body>:

Теперь нужно добавить псевдоэлемент ::before для  .container - это как раз то, что даст нам размытое стекло. Его свойства связаны с абсолютным позиционированием и координатами со значением 0, чтобы растянуть этот псевдоэлемент на весь родительский контейнер:

Цвет мы задаем, используя тень (свойство 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.0

Способ 2. Современный подход к созданию эффекта стекла

Теперь об альтернативном способе размытия стекла, который использует немного меньше стилей CSS-фильтра фона, но также имеет меньшую поддержку браузера.

Мы используем ту же разметку: элемент .container внутри body с тем же фоновым изображением, но фиксировать его уже не обязательно.

Для контейнера нужно записать CSS-свойство, называемое backdrop-filter. Для некоторых браузеров на платформе Chrome понадобится еще указание свойства с префиксом: -webkit-backdrop-filter: blur(3px).

Все остальные стили для.container определяют его размеры. Нам важен цвет фона - выбираем для примера полупрозрачный белый (свойство background-color: rgba(255, 255, 255, .15)):

Результат css-свойств 2 способа вы увидите ниже.

See the Pen
How to Create a Frosted Glass Effect in CSS - Method 2
by Envato Tuts+ (@tutsplus)
on CodePen.0

Вот и все! Поиграйте со значением blur(), чтобы получить желаемый эффект, но больше ничего не нужно.

Генератор для создания эффекта

На сайте css.glass вы можете настроить несколько параметров для вашего эффекта стекла и скопировать полученный код.

В заключение

Если вам нужен эффект размытого стекла, который можно использовать на веб-странице, то эти два метода - отличное выбор.

Недостатком использования второго из этих способов является недостаточная на данный момент поддержка браузерами. Прямо сейчас вы можете ожидать поддержки фонового фильтра css в Chrome, Edge и Safari и самых последних версиях Mozilla Firefox. Однако, web не стоит на месте, так что в дальнейшем это изменится.

Пробуйте - эффект размытого стекла может быть очень хорошим способом улучшения пользовательского интерфейса для браузеров, которые его поддерживают.

На основе статьи "Два способа создания эффекта матового стекла CSS"

Автор: Админ

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

Ваш адрес email не будет опубликован.