ЖМК-301/2. Веб-дизайн. Практическое занятие №12. Glassmorphism-дизайн

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

CSS 

1) В общем селекторе указываем тип отображения модулей и шрифт:

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

  font-family: consolas;

}

2) В селекторе страницы укажите цвет фона, на котором будут расположены объекты:

body {

  display: flex;

  justify-content: center;

  align-items: center;

  min-height: 100vh;

  overflow-x: hidden;

  background: ?;

}

3) Создайте класс контейнера и задайте в нем ширину страницы для расстановки модулей исходя из принципа - два модуля на строку. В моем примере это 1000 пикселей. При необходимости скорректируйте отступы:

.container {

  display: flex;

  justify-content: center;

  align-items: center;

  flex-wrap: wrap;

  padding: 40px 0;

  width: 1000px;

  margin-top: -11%;

  margin-left: 10%;

  position: relative;

}

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

.container .box {

  position: relative;

  width: 320px;

  height: 400px;

  display: flex;

  justify-content: center;

  align-items: center;

  margin: 40px 30px;

  transition: 0.5s;

}

5) Указываем градус поворота подложки в псевдоклассах. У меня подложка задана с наклонов влево на 15 градусов. Если вы будете задавать ее с наклоном вправо, то нужно указать -15 градусов:

.container .box::before {

  content:' ';

  position: absolute;

  top: 0;

  left: 50px;

  width: 50%;

  height: 100%;

  text-decoration: none;

  background: #fff;

  border-radius: 8px;

  transform: skewX(15deg);

  transition: 0.5s;

}

.container .box::after {

  content:'';

  position: absolute;

  top: 0;

  left: 50;

  width: 50%;

  height: 100%;

  background: #fff;

  border-radius: 8px;

  transform: skewX(15deg);

  transition: 0.5s;

  filter: blur(30px);

}

6) Задаем логику поворота элементов подложки:

.container .box:hover:before,

.container .box:hover:after {

  transform: skewX(0deg);

  left: 20px;

  width: calc(100% - 90px); 

}

7) Создаем производные псевдоклассы для цвета подложки. В них указывается номер элемента (в скобках) и два цвета, между которыми осуществляется переход:

.container .box:nth-child(1):before,

.container .box:nth-child(1):after {

  background: linear-gradient(315deg, orange, red)

}

В примере выше дан один элемент. У вас их должно быть четыре - с разными порядковыми номерами и цветами.

8) Добавляем параметры развертывания модулей:   

.container .box span {

  display: block;

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  z-index: 5;

  pointer-events: none;

}

.container .box span::before {

  content:'';

  position: absolute;

  top: 0;

  left: 0;

  width: 0;

  height: 0;

  border-radius: 8px;

  background: rgba(255, 255, 255, 0.1);

  backdrop-filter: blur(10px);

  opacity: 0;

  transition: 0.1s;  

  animation: animate 2s ease-in-out infinite;

  box-shadow: 0 5px 15px rgba(0,0,0,0.08)

}

.container .box:hover span::before {

  top: -50px;

  left: 50px;

  width: 100px;

  height: 100px;

  opacity: 1;

}

.container .box span::after {

  content:'';

  position: absolute;

  bottom: 0;

  right: 0;

  width: 100%;

  height: 100%;

  border-radius: 8px;

  background: rgba(255, 255, 255, 0.1);

  backdrop-filter: blur(10px);

  opacity: 0;

  transition: 0.5s;

  animation: animate 2s ease-in-out infinite;

  box-shadow: 0 5px 15px rgba(0,0,0,0.08);

  animation-delay: -1s;

}

.container .box:hover span:after {

  bottom: -50px;

  right: 50px;

  width: 100px;

  height: 100px;

  opacity: 1;

}

9) Теперь анимацию через директиву keyframes:

@keyframes animate {

  0%, 100%

  {

    transform: translateY(10px);

  }

  

  50%

  {

    transform: translate(-10px);

  }

}

10) Стили стеклянной поверхности модулей:

.container .box .content {

  position: relative;

  left: 0;

  padding: 20px 40px;

  background: rgba(255, 255, 255, 0.05);

  backdrop-filter: blur(10px);

  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);

  border-radius: 8px;

  z-index: 1;

  transform: 0.5s;

  color: white;

}

11) Стили при наведенном курсоре:

.container .box:hover .content {

  left: -25px;

  padding: 60px 40px;

}

12) Стили заголовка. Если необходимо - измените цвет:

.container .box .content h2 {

  font-size: 2em;

  color: white;

  margin-bottom: 10px;

}

13) Стиль основного текста. Также измените его цвет, если требуется:

.container .box .content p {

  font-size: 1.1em;

  margin-bottom: 10px;

  line-height: 1.4em;

}

14) Цвет кнопок со ссылками:

.container .box .content a {

  display: inline-block;

  font-size: 1.1em;

  color: #111;

  background: white;

  padding: 10px;

  border-radius: 4px;

  text-decoration: none;

  font-weight: 700;

  margin-top: 5px;

}

15) Цвет кнопок при наведении курсора. Укажите свой:

.container .box .content a:hover {

  background: ?;

  border: 1px solid rgba(255, 0, 88, 0.4);

  box-shadow: 0 1px 15px rgba(1, 1, 1, 0.2);

}

HTML

16) Указываем стандартные теги:

<html lang="en">

  <head>

    <meta charset="UTF-8"></meta>

17) Прописываем заголовок страницы:

    <title>ваш заголовок</title>

18) Встраиваем CSS.

19) Закрываем </head> внутри <body> открываем класс контейнера 

  <div class="container">

20) Добавляем первый модуль. Открываем класс модуля:

  <div class="box">

    <span></span>

затем класс контента:

    <div class="content">

в нем указываем заголовок:

      <h2>Первый заголовок</h2>

и затем абзац текста:

      <p>абзац текста</p>

и внизу кнопку со ссылкой:

      <a href="ссылка">название кнопки</a>

закрываем класс модуля и класс контента:

    </div>

  </div>

21) Повторяем пункт 20 еще три раза, с разными заголовками и текстом чтобы получить четыре модуля. 

22) Закрываем класс контейнера:

</div> 

23) Закрываем оставшиеся теги </body> и </html>

Если все верно, то ваша страница будет выглядеть примерно так: https://konoplevdesign3.blogspot.com/p/glassmorphism-page.html

Ссылки на выполненное задание принимаются в комментариях к данному посту для ЖМК-302 до 17:00 24 апреля, для ЖМК-301 - до 17:00 27 апреля.

РЕЗУЛЬТАТЫ (данные обновляются):

Акимкина Олеся - 4

Ананина Виктория - 5

Андрюк Анастасия - 4

Власов Максим - 5

Гайфуллина Анна - 4

Гостева Полина - 5

Григорьева Екатерина - 5

Дашенко Александра - 5

Жукова Виктория - 4

Зубко Сабина - 4

Кобякова Дарья - 4

Ковалева Дарья - 4

Корнилова Полина - 4

Куликова Мария - 4

Мамонтова Мария - 4

Маханек Вера - 4

Новая Валентина - 4

Орлова Арина - 5

Слободская Елизавета - 5

Султанова Ирина - 4

Цветкова Виктория - 5

Чугунова Елизавета - 5

Широкоумова Полина - 5