Домой / Рецепты CSS / Webkit-filter: blur
Webkit-filter: blur

Webkit-filter: blur

Пример использования CSS фильтра размытия -webkit-filter: blur.  Фильтр blur устанавливает на фото эффект размытия элемента, словно фотография или изображение находится не в фокусе. Посмотреть какие браузеры поддерживают данный фильтр размытия можно на сайте caniuse.com:

Демо

HTML

<figure class="frame">
<img src="https://dl.dropboxusercontent.com/u/330966/static/reel.png" />

<figcaption class="info">

<h3>Baitrunner XT FA</h3>



Созданная для ловли более мелких особей, катушка XT объединяет свободную шпулю Baitrunner с многодисковым передним фрикционом для идеальной работы при различных способах рыбалки от хищников до карпа.

 Обладая множеством технологических преимуществ лучших катушек Shimano, XT также имеет 4 шариковых и роликовый подшипник из нержавеющей стали.
 <a href="#" class="button l">Детали</a>
 <a href="#" class="button r">Купить</a>
 

 </figcaption>

</figure>

CSS

@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300);
* {margin:0px;padding:0px;color: #191818;text-align:center;}
.frame,
.frame:before,
.frame .info,
.info > p,
.button {
 display:block;
}
.frame:before,
.frame .info,
h3,
.info > p,
.button {
 position:absolute;
}
.frame,
.frame:before {
 background-position:0% 0%,
 0% 100%,
 100% 0%,
 100% 100%;
 background-repeat: no-repeat;
}
.frame {
 position:relative;
 width:400px;
 height:550px;
 margin: 5rem auto;
 background-image:linear-gradient(white 0px, white 10px),
 linear-gradient(white 0px, white 10px),
 linear-gradient(white 0px, white 10px),
 linear-gradient(white 0px, white 10px);
 background-size:10px 80px;
 background-position:0% 0%,
 0% 100%,
 100% 0%,
 100% 100%;
 background-repeat:no-repeat;
}
.frame:before {
 content:'';
 width:100%;
 height:100%;
 background-image:linear-gradient(white 0px, white 10px),
 linear-gradient(white 0px, white 10px),
 linear-gradient(white 0px, white 10px),
 linear-gradient(white 0px, white 10px);
 background-size: 80px 10px;
}
.frame > img {
 -webkit-animation:blurout 2s ease forwards;
 animation: blurout 2s ease forwards;
}
.frame:hover > img {
 -webkit-animation:blurin 1s ease forwards;
 animation: blurin 1s ease forwards;

}
.frame .info {
 bottom:30px;
 left:30px;
 -webkit-box-sizing:border-box;
 box-sizing:border-box;
 width:340px;
 height:50px;
 overflow:hidden;
 -webkit-transition:height 0.3s 0.5s;
 transition: height 0.3s 0.5s;
}
.frame:hover .info {
 height:490px;
 -webkit-transition:height 0.3s;
 transition: height 0.3s;
}
h3 {
 top:0px;
 left:0px;
 width:100%;
 background:white;
 font-size:1.5rem;
 font-weight:300;
 text-transform:uppercase;
 letter-spacing:2px;
 line-height:50px;
 z-index:333;
}
h3:after {
 content:'';
 position:absolute;
 bottom:0px;
 left:15px;
 width:0px;
 height:1px;
 background:black;
 -webkit-transition:width 0.1s;
 transition: width 0.1s;
}
.frame:hover h3:after {
 width:310px;
 -webkit-transition:width 0.4s 1.7s;
 transition: width 0.4s 1.7s;
}
.info > p {
 overflow:hidden;
 top:0px;
 left:0px;
 height:0px;
 padding:0px 15px 30px 15px;
 background:rgba(255,255,255,0.3);
 text-align:left;
 z-index:222;
 -webkit-transition:height 0.2s,
 padding 0.2s,
 background 0.2s;
 transition:height 0.2s,
 padding 0.2s,
 background 0.2s;
}
.frame:hover .info > p {
 height:395px;
 padding:65px 15px 30px 15px;
 background:rgba(255,255,255,1);
 -webkit-transition:height 0.3s 0.6s,
 padding 0.3s 0.6s,
 background 1.1s 1.2s;
 transition:height 0.3s 0.6s,
 padding 0.3s 0.6s,
 background 1.1s 1.2s;
}
.button {
 bottom:15px;
 height:50px;
 width:147px;
 font-size:1.5rem;
 letter-spacing:2px;
 line-height:50px;
 text-transform:uppercase;
 text-decoration:none;
 -webkit-box-shadow:inset 0px 0px 0px 1px #191818;
 box-shadow: inset 0px 0px 0px 1px #191818;
 -webkit-transition:all 0.4s;
 transition: all 0.4s;
}
.l {
 left:15px;
}
.r {
 right:15px;
}
.button:hover {
 -webkit-box-shadow:inset 0px 0px 0px 3px #191818;
 box-shadow: inset 0px 0px 0px 3px #191818;
}
@-webkit-keyframes blurout {
 0% {-webkit-filter: blur(3px);filter: blur(3px);}
 100% {-webkit-filter: blur(0px);filter: blur(0px);}
}

@-webkit-keyframes blurin {
 0% {-webkit-filter: blur(0px);filter: blur(0px);}
 100% {-webkit-filter: blur(3px);filter: blur(3px);}
}
body {
 background: #d0d0d0;
 font-family: 'Source Sans Pro', sans-serif;
 font-size:1.1rem;
 font-weight:300;
 line-height:1.6rem;
}

Пример использования CSS фильтра размытия -webkit-filter: blur.  Фильтр blur устанавливает на фото эффект размытия элемента, словно фотография или изображение находится не в фокусе. Посмотреть какие браузеры поддерживают данный фильтр размытия можно на сайте caniuse.com: HTML &lt;figure class=&quot;frame&quot;&gt; &lt;img src=&quot;https://dl.dropboxusercontent.com/u/330966/static/reel.png&quot; /&gt; &lt;figcaption class=&quot;info&quot;&gt; &lt;h3&gt;Baitrunner XT FA&lt;/h3&gt; Созданная для ловли более мелких особей, катушка XT объединяет свободную шпулю Baitrunner с многодисковым передним фрикционом для идеальной работы при различных способах рыбалки от хищников до карпа. Обладая множеством технологических преимуществ лучших катушек Shimano, XT также имеет 4 шариковых и роликовый подшипник из нержавеющей стали. &lt;a href=&quot;#&quot; class=&quot;button l&quot;&gt;Детали&lt;/a&gt; &lt;a href=&quot;#&quot; class=&quot;button r&quot;&gt;Купить&lt;/a&gt; &lt;/figcaption&gt;&hellip;

Обзор

Проголосуйте за урок

Оценка

Итог : Уважаемые читатели! Если вам понравилась статья не поленитесь проголосовать и оставить комментарий, ведь так я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!

Рейтинг: 4.85 ( 2 голосов )
100

2 комментария

  1. Александра здравствуйте,
    пожалуйста помогите с адаптацией к разным разрешениям

    • Здравствуйте!
      Это пример размытия, который при желании можно наложить на какой-то уже готовый (с адаптацией) каталог и т.п. В данном случае ничем помочь Вам не могу 🙁

Оставить комментарий

Ваш email не будет опубликован.

*