Главная » Статьи » Эффект матового стекла в CSS

Эффект матового стекла в CSS

Эффект матового стекла в CSS

От автора: эффект матового стекла, более известный как Glassmorphism, уже давно стал популярной функцией пользовательского интерфейса. Mac OS известна своим эффектом матового стекла, под Windows 10 он также реализован, например, на таких сайтах, как Github.

Сегодня мы рассмотрим два способа получить эффект матового стекла с помощью чистого CSS.

Эффект матового стекла в CSS

Метод первый

Начнем с создания div:

<div class="wrapper"></div>

Теперь мы удалим поля и отступы для всех элементов и зададим нашим html и body высоту 100vh, чтобы они покрывали весь экран.

* { margin: 0; padding: 0; }
body,html { height: 100vh; }

Добавим фоновое изображение:

body { background-image: url("Frosted Glass effect in CSS/assets/background.png"); }

Эффект матового стекла в CSS

Здесь мы видим изображение-мозаику. Чтобы удалить его, мы будем использовать background-size: cover, также мы не хотим, чтобы наше изображение повторялось, поэтому мы будем использовать background-repeat: no-repeat.

body { background-image: url("Frosted Glass effect in CSS/assets/background.png"); background-size: cover; background-repeat: no-repeat; }

Эффект матового стекла в CSS

Теперь давайте стилизуем нашу обертку div. Мы зададим ей высоту и ширину, а также установим для нее значение inherit. Чтобы она выглядела лучше, мы зададим ей границу и радиус границы. Мы также добавим свойство position, чтобы при создании наложения оно не занимало весь экран, а вместо этого помещалось внутри нашей оболочки. В нашем случае я устанавливаю position: absolute.

.wrapper { height: 320px; width: 600px; background: inherit; border-radius: 15px; border: 1px solid rgba(43, 43, 43, 0.568); position: absolute; }

Эффект матового стекла в CSS

Но фон div выглядит не так красиво. Вместо того, чтобы весь фон отображался внутри нашего div, я хочу, чтобы он занимал только ту часть изображения, которая находится за div. Для этого мы передадим свойство background-attachment: fixed нашему body.

body { background-image: url("Frosted Glass effect in CSS/assets/background.png"); background-size: cover; background-repeat: no-repeat; background-attachment: fixed; }

Эффект матового стекла в CSS

Намного лучше. Теперь перейдем к основной части, давайте мы создадим наложение, используя псевдокласс before, чтобы придать нашему div эффект матового стекла.

ЗАМЕТКА

Чтобы псевдокласс работал, нам нужно присвоить ему свойство content. В нашем случае, поскольку нам не нужен какой-либо контент, мы оставим его пустым (content: »).

Он также требует свойства отображения, чтобы определить размер и форму. Для упрощения задачи, мы присвоим псевдоклассу position:absolute, чтобы он поместился внутри своего родительского контейнера (div-обертки).

.wrapper:before { position: absolute; content: ''; background: inherit; left: 0; right: 0; top: 0; bottom: 0; box-shadow: inset 0 0 0 3000px rgba(150, 150, 150, 0.192); filter: blur(10px); border-radius: 15px; }

Мы используем свойство box-shadow для применения сероватого наложения и blur для размытия этого наложения. Также мы присвоим ему радиус границы, аналогичный родительскому, для симметрии.

Эффект матового стекла в CSS

Эффект матового стекла в CSS

Тем не менее, мы все еще можем видеть некоторые не размытые края. Чтобы исправить это, мы сначала сделаем размер нашего наложения немного больше, чем размер оболочки, а затем установим значения left: -25px и top: -25px.

.wrapper:before { position: absolute; content: ''; background: inherit; height: 370px; width: 650px; left: -25px; right: 0; top: -25px; bottom: 0; box-shadow: inset 0 0 0 3000px rgba(150, 150, 150, 0.192); filter: blur(10px); border-radius: 15px; }

Эффект матового стекла в CSS

Наконец, чтобы края были четкими и видимыми, нам нужно установить overflow: hidden для div-оболочки, чтобы часть наложения, выходящая за ее пределы, была скрыта.

.wrapper { height: 320px; width: 600px; background: inherit; border-radius: 15px; border: 1px solid rgba(43, 43, 43, 0.568); position: absolute; overflow: hidden; }

Эффект матового стекла в CSS

На последнем этапе мы будем использовать flexbox для центрирования нашего div в body.

body { background-image: url("Frosted Glass effect in CSS/assets/background.png"); background-size: cover; background-repeat: no-repeat; background-attachment: fixed; display: flex; justify-content: center; align-items: center; }

Эффект матового стекла в CSS

Наша открытка с эффектом матового стекла готова. Но есть еще одна проблема, на которую нам нужно обратить внимание. Если мы попытаемся написать что-то внутри нашей оболочки div, это окажется за псевдоэлементом и не будет отображаться. Чтобы решить эту проблему, нам нужно будет создать еще один div внутри нашего, в который мы будем помещать контент. Затем мы должны установить абсолютную позицию этого div с содержимым.

<div class="wrapper"> <div class=content> <h1>Frosted Glass Effect</h1> </div> </div>

.content{ position: absolute; }

Эффект матового стекла в CSS

Вот оно. Наша открытка с эффектом матового стекла готова!

Метод второй

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

Эффект матового стекла в CSS

Для этого мы создадим div-обертку и применим к ней полупрозрачный цвет фона, а затем присвоим свойство backdrop-filter:

<div class="wrapper"> <h1>Frosted Glass Effect</h1> </div>

.wrapper{ background: rgba(255, 255, 255, 0.192); backdrop-filter: blur(10px); height: 250px; width: 600px; border-radius: 15px; border: 1px solid rgba(43, 43, 43, 0.568); }

Эффект матового стекла в CSS

Советы по использованию Glassmorphism

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

Чтобы эффект получился эстетичным, обязательно используйте яркие и градиентные цвета в качестве фона. Избегайте использования монохромного фона.

Можно попробовать поэкспериментировать с геометрическими элементами. Они придадут вашей странице игривый и привлекательный вид.

Эффект матового стекла может сделать веб-сайт или приложение более привлекательным при правильном использовании. Он может настолько улучшить доступность пользовательского интерфейса, что навигация станет проще даже для людей с проблемами зрения. Извлеките максимум из Glassmorphism, играя с ним и развлекаясь!

Автор: Khushboo Chaturvedi

Источник: dev.to

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

Читайте нас в Telegram, VK, Яндекс.Дзен