Эффект матового стекла используя HTML & CSS || Glassmorphism design using HTML & CSS step by step

Всем привет!

В этом видео вы узнаете, как сделать эффект матового стекла для блока, используя HTML и CSS шаг за шагом.

Итак, приступим к созданию эффекта матового стекла.

У нас есть файл index.html, style.css, стили подключены, также подключены шрифты и добавлены простые обновляющие стили.

Давайте внутри в баги создадим div с классом box, внутри него будет размещаться заголовок первого типа.

с контентом Glass Effect.

Давайте теперь откроем страницу в браузере.

Будем использовать горячие клавиши Alt-L, Alt-O.

Сейчас откроется страница в браузере с помощью Live Server.

Итак, мы видим, есть наш контент.

Давайте свернем браузер в половину и Visual Studio Code, чтобы наглядно было видно, что меняется на странице.

Перейдем в стиле и в стилях обратимся к селектору тега body.

Для него укажем ширина 100%, минимальная высота будет 100.

Также добавим background.

Укажем url, чтобы выбрать источник для изображения.

Это будет папка mg. Внутри папки у нас есть изображение с названием vg.

Выбираем его.

Итак, мы видим, что background добавился.

Давайте его еще немного подкорректируем через пробел.

Здесь укажем значение.

repeat чтобы он не повторялся центр чтобы он размещался по центру и cover чтобы он занимал четко всю ширину и высоту и так мы видим теперь у нас добавился background давайте также еще размещение элемента по центру укажем укажем display grid и place items будет центр и так мы видим элементы размещаются по центру теперь давайте обратимся к

Его с классом Box.

Для него укажем ширина 50VW.

Высота будет 52H.

Сделаем так, чтобы этот элемент у нас был адаптивным.

Также, чтобы блок отобразился, давайте добавим Box Shadow.

Смещение по горизонтали будет 0, по вертикали также 0.

1RAM будет размытие и будет цвет RGB.

Значение будет 0,0,0.

Темный цвет.

Запятая и затемнение на 90%.

Так, мы видим, есть у нас блок с таким вот, с такой вот тенью.

Теперь давайте также еще сделаем скругление углов.

Укажем Border Radius 20 пикселей.

Скругление углов для блока со всех сторон на 20 пикселей.

И добавим Background Color.

Укажем также цвет RGB.

Значение у нас будет 255, 255, 255.

Это...

Белый цвет, как мы видим, стал цвет у нас белый.

И через запятую также сделаем еще затемнение на 10%.

Так, мы видим, есть.

Если мы здесь укажем, например, 50%, то блок будет у нас такой, ближе к белому.

Ну, давайте укажем на 10%, немного.

Сделаем для него эффект затемнения красным.

Такой вот.

Так, теперь давайте сделаем, чтобы этот блок был у нас замутненным.

Будем использовать свойства back drop back drop filter и значение будет у нас blur размытие, давайте укажем на 1 пиксель.

Как мы видим, смотрим, у нас такой вот

Замутненный эффект идет для этого блока.

И чем больше здесь значения, мы указали 1 пиксель, давайте изменим на 5 пикселей.

Чем больше будет значения, тем больше будет замутнен этот блок.

Давайте укажем, например, 20 пикселей.

Видим, еще больше идет замутнение.

Давайте укажем для Blur 3 пикселя, чтобы было такое не совсем.

Большое замутнение.

И как мы видим, есть бэкграунд.

И через этот блок он у нас просматривается вот с таким вот эффектом матового стекла.

Теперь давайте поработаем с заголовком первого типа.

Разместим его по центру этого блока.

Для этого здесь ниже обратимся к Box и к заголовку первого типа.

Для него укажем размещение Position Absolute.

Top 50%, Left 50%.

свернем и также укажем трансформ translate и параллельно здесь выберем минус 50 процентов минус 50 процентов и так элемент размещается у нас четко по центру давайте для него укажем также цвет белый и укажем сайз на 7w чтобы этот заголовок у нас был также адаптивным расширим на все видим то

Заголовок стал большего размера.

Уменьшаем.

Он, соответственно, уменьшается.

И сделаем давайте так, чтобы не было разрыва.

Чтобы в Glass Effect слова были один за одним в ряд.

Давайте для этого будем использовать свойства White Space и значение No Wrap.

Итак, смотрим.

Теперь у нас слова размещаются один за одним.

И вот...

В этом видео получилось сделать такой вот эффект матового стекла для этого блока, используя HTML и CSS шаг за шагом.

На этом все.

Спасибо за просмотр и успехов в обучении.

Если вам понравилось данное видео, ставьте лайк и подписывайтесь на мой канал.