2014
14
Май

Галерея на HTML5



В последнее время все чаще входит в сайтостроение HTML5. Сегодня мы создадим галлерею с помощью HTML5.

Для ее создания используем теги: для изображений <figure>, для написания подписей под изображениями <figcaption>.


HTML


Записываем галерею в виде списка.

<ul class="gallery tape"> <li> <figure> <img src="/sample-1.jpg" alt="image"> <figcaption>Подпись под изображением</figcaption> </figure> </li> <li> <figure> <img src="/sample-2.jpg" alt="image"> <figcaption>Подпись под изображением</figcaption> </figure> </li> <li> <figure> <img src="/sample-3.jpg" alt="image"> <figcaption>Подпись под изображением</figcaption> </figure> </li> </ul>

CSS


Записываем свойства для данного списка. Добавляем элемент маску для изображения overlay.png применяется для элемента figure:before.

.gallery { margin: 0 0 25px; text-align: center; } .gallery li { display: inline-block;/*блочный элемент*/ margin: 5px; list-style: none; /*маркер списка без стиля*/ } .gallery a { position: relative; display: inline-block; } .tape li { width: 200px; padding: 5px; margin: 15px 10px; border: solid 1px #cac09f; background: #fdf8e4; text-align: center; box-shadow: inset 0 1px rgba(255,255,255,.8), 0 1px 2px rgba(0,0,0,.2); } .tape figure { position: relative; margin: 0; } .tape figure:before { position: absolute; content: ' '; top: 0; left: 0; width: 100%; height: 100%; background: url(/overlay.png) no-repeat; } .tape figcaption { font: 100%/120% Handlee, Arial, Helvetica, sans-serif; color: #787568; }

CSS3 Трансформация


Добавляем фон и используем трансформацию, чтобы повернуть изображения под разными углами.

.transform { background: url(/cork-bg.png); padding: 25px; border-radius: 10px; box-shadow: inset 0 1px 5px rgba(0,0,0,.4); } .transform li { border: none; }

Используем метод nth-of-type для более естественного поворота изделий.

.transform li:nth-of-type(4n+1) { -webkit-transform: rotate(2deg); } .transform li:nth-of-type(2n) { -webkit-transform: rotate(-1deg); } .transform li:nth-of-type(4n+3) { -webkit-transform: rotate(2deg); }