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

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

Шаг 1. HTML

Для начала нам необходимо создать базовую разметку, она будет достаточно проста, у нас будет несколько классов, к каждому из которых будет присвоен значение нужного нам стиля, вся разметка будет заключена в класс wrap:

Кроме этого мы добавим изображение handle, которое будет обозначать навигацию. С разметкой мы разобрались, переходим к следующему шагу.

Выпадающий список изображений с помощью CSS3 | RUDEBOX

Шаг 2. CSS

Нам необходимо получить округлые элементы, для этого установим значение border-radius: 50%; с предустановленными размерами, кроме этого нам необходимо установить прозрачную маску, для этого нам понадобится opacity со значением 0.8.

Мы установили значение трансформации на 0.4s, изменив его можно увеличить или уменьшить скорость анимации. Для каждого изображения нам необходимо присвоить значение top с необходимыми расстоянием. Это нам необходимо, чтобы изображения не полностью накладывались один на одного, а сдвигались.

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

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