Эффект матового стекла

732

21 декабря 2016, 03:02

Как на плитках сделать эффект матового стекла?
Т.е. чтобы blur срабатывал только на область, которая находится за плиткой.
На цвет не обращайте внимания.

В коде выглядит так:

Answer 1

Эффект матового стекла достигается таким методом:

Блоку, который содержит основной фон, добавить свойство background со значением fixed — чтобы потомки наследовали координаты этого фона корректно.
Добавить свойство background: inherit блоку, который будет матовым — таким образом мы наследуем фон родителя
Добавить ему свойство overflow: hidden — так мы обрежем размытие, которое выйдет за границы этого блока.
Добавить filter: blur() — собственно, размытие.

4.1. Для охвата большего количества поддерживаемых браузеров добавить SVG-фильтр и подключить его через CSS.

.background { 
  width: 660px; 
  height: 371px; 
  background: url(http://ichef-1.bbci.co.uk/news/660/cpsprodpb/A2E4/production/_89400714_gettyimages-522829204.jpg) no-repeat fixed; 
  display: flex; 
  flex-flow: row wrap; 
  justify-content: space-around; 
} 
 
.noise { 
  background: rgba(0,0,0,0.2); 
  width: 170px; 
  height: 170px; 
  position: relative; 
  background: inherit; 
  overflow: hidden; 
  filter: blur(10px); 
  filter: url(#blur-filter); 
}

<div class="background"> 
  <div class="noise"></div> 
  <div class="noise"></div> 
  <div class="noise"></div> 
  <div class="noise"></div> 
  <div class="noise"></div> 
  <div class="noise"></div> 
</div> 
 
<svg version="1.1" xmlns='http://www.w3.org/2000/svg'> 
 <filter id="blur-filter"> 
   <feGaussianBlur stdDeviation='10' /> 
   </filter> 
</svg>

Минус этого метода в том, что при скролле фон остается на месте.

Answer 2

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

Минус этого метода в использовании JS.

$(function(){ 
  $('.noise').each(function(index){ 
    var posX = -$(this).position().left, 
        posY = $(this).position().top; 
    $(this).css({ 
      'background-position': posX+'px '+posY+'px' 
    }); 
  }); 
});

.background { 
  width: 660px; 
  height: 371px; 
  background: url(http://ichef-1.bbci.co.uk/news/660/cpsprodpb/A2E4/production/_89400714_gettyimages-522829204.jpg) no-repeat; 
  display: flex; 
  flex-flow: row wrap; 
  justify-content: space-around; 
  position: relative; 
} 
 
.noise { 
  width: 170px; 
  height: 170px; 
  position: relative; 
  background-image: inherit; 
  overflow: hidden; 
  filter: blur(10px); 
  filter: url(#blur-filter); 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="background"> 
  <div class="noise"></div> 
  <div class="noise"></div> 
  <div class="noise"></div> 
  <div class="noise"></div> 
  <div class="noise"></div> 
  <div class="noise"></div> 
</div> 
 
<svg version="1.1" xmlns='http://www.w3.org/2000/svg'> 
 <filter id="blur-filter"> 
   <feGaussianBlur stdDeviation='10' /> 
   </filter> 
</svg>