Сегодня я собираюсь поделиться несколькими способами декорирования галереи без использования JavaScript. Эти результаты могут быть достигнуты при помощи псевдо-элементов :before или :after, а также css-трансформации. Элемент :before наиболее часто используется для добавления дополнительных элементов или содержания. Давайте посмотрим прямо сейчас как его использовать для декорирования изображений.
HTML
Ниже приведен пример разметки галереи, она представляет собой обычный список <ul>.
<ul class="gallery clip">
<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>CSS
Ниже базовые стиля для галереи. Ключевым моментом является то, что определено относительное позиционирование.
.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;
}Элемент :before
Теперь определим контейнер размером 30 на 60 пикселей с фоновым изображением в виде скрепки при помощи элемента :before. Обратите внимание, что свойство content должно быть пустым в CSS. Без пустого свойства content контейнер не появится.
.clip a:before {
position: absolute;
content: ' ';
top: -5px;
left: -4px;
width: 30px;
height: 60px;
background: url(paper-clip.png) no-repeat;
}Художественная рамка
Вы можете использовать этот способ, чтобы добавить любой графический элемент поверх изображения. В этом примере, я просто заменил фоновое изображение на художественныу рамку и отрегулировал размер и положение.
.frame a:before {
position: absolute;
content: ' ';
top: -22px;
left: -23px;
width: 216px;
height: 166px;
background: url(frame.png) no-repeat;
}HTML5-галерея
Давайте создадим более продвинутую галерею с помощью HTML5. В приведенном ниже примере, я использую тег <figure> в качестве обертки изображения, а тег <figcaption> для подписи изображения.
<ul class="gallery tape">
<li>
<figure>
<img src="sample-4.jpg" alt="image">
<figcaption>Название</figcaption>
</figure>
</li>
<li>
<figure>
<img src="sample-5.jpg" alt="image">
<figcaption>Название</figcaption>
</figure>
</li>
<li>
<figure> <img src="sample-6.jpg" alt="image">
<figcaption>Название</figcaption>
</figure>
</li>
</ul>CSS
В CSS, я добавил два элемента :before: один для элемента <figure> и еще один для элемента <li>. Overlay.png (маска изображения) применяется для элемента figure:before, а изображение ленты - для элемента a:before.
.tape li {
width: 170px;
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 a: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;
}
.tape a:before {
position: absolute;
z-index: 2;
content: ' ';
top: -12px;
left: 50%;
width: 115px;
height: 32px;
margin-left: -57px;
background: url(tape.png) no-repeat;
}CSS3 Transform
В этой галереи я добавил фон в виде пробкового дерева и использовал свойство transform, чтобы повернуть изображение.
.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
Чтобы сделать повороты изображений рандомными и более естественными, я применил трансформацию с разным углом наклона с помощью свойства 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);
}
- Подпись автора