19.01.2022

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

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

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

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

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

Способ первый

Начнем с сотворения div:

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

CSS

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

CSS

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

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

CSS

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

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

CSS

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

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

CSS

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

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

ЗАМЕТКА

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

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

CSS

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

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

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

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

CSS

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

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

CSS

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

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

CSS

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

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

CSS

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

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

Способ второй

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

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

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

CSS

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

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

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

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

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

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

По материалам webformyself.com

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *