Как создать галерею с lightbox с помощью CSS3 RUDEBOXСейчас тяжело представить себе сайт без изображений. Картинки позволяют визуально разгрузить сайт, я имею введу если на сайте много текста, кроме этого, красивая картинка всегда радует глаз. Допустим вы хотите разместить у себя на сайте несколько изображений, при этом красиво оформить их, то есть создать такую небольшую галерею, кроме этого скрасить ее разворотом изображений во весь экран. И так, как вы уже догадались, сегодня мы будем создать достаточно простую галерею для сайта с помощью css3.

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

Шаг 1. HTML

У нас будет контейнер по середине с содержанием, кроме этого мы добавляем небольшие подписи для каждого изображения:

С разметкой разобрались, переходим к следующему шагу.

Как создать галерею с lightbox с помощью CSS3 RUDEBOX

Шаг 2. CSS

Для начала мы добавим базовые стили такие как:  шрифт, ширину, стиль списка и т.д.

Как вы могли заметить, мы используем шрифт  Bree Serif с репозитория Google. Вы можете использовать любой шрифт, который вы хотите, но если вы хотели бы использовать тот же шрифт, не забудьте добавить ссылку на шрифт в HTML-коде. Теперь оформляем визуально галерею:

Мы будем вращать каждое из изображений в случайном порядке, мы будем использовать Z-индекс. Вот, что мы имеем в конечном результате:

Шаг 3. Создаем LighBox

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

Оформляем стили для контейнера лайтбокса:

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

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

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

Читайте также: