Создаем фото-слайдшоу при помощи CSS3

Главная

Статьи

Верстка сайтов

18.01.2012 00:00

Создаем фото-слайдшоу при помощи CSS3

Сегодня мы покажем вам, как создать фото-слайдшоу при помощи только CSS. Идея состоит в использовании фоновых изображений для панелей и анимирование их при нажатии на название. Для навигации мы будем использовать радио-кнопки с лэйблами используя обобщенный родственный комбинатор (the general sibling selector).

Красивые изображения, используемые в примерах, принадлежат Joanna Kustra, используются они на условиях лицензии Attribution-NonCommercial 3.0 Unported Creative Commons License.

Пожалуйста, обратите внимание: результат этого урока будет работать только в браузерах поддерживающих CSS переходы и анимацию.

HTML-разметка

HTML будет состоять из трех основных частей: радио-кнопок с метками, контейнера с панелями и их "ломтиками" для каждого изображения и названия. Контейнер с классом c-bgimg содержит блоки для каждой из панелей, а внутри мы разместим теги span для каждого отдельного изображения. Итак, первая группа будет состоять из четырех "ломтиков", каждый из которых это одно изображение. Изображение будет вставлено как фон в крайней левой позиции. Вторая группа будет иметь еще четыре "ломтика", но при этом позиция фона будет немного смещена, так чтобы была видна следующая часть соответствующего изображения:

<section class="cr-container">            

 <!-- радио-кнопки и метки -->

 <input id="select-img-1" name="radio-set-1" type="radio" class="cr-selector-img-1" checked/>

 <label for="select-img-1" class="cr-label-img-1">1</label>

 <input id="select-img-2" name="radio-set-1" type="radio" class="cr-selector-img-2" />

 <label for="select-img-2" class="cr-label-img-2">2</label>

 <input id="select-img-3" name="radio-set-1" type="radio" class="cr-selector-img-3" />

 <label for="select-img-3" class="cr-label-img-3">3</label>

 <input id="select-img-4" name="radio-set-1" type="radio" class="cr-selector-img-4" />

 <label for="select-img-4" class="cr-label-img-4">4</label>

 <div class="clr"></div>    

 <!-- панели -->

 <div class="cr-bgimg">

 <div>

 <span>Slice 1 - Image 1</span>

 <span>Slice 1 - Image 2</span>

 <span>Slice 1 - Image 3</span>

 <span>Slice 1 - Image 4</span>

 </div>

 <div>

 <span>Slice 2 - Image 1</span>

 <span>Slice 2 - Image 2</span>

 <span>Slice 2 - Image 3</span>

 <span>Slice 2 - Image 4</span>

 </div>

 <div>

 <span>Slice 3 - Image 1</span>

 <span>Slice 3 - Image 2</span>

 <span>Slice 3 - Image 3</span>

 <span>Slice 3 - Image 4</span>

 </div>

 <div>

 <span>Slice 4 - Image 1</span>

 <span>Slice 4 - Image 2</span>

 <span>Slice 4 - Image 3</span>

 <span>Slice 4 - Image 4</span>

 </div>

 </div>

 <!-- названия -->

 <div class="cr-titles">

 <h3>

 <span>Serendipity</span>

 <span>What you've been dreaming of</span>

 </h3>

 <h3>

 <span>Adventure</span>

 <span>Where the fun begins</span>

 </h3>

 <h3>

 <span>Nature</span>

 <span>Unforgettable eperiences</span>

 </h3>

 <h3>

 <span>Serenity</span>

 <span>When silence touches nature</span>

 </h3>

 </div>

</section>

Тег H3 для названия будет содержать два тега span, один для основного заголовка и один для подзаголовока.

Теперь перейдем к стилям

CSS

Я опускаю все префиксы браузеров, но вы, конечно, можете найти их в исходных файлах.
Мы рассмотрим стили для первого примера.

Первой нашей целью будет сокрытие радио-кнопок при помощи тега label. В веб-браузерах при нажатии на label соответствующий флажок или переключатель автоматически становится выбранным, это мы и используем. Получая ID, мы можем использовать атрибут for = idref тега label, указывающий на соответствующую радио-кнопку.

