Как на плитках сделать эффект матового стекла?
Т.е. чтобы blur срабатывал только на область, которая находится за плиткой.
На цвет не обращайте внимания.
-
может примерчик есть какой то?. webformyself.com/effekt-matovogo-stekla-s-pomoshhyu-filtrov-css– user190134Commented 16 дек. 2016 в 14:54
-
2codepen.io/search/pens?q=blur&limit=all&type=type-pens– SVECommented 16 дек. 2016 в 15:22
Добавить комментарий
|
3 ответа
Эффект матового стекла достигается таким методом:
- Блоку, который содержит основной фон, добавить свойство
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>
Минус этого метода в том, что при скролле фон остается на месте.
Это эффект который ожидается ?
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
.parent {
width: 100%;
height: 100%;
background-color: rgba(200, 200, 200, .3);
position: relative;
}
.blur {
width: 100%;
height: 100%;
background-color: rgba(128, 183, 186, .4);
background-image: url(http://www.hlgjyl888.com/data/wallpapers/189/WDF_2273934.jpeg);
background-size: 100% 100%;
filter: blur(5px);
position: absolute;
top: 0;
left: 0;
}
.items {
width: 100%;
height: 50%;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
background-color: rgba(255, 255, 255, .1);
display: flex;
justify-content: space-around;
}
.item {
width: 30%;
height: 100%;
text-align: center;
}
.item img {
display: block;
width: 100%;
height: 100%;
margin: auto;
}
<div class="parent">
<div class="blur"></div>
<div class="items">
<div class="item">
<img src="http://easywebscripts.net/wp-content/uploads/2009/07/jquery-icon.png">
</div>
<div class="item">
<img src="http://s1.iconbird.com/ico/0512/BrushedMetalIcons/file1336753437.png">
</div>
<div class="item">
<img src="http://logo-load.com/uploads/posts/2016-09/javascript-logo.png">
</div>
</div>
</div>
Или такой эффект blur()
?
* {
margin: 0;
padding: 0;
}
html,
body,
.wrapper {
width: 100%;
height: 100%;
background-color: #ccc;
}
.wrapper {
position: relative;
}
.background {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-image: url(http://www.hlgjyl888.com/data/wallpapers/189/WDF_2273934.jpeg);
background-size: 100% 100%;
z-index;
90;
}
.blur {
width: 100%;
height: 50%;
background-image: url(http://www.hlgjyl888.com/data/wallpapers/189/WDF_2273934.jpeg);
background-size: 100% 140%;
background-position: 0 100%;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
z-index: 100;
filter: blur(2px);
}
.items {
width: 100%;
height: 50%;
background-color: rgba(255, 255, 255, .1);
position: absolute;
top: 0;
bottom: 0;
margin: auto;
z-index: 120;
display: flex;
justify-content: space-around;
}
.item {
width: 30%;
height: 100%;
text-align: center;
}
.item img {
display: block;
width: 100%;
height: 100%;
margin: auto;
}
<div class="wrapper">
<div class="background"></div>
<div class="blur"></div>
<div class="items">
<div class="item">
<img src="http://easywebscripts.net/wp-content/uploads/2009/07/jquery-icon.png">
</div>
<div class="item">
<img src="http://s1.iconbird.com/ico/0512/BrushedMetalIcons/file1336753437.png">
</div>
<div class="item">
<img src="http://logo-load.com/uploads/posts/2016-09/javascript-logo.png">
</div>
</div>
</div>
Чтобы избежать минуса с фиксированным фоном, можно проделать трюк с назначением координат блокам с размытием. Как и в прошлом варианте, мы наследуем фон родителя.
Минус этого метода в использовании JS.
var noiseElements = [].slice.call(document.querySelectorAll('.noise'));
noiseElements.forEach(function(item) {
item.style.backgroundPosition = -item.offsetLeft + 'px ' + item.offsetTop + '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);
}
svg {
display: none;
}
<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>