Поговорим о глассморфизме (Glassmorphism)

Поговорим о глассморфизме

В 2021 году Glassmorphism был огромным трендом в веб-дизайне. Я всегда люблю размытость в UI / UX, она делает пользовательский интерфейс более богатым и сложным.

IOS использует размытие в течение долгого времени, и я всегда нахожу это классным. Размытие работает очень хорошо, с окном, которое вы можете перемещать по фону изображения. Windows Vista / 7 ввели это с окнами aero.

Я думаю, что использование небольшого размытия в нужном месте может быть потрясающим, для меня полный макет стекломорфизма может быть слишком большим. В 2022 году мы можем видеть небольшое размытие, например, в twitter mobile, navbar закреплен сверху, и мы можем видеть его.

Недостатки

• Иметь текстурированный фон на странице: иметь несколько цветов, узор svg или изображения. Чтобы сделать размытие видимым.
• Можно сделать сложный визуальный

Я хочу этого!

Сейчас мы проверим, как это легко реализовать! Для этого я сделал Codepen. Вы можете скопировать-вставить его или прочитать мою статью, чтобы иметь больше объяснений, чтобы увидеть, как это работает 👍.

Открыть Github Gist

Три простых шага:

• Создайте div
• Примените прозрачный фон
• и затем фон!

Для прозрачного фона вы можете использовать инструмент выбора цвета Chrome dev, вот так:

Затем для того же div нужно добавить следующую строку:

Backdrop-filter:blur(4px);

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