Как сделать эффектные картинки превью для вашего сайта

Как сделать эффектные картинки превью для вашего сайта

Все вы наверняка видели такие эффектные картинки-превью на сайтах, будь то интернет-магазин, новостной сайт или блог. Когда кликаешь по картинке, а она красиво преобразуется — размывается, сдвигается, становится прозрачнее или наоборот темнее и пр. Это сразу привлекает внимание посетителя.

Вы можете легко сделать такое на своем собственном сайте, причем без всяких сторонних скриптов и даже без jQuery. Все что нужно — это применить свойство filter из арсенала CSS3. Это что-то вроде фотошоповских фильтров, таких как размытие, оттенки серого, яркость, контрастность и др. Их еще так и называют — CSS3-фильтры.

Сегодня я расскажу о парочке самых эффектных на мой взгляд фильтров CSS3. Это фильтр blur (размытие) и фильтр grayscale (оттенки серого). Первый классно размывает картинку, а второй делает ее практически черно-белой, что тоже смотрится шикарно.

Чаще всего CSS3-фильтры применяют вместе со свойством :hover

CSS3 Blur Filter

CSS3 Blur Filter

Название фильтра говорит само за себя. Он позволяет размыть картинку, причем применяется размытие по Гауссу, точно такое же, как и в Фотошопе. Значение задаем в px или em. Чем оно выше, тем сильнее размытие.

filter: blur(30px);

Пример →

CSS3 Grayscale Filter

CSS3 Grayscale Filter

Оттенки серого, они и в Африке оттенки. Вы можете применить этот фильтр, чтобы сделать картинку полностью черно-белой, либо только слегка прибрать цвета. Значение задается либо в процентах, либо в виде десятичной дроби:

filter: grayscale(100%);

или так:

filter: grayscale(1.0);

Чем больше значение, тем «черно-белее» картинка.

Можно использовать этот фильтр как в прямом, так и в обратном порядке. То есть, либо сначала у вас картинка цветная, а при наведении мышки становится черно-белой, либо наоборот, картинка изначально под 100% фильтром, а при наведении мышки принимает значение none.

Пример →

Весь код не привожу. В примерах я добавил всплывающий блок с текстом (источник — там, кстати, есть несколько интересных вариантов появления этого блока, рекомендую).

Скачать архив с примерами можно здесь.

Enjoy!

Пожалуйста, оцените статью и поделитесь в соцсетях:

1 Star2 Stars3 Stars4 Stars5 Stars (5 votes, average: 5,00 out of 5)
Загрузка...

Похожие записи:

Оставить комментарий: