Попробуем приминить фильтры CSS в нашем проекте. Пока что они не так широко используются на веб-пространстве, но в будущем возможно это измениться. Я думаю, лучший способ продемонстрировать все возможности фильтров лучше всего в некой галерее. Так что сегодня мы попробуем создать галерею с помощью CSS фильтров и CSS3 :not селектора.
Вот наши фильтры: grayscale , sepia , saturate , hue-rotate , opacity , invert , brightness , contrast , blur , drop-shadow Подробнее у них можно прочитать тут.
В нашей статье мы будем использовать только blur и grayscale фильтры для создания мини-галереи.
HTML
Очень понятная разметка галереи:
02 | <li><img src="1.jpg"></li> |
04 | <li><img src="6.jpg"></li> |
CSS
Это один из немногих моментов, когда вы ну увидите кучу строк. Главная часть происходит в .gallery:hover li:not(:hover) селекторе, когда фильтры применяются ко всем элемент без наведения мыши.
03 | margin: 50px auto; padding: 0; |
09 | display: inline-block; |
12 | width: 200px; height: 150px; |
14 | border: 5px solid #fff; |
15 | box-shadow: 0 2px 2px rgba(0,0,0,.1); |
16 | transition: all .3s ease; |
19 | .gallery:hover li:not(:hover){ |
20 | -webkit-filter: blur(2px) grayscale(1); |
Готово!
Надеемся, в будущем эта техника и фильтры будут более популярны, ведь с их помощью можно делать очень красивые вещи.
(
1 голосов. Рейтинг:
5,00 из 5)
Загрузка...
Метки: CSS3, СSS, фильтры
Рубрика: CSS
Загрузка...