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

В основном фильтры используются для создания галерей с изображениями. И в этой статье мы создадим простую галерею с помощью фильтров.

Вы можете посмотреть пример, а также скачать архив с примером:

Посмотреть примерСкачать

Лучше всего показывает данный эффект браузер Chrome.

Сейчас доступны следующие фильтры: оттенки серого, сепий, насыщенный, поворот, непрозрачность, инвертирование, яркость, контраст, размытие, тени. Подробнее о них можно узнать здесь(к сожалению на английском).

В этой статье при создании галереи будем использовать фильтр оттенки серого и размытие. А также мы воспользуемся селектором :not в процессе разработки.

HTML часть

Создаем список где будут находиться изображения галереи:

1
2
3
4
5
6
7
8

<ul class="gallery">
    <li><img src="images/1.jpg"></li>
    <li><img src="images/2.jpg"></li>
    <li><img src="images/3.jpg"></li>
    <li><img src="images/4.jpg"></li>
    <li><img src="images/5.jpg"></li>
    <li><img src="images/6.jpg"></li>      
</ul>

CSS часть

Здесь нам необходимо сделать так, чтобы при наведении на весь список все элементы становились серыми, а тот, на который навели, имел обычные свойства. Вы можете это видеть на изображении ниже:

Для этого применим необходимые свойства:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

.gallery{
  list-style: none;
  margin: 50px auto; padding: 0;
  width: 642px;
}
 
.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;
}

Замечания

• Дело в том, если браузер не поддерживает CSS фильтры, то будет применена непрозрачность.

• И если браузер слишком старый, то ничего не произойдет.

Поддержка

Пока что данные фильтры поддерживает полноценно только браузер Chrome.

Если есть какие-то вопросы, задавайте их в комментариях ниже.

Успехов!