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

 

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

Мы будем использовать ряд изображений, с помощью свойств CSS, мы сделаем угол наклона изображений, после этого мы сделаем бесшовную разметку с небольшими тайтлами. Давайте посмотрим, что у нас с этого получилось.

Шаг 1. HTML

После того , как мы заготовили изображения, нам необходимо создать разметку, для примера мы возьмем разметку одного ромба. Мы используем два класса: “.diamond” для вращения элемента и “.thumb” для добавления фонового изображения

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

Галерея миниатюр в виде ромба с помощью CSS3 RUDEBOX

Шаг 2. CSS

Теперь предстоит самое интересное, нам необходимо вращать изображения:

Когда мы будем вращать квадрат, то фоновое изображение вращается вместе с ним, что нам не требуется. Для этого нам необходимо создать блокировку фонового изображения, будем фиксировать фон с помощью псевдо-элемента  :after.

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

Далее нам необходимо повернуть изображения, используем позиционирование с помощью CSS:

Затем нам необходимо создать подписи для изображений. Обратите внимание на то, что .diamond повернут, что приведет к повороту параграфа внутри него.

Галерея миниатюр в виде ромба с помощью CSS3 RUDEBOX

Теперь нам необходимо активировать событие при наведении курсора мыши на объект, делать мы это будем следующим образом:

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

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