Фильтры CSS в действие

Попробуем приминить фильтры CSS в нашем проекте. Пока что они не так широко используются на веб-пространстве, но в будущем возможно это измениться. Я думаю, лучший способ продемонстрировать все возможности фильтров лучше всего в некой галерее. Так что сегодня мы попробуем создать галерею с помощью CSS фильтров и CSS3 :not селектора.

Вот наши фильтры: grayscale , sepia , saturate , hue-rotate , opacity , invert , brightness , contrast , blur , drop-shadow Подробнее у них можно прочитать тут.

В нашей статье мы будем использовать только blur и grayscale фильтры для создания мини-галереи.

HTML

Очень понятная разметка галереи:

<ul class="gallery">
  <li><img src="1.jpg"></li>
  ...
  <li><img src="6.jpg"></li>      
</ul>

CSS

Это один из немногих моментов, когда вы ну увидите кучу строк. Главная часть происходит в .gallery:hover li:not(:hover) селекторе, когда фильтры применяются ко всем элемент без наведения мыши.

.gallery{
  list-style: none;
  margin: 50px auto; padding: 0;
  width: 642px;
  font-size: 0; /* fix inline-block spacing */
}

.gallery li{
    display: inline-block;
    *display: inline;
    zoom: 1;
    width: 200px; height: 150px;
    margin: 2px;
    border: 5px solid #fff;
    box-shadow: 0 2px 2px rgba(0,0,0,.1);
    transition: all .3s ease;        
}

.gallery:hover li:not(:hover){       
    -webkit-filter: blur(2px) grayscale(1);
    opacity: .7; /* fallback */        
}

Готово!

Надеемся, в будущем эта техника и фильтры будут более популярны, ведь с их помощью можно делать очень красивые вещи.

Метки: CSS3, СSS, фильтры

Рубрика: CSS