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

Два эффекта матового стекла на CSS

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

Где будет просматриваться это в действии в таких интерфейсах, как MacOS и iOS, и даже в Windows где в настоящее время можно определить определенно эффект брендов. Здесь можем эмалировать матовое стекло на сайтах с помощью CSS, и в этом уроке, как говорилось, будет предоставлено два способа сделать.

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

Способ: №1

Первый метод имеет достаточно широкую поддержку браузера, но требует больше CSS, чем второй подход, который мы рассмотрим. Начните с создания div с классом .matovoye-steklo. Мы будем использовать это для представления нашей панели из матового стекла, где затем можно задействовать изображение к элементу body.

Как создать эффект матового стекла в CSS

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

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

HTML

Код

CSS

Код

.matovoye-steklo {
  width: 28rem;
  height: 17rem;
  box-shadow: 0 0 1rem 0 rgba(41, 39, 39, 0.2);
  border-radius: 3px;
  position: relative;
  z-index: 1;
  background: inherit;
  overflow: hidden;
}

.matovoye-steklo:before {
  content: "";
  position: absolute;
  background: inherit;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-shadow: inset 0 0 2000px rgba(241, 241, 241, 0.5);
  filter: blur(10px);
  margin: -20px;
}

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

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

Способ: №2

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

Затем мы обратим наше внимание на CSS-свойство с именем backdrop-filter, где начнем с добавления некоторых стилей отображения в наш класс .frosted-glass-effect, включая цвет фона того, что подходит по стилистике к основному дизайну.

HTML

Код

CSS

Код

body {
  background: url(http://zornet.ru/CSS-ZORNET/Abvan/numerdigsa/dekangan/manudastub.jpg) no-repeat;
  background-attachment: fixed;
  background-size: cover;
  display: grid;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.frosted-glass-effect {
  width: 28rem;
  height: 17rem;
  box-shadow: 0 0 1rem 0 rgba(33, 31, 31, 0.2);
  border-radius: 5px;
  position: relative;
  z-index: 1;
  background: inherit;
  overflow: hidden;
}

.frosted-glass-effect:before {
  content: "";
  position: absolute;
  background: inherit;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-shadow: inset 0 0 2000px rgba(243, 237, 237, 0.5);
  filter: blur(10px);
  margin: -20px;
}

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

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

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

09 Августа 2019 Загрузок: 1 Просмотров: 8869 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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