ZorNet.Ru — сайт для вебмастера » HTML и CSS » Эффект «матового стекла» средствами CSS

Эффект «матового стекла» средствами CSS

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

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

Так смотрится при проверки, хотя есть ниже demo страница для полноценного обзора этого великолепия.

Первый вариант:

Оригинальный эффект матового стекла HTML + CSS

Установка:

HTML

Код

<div class="frosted_glass_effect">
<h1>Интернет ресурс - zornet.ru</h1>
</div>

CSS

Код

body {
  height: 100vh;
  width: 100%;
  font-family: 'Helvetica', 'Arial', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url(Изображение) center center;
  background-size: cover;
}

.frosted_glass_effect {
  position: relative;
  height: 100%;
  width: 100%;
  max-height: 278px;
  max-width: 584px;
  background: rgb(155 155 155 / 25%);
  border: 1px solid rgb(193 193 193 / 90%);
  box-shadow: 0 20px 50px -10px rgb(108 108 108 / 85%);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(7px);
}
.frosted_glass_effect h1 {
  color: #f7e8e8;
  text-shadow: 0 1px 0 rgb(18 18 18 / 71%);
}

Нужно понимать, что здесь картинка с изображением больше для того, чтоб можно корректно рассмотреть сам эффект матового цвета на чистом CSS, но и для создание страницы body сразу прописано станет не лишнем.

Демонстрация https://codepen.io/kocsten/full/vYJXJBj

Второй вариант:

Красивый эффект матового стекла на чистом CSS

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

Установочный процесс:

HTML

Код

<div class="matova_osvesuka andes">
<p>Здесь возможно будет ваше описание, которое обязательно к прочтению.</p>
</div>

CSS

Код

.matova_osvesuka {
  width: 164vh;
  height: 14vw;
  padding: 1.64em;
  border-radius: 0.24em;
}

.andes {
  background-color: rgb(247 247 247 / 15%);
  backdrop-filter: blur(6px);
  border: 1px solid rgb(245 239 239 / 63%);
}

p {
  color: #f7f7f7;
  font-size: 1.2em;
  text-shadow: 0 1px 0 #3e3e3e;
}

body {
  background-image: url(Ссылка на тематическое изображение);
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
}

html {
  width: 100%;
  height: 100%;
}

Ранее мне приходилось размещать на сайта аналогичные материалы, точнее готовые решение на матовые стекла, где перейдя по ссылке вы можете ознакомиться со всеми вариантами.

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

Демонстрация

21 Октября 2021 Загрузок: 3 Просмотров: 876 Комментариев: (0)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Комментарии: 0