Как сделать эффектные картинки превью для вашего сайта
Все вы наверняка видели такие эффектные картинки-превью на сайтах, будь то интернет-магазин, новостной сайт или блог. Когда кликаешь по картинке, а она красиво преобразуется — размывается, сдвигается, становится прозрачнее или наоборот темнее и пр. Это сразу привлекает внимание посетителя.
Вы можете легко сделать такое на своем собственном сайте, причем без всяких сторонних скриптов и даже без jQuery. Все что нужно — это применить свойство filter из арсенала CSS3. Это что-то вроде фотошоповских фильтров, таких как размытие, оттенки серого, яркость, контрастность и др. Их еще так и называют — CSS3-фильтры.
Сегодня я расскажу о парочке самых эффектных на мой взгляд фильтров CSS3. Это фильтр blur (размытие) и фильтр grayscale (оттенки серого). Первый классно размывает картинку, а второй делает ее практически черно-белой, что тоже смотрится шикарно.
Чаще всего CSS3-фильтры применяют вместе со свойством :hover
CSS3 Blur Filter
Название фильтра говорит само за себя. Он позволяет размыть картинку, причем применяется размытие по Гауссу, точно такое же, как и в Фотошопе. Значение задаем в px или em. Чем оно выше, тем сильнее размытие.
filter: blur(30px);
CSS3 Grayscale Filter
Оттенки серого, они и в Африке оттенки. Вы можете применить этот фильтр, чтобы сделать картинку полностью черно-белой, либо только слегка прибрать цвета. Значение задается либо в процентах, либо в виде десятичной дроби:
filter: grayscale(100%);
или так:
filter: grayscale(1.0);
Чем больше значение, тем «черно-белее» картинка.
Можно использовать этот фильтр как в прямом, так и в обратном порядке. То есть, либо сначала у вас картинка цветная, а при наведении мышки становится черно-белой, либо наоборот, картинка изначально под 100% фильтром, а при наведении мышки принимает значение none.
Весь код не привожу. В примерах я добавил всплывающий блок с текстом (источник — там, кстати, есть несколько интересных вариантов появления этого блока, рекомендую).
Скачать архив с примерами можно здесь.
Enjoy!
