Русский
Русский
English
Статистика
Реклама

Web-developmen

Перевод Как обеспечить глассморфизм с помощью HTML и CSS

27.04.2021 16:10:26 | Автор: admin

Вы, наверное, подумаете ну вот еще один тренд дизайна? Разве они у нас не каждый год появляются или около того?

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

Но давайте поговорим немного больше о глассморфизме.

Что такое глассморфизм?

Глассморфизм это новое направление в дизайне, использующее прозрачный фон и эффект размытости поверх фона для создания эффекта стекла.

Вот пример:

Это пример из библиотеки CSS UI, основанной на глассморфизме, называемой ui.glass.

Как видите, эффект используется для карточки, которая содержит пример кода справа, в отличие от другой карточки на заднем плане.

Другим примером является редизайн Facebook Messenger App с использованием глассморфизма для MacOS:

Редизайн был выполнен Mikoaj Gaziowski на Dribbble.

Глассморфизм также используется такими компаниями как Apple и Microsoft

Это еще одна причина, по которой эта тенденция, вероятно, не просто проходит мимо, а до сих пор здесь, чтобы остаться. С выходом обновления Big Sur для MacOS, это было первое широкомасштабное распространение этого нового дизайнерского тренда крупной компанией.

Microsoft также использует этот стиль в Fluent Design System, но они называют его "акриловым материалом", а не глассморфизмом.

Вот как это выглядит:

Итак, теперь, когда я вкратце познакомил вас с гласcморфизмом, позвольте показать, как можно применить этот эффект, используя только HTML и CSS.

Давайте начнем

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

Элемент, который мы собираемся построить, будет выглядеть так:

Начнем с создания HTML-файла со следующим кодом:

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>Glassmorphism effect</title></head><body>    <!-- code goes here --></body></html>

Здорово! Теперь давайте также добавим пользовательский стиль шрифта, включая Inter из Google Fonts:

<link rel="preconnect" href="http://personeltest.ru/aways/fonts.gstatic.com"><link href="http://personeltest.ru/aways/fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

Настройка некоторых основных стилей и фона для тега body:

body {  padding: 4.5rem;  margin: 0;  background: #edc0bf;  background: linear-gradient(90deg, #edc0bf 0,#c4caef 58%);  font-family: 'Inter', sans-serif;}

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

<div class="card">    <h3 class="card-title">Glassmorphism is awesome</h3>    <p>A modern CSS UI library based on the glassmorphism design principles that will help you quickly design and build beautiful websites and applications.</p>    <a href="http://personeltest.ru/aways/ui.glass">Read more</a></div>

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

Перед тем, как применить эффект стекла, давайте сначала приведем в порядок некоторые интервалы и размеры стилей:

.card {  width: 400px;  height: auto;  padding: 2rem;  border-radius: 1rem;}.card-title {  margin-top: 0;  margin-bottom: .5rem;  font-size: 1.2rem;}p, a {  font-size: 1rem;}a {  color: #4d4ae8;  text-decoration: none;}

Здорово! Теперь, когда мы заложили основу для эффекта, давайте посмотрим, как мы сможем его применить.

Создание эффекта глассморфизма, используя HTML и CSS

Для применения эффекта нужны только два важных свойства CSS: прозрачный фон и свойства backdrop-filter: blur(10px); . Степень размытости или прозрачности может быть изменена в зависимости от ваших предпочтений.

Добавьте к элементу .card следующие стили:

.card {/* other styles */background: rgba(255, 255, 255, .7);-webkit-backdrop-filter: blur(10px);backdrop-filter: blur(10px);}

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

Давайте добавим изображение сразу после запуска тега body :

<img class="shape" src="http://personeltest.ru/aways/s3.us-east-2.amazonaws.com/ui.glass/shape.svg" alt="">

Затем примените следующие стили к элементу .shape с помощью CSS:

.shape {  position: absolute;  width: 150px;  top: .5rem;  left: .5rem;}

Потрясающе! Окончательный результат должен выглядеть так:

Если вам нужен код для этого туториала, посмотрите на этот код.

Поддержка браузера

Одним из недостатков нового тренда дизайна является то, что Internet Explorer не поддерживает свойство backdrop-filter, а Firefox отключает его по умолчанию.

В остальном все основные браузеры поддерживают свойства, необходимые для создания эффекта глассморфизма.

Вы можете проверить поддержку браузеров на сайте caniuse.com.

Заключение

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

Мы с моим другом из Themesberg работали над новой библиотекой CSS UI, которая будет использовать новое направление глассморфизма в дизайне, называемое ui.glass. Она будет иметь открытый исходный код под лицензией MIT.

Вы можете подписаться на получение обновлений о ходе работы и получать уведомления о том, когда проект будет запущен. Он будет доступен через NPM, а также CDN.

Спасибо за чтение! Оставьте свои мысли о глассморфизме в разделе комментариев ниже.


Прямо сейчас в OTUS открыт набор на онлайн-курс "HTML/CSS".

В связи с этим приглашаем всех желающих на бесплатное демо-занятие CSS Reset ненужный артефакт или спасательный круг. В рамках урока мы рассмотрим зачем нужен CSS Reset, что такое рендеринг и как браузер рендерит страницу.

- Узнать подробнее о курсе "HTML/CSS"

- Смотреть вебинар CSS Reset ненужный артефакт или спасательный круг

Подробнее..

Категории

Последние комментарии

  • Имя: Макс
    24.08.2022 | 11:28
    Я разраб в IT компании, работаю на арбитражную команду. Мы работаем с приламы и сайтами, при работе замечаются постоянные баны и лаги. Пацаны посоветовали сервис по анализу исходного кода,https://app Подробнее..
  • Имя: 9055410337
    20.08.2022 | 17:41
    поможем пишите в телеграм Подробнее..
  • Имя: sabbat
    17.08.2022 | 20:42
    Охренеть.. это просто шикарная статья, феноменально круто. Большое спасибо за разбор! Надеюсь как-нибудь с тобой связаться для обсуждений чего-либо) Подробнее..
  • Имя: Мария
    09.08.2022 | 14:44
    Добрый день. Если обладаете такой информацией, то подскажите, пожалуйста, где можно найти много-много материала по Yggdrasil и его уязвимостях для написания диплома? Благодарю. Подробнее..
© 2006-2024, personeltest.ru