9 416 Скрипты / Gallery

CSS3 фотогалерея


В этом уроке сделаем фотогалерею используя только CSS3. Вот с такими свойствами будем работать: user-select, box-sizing, transition, box-shadow и transform.

HTML

Всё очень просто и внимание стоит уделить лишь атрибуту tabindex, который определяет порядок элементов:

<div class="gallery">
    <a tabindex="1"><img src="images/1.jpg"></a>
    <a tabindex="2"><img src="images/2.jpg"></a>
    <a tabindex="3"><img src="images/3.jpg"></a>
    <a tabindex="4"><img src="images/4.jpg"></a>
    <a tabindex="5"><img src="images/5.jpg"></a>
    <a tabindex="6"><img src="images/6.jpg"></a>
    <a tabindex="7"><img src="images/7.jpg"></a>
    <a tabindex="8"><img src="images/8.jpg"></a>
    <a tabindex="9"><img src="images/9.jpg"></a>
    <a tabindex="10"><img src="images/10.jpg"></a>
    <a tabindex="11"><img src="images/11.jpg"></a>
    <a tabindex="12"><img src="images/12.jpg"></a>
</div>

CSS

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

Скачать 2969Загрузок 339,86 Kb
Демо

Комментарии

  • Facebook
  • Вконтакте

Похожие статьи