2014
10
Май

Фотогалерея для сайта



Фотогалерея со скрепкой




Сегодня мы познакомимся с фотогалереей, в которой используются дополнения (скрепка, рамка, лента).

Прежде всего заготовьте нужные картинки для фотогалереи размером 190х140px (можно брать любой размер).




Галерею запишим в виде списка.

<ul class="gallery"> <li><img src="/sample-1.jpg" alt="image"></li> <li><img src="/sample-2.jpg" alt="image"></li> <li><img src="/sample-1.jpg" alt="image"></li> </ul>

Записываем свойства для данного списка. Для фонового изображения в виде скрепки создаем контейнер размером 30х60 px для элемента a:before. Чтобы контейнер появился свойство content оставляем пустым.

.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; } .clip img { padding: 4px; border: solid 1px #bbb; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); } .clip a:before { position: absolute; /*абсолютное позиционирование*/ content: ' '; /*пустой контейнер*/ top: -5px; left: 4px; width: 30px; height: 60px; background: url(/paper-clip.png) no-repeat; /* фоновое изображение для элемента*/ }

РЕЗУЛЬТАТ В БРАУЗЕРЕ:

    ПРИМЕР

Картинные рамы




Так можно сделать наложение графических элементов поверх изображений. Заменим фоновый рисунок на художественную рамку и с помощью свойств top, left, widht, height отрегулируем размеры и расположение.



.frame a:before { position: absolute; content: ' '; top: -22px; left: -23px; width: 216px; height: 166px; background: url(/frame.png) no-repeat; /* фоновое изображение для элемента*/ }

РЕЗУЛЬТАТ В БРАУЗЕРЕ:

    ПРИМЕР