Эффект блеска для изображений с помощью CSS3 | RUDEBOXВ данном уроке мы рассмотрим как создать достаточно простой эффект блеска для изображений реализованный исключительно с помощью css. С помощью данного эффекта можно скрасить различные изображения на сайте, к примеру стилизовать социальные закладки или логотип. Основная идея состоит в том, когда изображение активно, то по нем пробегает блик, который привлекает взор. Мы не будем использовать сторонних ‘тяжелых’ плагинов, все будет реализовано достаточно просто, чтобы по максимуму упростить и ускорить загрузку.

Для демонстрации нам понадобятся несколько изображений, мы их позаимствовали с ресурса tumblr. HTML разметка достаточно простая, мы не будем останавливаться на ней, просмотреть ее содержание можно в исходниках.

Эффект блеска для изображений с помощью CSS3 | RUDEBOX

Шаг 1. CSS

Для достижения данного эффекта нам понадобится градиентная заливка, кроме этого мы будем подключать изображения через css. Функция figure:after будет отвечать за прозрачный слой на изображении, который создает иллюзию наложения стекла на изображении.

Свойство figure:before будет отвечать за сам блик, мы добавим тени, и позиционирование блика на изображении, кроме этого создаем градиентную заливку.

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях. Автором является Anonasaurus Rex.