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

0 260

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

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

Метод первый

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

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

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

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

<div class=»wrapper»></div>

1 <div class=»wrapper»></div>

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

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

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

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

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

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

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

Здесь мы видим изображение-мозаику. Чтобы удалить его, мы будем использовать 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; }

12345 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.

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

12345678 .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.

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

123456 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-обертки).

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

123456789101112 .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.

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

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

Изучите курс и узнайте, как верстать современные сайты на 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; }

1234567891011121314 .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-оболочки, чтобы часть наложения, выходящая за ее пределы, была скрыта.

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

123456789 .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.

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

123456789 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>

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

CSS .content{ position: absolute; }

123 .content{        position: absolute;      }

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

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

Метод второй

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

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

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

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

123 <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); }

12345678 .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

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

Оставьте ответ

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