Фильтры CSS заинтересовали нас с самого появления. Нам стало интересно, где именно их можно использовать. У нас сложилось впечатление, что одним из лучших мест для показа возможностей фильтров CSS могут быть галереи изображений. С помощью разнообразных фильтров CSS интересно создавать необычные галереи изображений. В этом уроке мы создадим простую галерею, используя фильтры CSS и псевдокласс CSS3 :not. 

Посмотрите демонстрацию работы и приступим:

Демонстрация работы

Можно использовать следующие значения фильтра CSS: grayscale (черно-белый), sepia (светло-коричневый), saturate (насыщенность), hue-rotate (поворот вектора цветности), opacity (прозрачность), invert (опрокидывание), brightness (яркость), contrast (контрастность), blur (размытие), drop-shadow (тень). Больше об этих значениях можно прочитать здесь.

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

Код HTML 

Вот так выглядит разметка этой галереи изображений:

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

Код CSS 

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

Вот так выглядят другие изображения в галерее, когда указатель мыши наведен на изображение тюльпанов.

.gallery{
  list-style: none;
  margin: 50px auto; padding: 0;
  width: 642px;
  font-size: 0; /* правка для расстояний между строчно-блочными элементами */
}

.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 и псевдокласс CSS3 :not, применим фильтры и увеличим прозрачность.
• Если браузер не поддерживает фильтры CSS, но поддерживает псевдокласс CSS3 :not, только увеличим прозрачность.
• Если браузер очень старый и не поддерживает ни фильтры CSS, ни псевдокласс CSS3 :not, ничего не меняем.

Поддержка браузерами 

Сейчас фильтры CSS подерживаются всеми браузерами, кроме Internet Explorer всех версий, браузерам на движках Webkit и Blink нужна приставка производителя -webkit-.

Заключение 

Сейчас фильтры CSS уже можно широко применять для создания интересных визуальных эффектов, не забывая о том, что они не будут отображаться во всех версиях браузера Internet Explorer. Но обычно визуальные эффекты не являются критическими для функционирования сайта, к тому же можно воспользоваться разными способами для создания эффектов, которые будут работать и в браузере Internet Explorer, например, как показано в этом уроке.

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

Автор урока Catalin Rosu

Смотрите также:

• Создание стилей таблицы с использованием возможностей CSS3
• Создание анимаций CSS с использованием единственного ключевого кадра
• Определение поддержки браузером конкретных свойств CSS с помощью правила @supports