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

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

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

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

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

Способ: №1

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

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


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

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

HTML

Код
<div class="matovoye-steklo"></div>

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, включая цвет фона того, что подходит по стилистике к основному дизайну.

Размытие части изображения css

HTML

Код
<div class="frosted-glass-effect"></div>

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;
}

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

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

Демонстрация
2019-08-09 Загрузок: 1 Просмотров: 5309 Комментарий: (0)

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

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

Оставь свой отзыв

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