Во-вторых, мы хотим поместить все фоновые изображения правильно, в-третьих, мы хотим показать соответствующие ломтики изображения и название при нажатии на тег label.

Итак, давайте сначала зададим стили для контейнера. Создадим для него белую рамку с тонкими тенями:

.cr-container{

 width: 600px;

 height: 400px;

 position: relative;

 margin: 0 auto;

 border: 20px solid #fff;

 box-shadow: 1px 1px 3px rgba(0,0,0,0.1);

}

Так как мы хотим использовать обобщенный родственный комбинатор (the general sibling selector) для того, чтобы "достать" правый ломтик изображения и название, мы должны поместить теги label, перед этими контейнерами. Давайте убедимся, что они находятся в верхнем слое (z-index) и сместим их положение немного вниз, добавив верхний отступ равный 350px;

.cr-container label{

 font-style: italic;

 width: 150px;

 height: 30px;

 cursor: pointer;

 color: #fff;

 line-height: 32px;

 font-size: 24px;

 float:left;

 position: relative;

 margin-top: 350px;

 z-index: 1000;

}

Теперь украсим label, добавив круги. Мы создадим псевдо элемент и поместим его в центре за текстом:

.cr-container label:before{

 content:'';

 width: 34px;

 height: 34px;

 background: rgba(130,195,217,0.9);

 position: absolute;

 left: 50%;

 margin-left: -17px;

 border-radius: 50%;

 box-shadow: 0px 0px 0px 4px rgba(255,255,255,0.3);

 z-index:-1;

}

Для того, чтобы создать разделение между панелями мы используем маленькую хитрость. Мы создадим еще один псевдо-элемент для лейбла и растянем его по всей панели. Используя градиент, мы заставим линию "исчезнуть" в верхней части:

.cr-container label:after{

 width: 1px;

 height: 400px;

 content: '';

 background: linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);

 position: absolute;

 bottom: -20px;

 right: 0px;

}

Последняя панель не должна иметь эту линию, поэтому мы просто зададим тут ширину равную 0:

.cr-container label.cr-label-img-4:after{

 width: 0px;

} 

Теперь, когда мы уже позаботились о внешнем виде лэйблов, мы можем скрыть input-ы:

.cr-container input{

 display: none;

} 

Всякий раз, когда мы нажимаем на лэйбл, мы выделяем соответствующий input. Теперь мы можем получать соответствующий лэйбл при помощи обобщенного родственного комбинатора (~). Таким образом, мы будем менять цвет "выбраных" лэйблов:

.cr-container input.cr-selector-img-1:checked ~ label.cr-label-img-1,

.cr-container input.cr-selector-img-2:checked ~ label.cr-label-img-2,

.cr-container input.cr-selector-img-3:checked ~ label.cr-label-img-3,

.cr-container input.cr-selector-img-4:checked ~ label.cr-label-img-4{

 color: #68abc2;

}

Мы будем также изменять цвет фона и тень псевдо-элемента в виде круга:

.cr-container input.cr-selector-img-1:checked ~ label.cr-label-img-1:before,

.cr-container input.cr-selector-img-2:checked ~ label.cr-label-img-2:before,

.cr-container input.cr-selector-img-3:checked ~ label.cr-label-img-3:before,

.cr-container input.cr-selector-img-4:checked ~ label.cr-label-img-4:before{

 background: #fff;

 box-shadow: 0px 0px 0px 4px rgba(104,171,194,0.6);

}

Контейнер для панели будет занимать всю ширину и будет позиционироваться абсолютно. Этот контейнер будет использоваться в дальнейшем для того, чтобы установить фоновое изображение для выбранного пункта. Мы должны сделать это для того, чтобы изображение отображалось по умолчанию. Поэтому мы также добавим некоторые свойства для фона:

.cr-bgimg{

 width: 600px;

 height: 400px;

 position: absolute;

 left: 0px;

 top: 0px;

 z-index: 1;

 background-repeat: no-repeat;

 background-position: 0 0;

}

Поскольку у нас есть четыре панели/изображений, одна панель будет иметь ширину 150 пикселей (600 разделить на 4). Для панелей установим свойство float:left, а также overflow: hidden, так как мы не хотим, чтобы ломтики были видны, когда мы перелистываем их:

