Эффект матового стекла: фильтр: размытие () - PullRequest
Новая
       89

Эффект матового стекла: фильтр: размытие ()

0 голосов
/ 13 ноября 2018

РЕДАКТИРОВАТЬ: добавлены ссылки на кодовый блок

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

Это проверяется в Chrome . 

body {
  font: 15px/1.5 Arial, Helvetica, sans-serif;
  padding: 0;
  margin: 0;
  background: url("https://i.imgur.com/ht1etAo.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

.frost {
  color: #ffffff;
  width: 400px;
  height: 200px;
  position: absolute;
  background: inherit;
  overflow: hidden;
  margin: 0 auto;
  padding: 2rem;
}

.frost:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: inherit;
  filter: blur(20px);
  box-shadow: inset 0 0 3000px rgba(255, 255, 255, 0.5);
  margin: -20px;
}
<section id="frontImage">
  <div class="container">
    <div class="frost">
      <h3>Testing Glass</h3>
    </div>
  </div>
</section>

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

Вот мой код: я пытаюсь размыть морозный div

Нацеленность на этот вид эффекта: https://codepen.io/AmJustSam/full/ModORY/

Что у меня есть: https://codepen.io/anon/pen/PxWEde

Я тоже пытался использовать webkit-blur, но это тоже не сработало.

Любой совет с благодарностью. Если вам нужна дополнительная информация, пожалуйста, спросите.

Ответы [ 2 ]

0 голосов
/ 13 ноября 2018

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

Ps. Полегче, у ребят возникла проблема с виджетом HTML.

Вот код, надеюсь, это поможет 

html,
body {
  padding: 0;
  margin: 0;
}
h2 {
text-align:center;
color:white;
}
.glass-effect--bg-inner {
position:relative;
z-index:1;
padding-top:20px;
}
.container {
  width: 100%;
  height: 100%;
  min-height: 500px;
}

.large-hero--bg {
  background: url(https://cdn-std.dprcdn.net/files/acc_609131/p6BW2C) no-repeat fixed;
  background-size: cover;
  background-position: 50% 0;
}


.glass-effect {
  position: relative;
  height: 250px;

}

.glass-effect--bg:after {
   
      position: absolute;
      top: 0;
      left: 0;
      z-index: 0;
      width: 100%;
      height: 100%;
      background: url("https://cdn-std.dprcdn.net/files/acc_609131/EElxHZ") repeat fixed;
      background-size: cover;
      background-position: 50% 0;
      content: "";
      filter: url("https://cdn-std.dprcdn.net/files/acc_609131/EElxHZ") repeat fixed;
      -webkit-filter: blur(5px);
      filter: blur(5px);
  
  }
<div class="container large-hero--bg ">
  <div class="glass-effect glass-effect--bg">
<div class="glass-effect--bg-inner">

  <h2>Lorem ispsum dolor</h2>
  </div>
  </div>
</div>
0 голосов
/ 13 ноября 2018 

body {
  padding: 0;
  margin: 0;
  background: url("https://i.imgur.com/ht1etAo.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  display: flex;
  justify-content: center;
}

.frost {
  width: 400px;
  height: 200px;
  position: absolute;
  background: inherit;
}

.frost:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  filter: blur(2px);
  background: inherit;
}

.content {
  position: absolute;
  width: 340px;
  height: 140px;
  top: 30px;
  left: 30px;
}
<div class="frost">
  <div class="content">
    <h3>Testing Glass</h3>
    <p>lipsum</p>
  </div>
</div>
...