Украшаем CSS галерею

Сегодня я собираюсь поделиться несколькими способами декорирования галереи без использования 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 контейнер не появится.

:before элемент

.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> для подписи изображения.

HTML5 галерея

<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.

css image

.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);
}

transform gallery

Перевод статьи с webdesignerwall.com


Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

You have no rights to post comments