.cr-bgimg div{

 width: 150px;

 height: 100%;

 position: relative;

 float: left;

 overflow: hidden;

 background-repeat: no-repeat;

}

Каждый span c ломтиком будет позиционироваться абсолютно и на начальном этапе они будут скрыты:

.cr-bgimg div span{

 position: absolute;

 width: 100%;

 height: 100%;

 top: 0px;

 left: -150px;

 z-index: 2;

 text-indent: -9000px;

}

Теперь, давайте позаботимся о фоне контейнера с изображением и соответствующими ломтиками изображения:

.cr-container input.cr-selector-img-1:checked ~ .cr-bgimg,

.cr-bgimg div span:nth-child(1){

 background-image: url(../images/1.jpg);

}

.cr-container input.cr-selector-img-2:checked ~ .cr-bgimg,

.cr-bgimg div span:nth-child(2){

 background-image: url(../images/2.jpg);

}

.cr-container input.cr-selector-img-3:checked ~ .cr-bgimg,

.cr-bgimg div span:nth-child(3){

 background-image: url(../images/3.jpg);

}

.cr-container input.cr-selector-img-4:checked ~ .cr-bgimg,

.cr-bgimg div span:nth-child(4){

 background-image: url(../images/4.jpg);

}

Нам также необходимо задать правильную позицию фона ломтиков в зависимости от панели:

.cr-bgimg div:nth-child(1) span{

 background-position: 0px 0px;

}

.cr-bgimg div:nth-child(2) span{

 background-position: -150px 0px;

}

.cr-bgimg div:nth-child(3) span{

 background-position: -300px 0px;

}

.cr-bgimg div:nth-child(4) span{

 background-position: -450px 0px;

}

Когда мы нажимаем на лэйбл, мы просто перемещаем все ломтики в право:

.cr-container input:checked ~ .cr-bgimg div span{

 animation: slideOut 0.6s ease-in-out;

}

@keyframes slideOut{

 0%{

 left: 0px;

 }

 100%{

 left: 150px;

 }

}

... все, кроме ломтиков с соответствующим фоновым изображением. Эти, будут сдвигаться с -150px до 0px:

.cr-container input.cr-selector-img-1:checked ~ .cr-bgimg div span:nth-child(1),

.cr-container input.cr-selector-img-2:checked ~ .cr-bgimg div span:nth-child(2),

.cr-container input.cr-selector-img-3:checked ~ .cr-bgimg div span:nth-child(3),

.cr-container input.cr-selector-img-4:checked ~ .cr-bgimg div span:nth-child(4)

{

 transition: left 0.5s ease-in-out;

 animation: none;

 left: 0px;

 z-index: 10;

}

И последнее, мы хотим задать стили для h3 элементов заголовков. H3 будет иметь переход непрозрачности и, как только мы выбираем соответствующий label/input, непрозрачность изменится с 0 до 1:

.cr-titles h3{

 position: absolute;

 width: 100%;

 text-align: center;

 top: 50%;

 z-index: 10000;

 opacity: 0;

 color: #fff;

 text-shadow: 1px 1px 1px rgba(0,0,0,0.1);

 transition: opacity 0.8s ease-in-out;

}

.cr-titles h3 span:nth-child(1){

 font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;

 font-size: 70px;

 display: block;

 letter-spacing: 7px;

}

.cr-titles h3 span:nth-child(2){

 letter-spacing: 0px;

 display: block;

 background: rgba(104,171,194,0.9);

 font-size: 14px;

 padding: 10px;

 font-style: italic;

 font-family: Cambria, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;

}

.cr-container input.cr-selector-img-1:checked ~ .cr-titles h3:nth-child(1),

.cr-container input.cr-selector-img-2:checked ~ .cr-titles h3:nth-child(2),

.cr-container input.cr-selector-img-3:checked ~ .cr-titles h3:nth-child(3),

.cr-container input.cr-selector-img-4:checked ~ .cr-titles h3:nth-child(4){

 opacity: 1;

}

Если вы не хотите использовать трюк с лэйблами на мобильных устройствах, то можно, например, использовать media:

@media screen and (max-width: 768px) {

 .cr-container input{

 display: inline;

 width: 24%;

 margin-top: 350px;

 z-index: 1000;

 position: relative;

 }

 .cr-container label{

 display: none;

 }

}