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

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

Метод первый

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

<div class=”wrapper”></div>

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

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

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

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

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

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

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

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

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

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

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

ЗАМЕТКА

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

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

CSS .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 для размытия этого наложения. Также мы присвоим ему радиус границы, аналогичный родительскому, для симметрии.

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

CSS .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; }

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

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

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

CSS 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; }

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

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

CSS .content{ position: absolute; }

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

Метод второй

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

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

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

CSS .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); }

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

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

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

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

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

Автор: Khushboo Chaturvedi

Источник: webformyself.com