Галерея на сайте это всегда что то интересное и своеобразное, на фотосайтах веб-мастеры, стараются, сделать уникальные галереи, ведь похожие страницы никому не нравятся, особенно заказчику. В данном уроке мы сделаем фотогалерею с лайтбоксом только на CSS3, без применения различных скриптов. Для этого мы будем использовать некоторые свойства css. Данная галерея отлично подойдет для любого сайта, достаточно просто смотрится, и радует взор пользователя. Также галерея весьма просто монтируется..

 

Как уже говорил, мы будем использовать некоторые свойства СSS3, а именно: user-select, box-sizing, transition, box-shadow и transform. Для начала мы рассмотрим структуру HTML, как можно заметить, то сложного ничего в разметке нет. Обратите внимание на атрибут tabindex  — он определяет порядок фотографии при использовании клавиши табуляции.

Изображениям придается вид фотографий поляроида, разбросанных небрежно по столу. Для эффекта используется трансформация rotate.

Для вывода фотографии на передний план подключаем псевдо-класс :focus (который соответствует любому элементу, который имеет фокус ввода). Так как мы определили атрибут  tabindex , то теперь можно переключаться между фотографиями с помощью клавиши ‘tab’ (и ‘shift+tab’). Рассмотрим стилизацию с помощью CSS:

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