Источник: WebForMyself.com
Эффект матового стекла, более известный как Glassmorphism, уже давно стал популярной функцией пользовательского интерфейса. Mac OS известна своим эффектом матового стекла, под Windows 10 он также реализован, например, на таких сайтах, как Github.
Сегодня мы рассмотрим два способа получить эффект матового стекла с помощью чистого CSS.
Метод первый
Начнем с создания div:
Теперь мы удалим поля и отступы для всех элементов и зададим нашим html и body высоту 100vh, чтобы они покрывали весь экран.
Добавим фоновое изображение:
Здесь мы видим изображение-мозаику. Чтобы удалить его, мы будем использовать background-size: cover, также мы не хотим, чтобы наше изображение повторялось, поэтому мы будем использовать background-repeat: no-repeat.
Теперь давайте стилизуем нашу обертку div. Мы зададим ей высоту и ширину, а также установим для нее значение inherit. Чтобы она выглядела лучше, мы зададим ей границу и радиус границы. Мы также добавим свойство position, чтобы при создании наложения оно не занимало весь экран, а вместо этого помещалось внутри нашей оболочки. В нашем случае я устанавливаю position: absolute.
Но фон div выглядит не так красиво. Вместо того, чтобы весь фон отображался внутри нашего div, я хочу, чтобы он занимал только ту часть изображения, которая находится за div. Для этого мы передадим свойство background-attachment: fixed нашему body.
Намного лучше. Теперь перейдем к основной части, давайте мы создадим наложение, используя псевдокласс before, чтобы придать нашему div эффект матового стекла.
ЗАМЕТКА
- Чтобы псевдокласс работал, нам нужно присвоить ему свойство content. В нашем случае, поскольку нам не нужен какой-либо контент, мы оставим его пустым (content: »).
- Он также требует свойства отображения, чтобы определить размер и форму. Для упрощения задачи, мы присвоим псевдоклассу position:absolute, чтобы он поместился внутри своего родительского контейнера (div-обертки).
Мы используем свойство box-shadow для применения сероватого наложения и blur для размытия этого наложения. Также мы присвоим ему радиус границы, аналогичный родительскому, для симметрии.
Тем не менее, мы все еще можем видеть некоторые не размытые края. Чтобы исправить это, мы сначала сделаем размер нашего наложения немного больше, чем размер оболочки, а затем установим значения left: -25px и top: -25px.
Наконец, чтобы края были четкими и видимыми, нам нужно установить overflow: hidden для div-оболочки, чтобы часть наложения, выходящая за ее пределы, была скрыта.
На последнем этапе мы будем использовать flexbox для центрирования нашего div в body.
Наша открытка с эффектом матового стекла готова. Но есть еще одна проблема, на которую нам нужно обратить внимание. Если мы попытаемся написать что-то внутри нашей оболочки div, это окажется за псевдоэлементом и не будет отображаться. Чтобы решить эту проблему, нам нужно будет создать еще один div внутри нашего, в который мы будем помещать контент. Затем мы должны установить абсолютную позицию этого div с содержимым.
Вот оно. Наша открытка с эффектом матового стекла готова!
Метод второй
Второй метод требует намного меньшего количества CSS, но не имеет хорошей поддержки браузером.
Для этого мы создадим div-обертку и применим к ней полупрозрачный цвет фона, а затем присвоим свойство backdrop-filter:
Советы по использованию Glassmorphism
- Первое, что нужно помнить при использовании эффекта матового стекла, — не злоупотреблять им, иначе это может вызвать проблемы с доступностью из-за размытия и прозрачности. Эффект выглядит лучше всего при использовании только одного или двух элементов!
- Чтобы эффект получился эстетичным, обязательно используйте яркие и градиентные цвета в качестве фона. Избегайте использования монохромного фона.
- Можно попробовать поэкспериментировать с геометрическими элементами. Они придадут вашей странице игривый и привлекательный вид.
Эффект матового стекла может сделать веб-сайт или приложение более привлекательным при правильном использовании. Он может настолько улучшить доступность пользовательского интерфейса, что навигация станет проще даже для людей с проблемами зрения. Извлеките максимум из Glassmorphism, играя с ним и развлекаясь!
Источник: dev.to
#css #css3 #разработка веб-сайтов
