Создаем слайдер при помощи только CSS3

Главная

Статьи

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

23.11.2011 00:00

css3 slider

Создание слайдера - это отличный способ сделать сайт более динамичным. Как правило, слайдеры создают при помощи jQuery или какой-либо другой JavaScript-библиотеки. Тем не менее, с появлением CSS3, я покажу вам как создать его используя только CSS.

Онлайн-демо

HTML

<div id="content-slider">

 <div id="content">

 <div id="content-inner-1">

 <div id="content-inner-2">

 <div id="content-inner-3">

 <div id="content-inner-4">

 <div id="content-inner-5">

 <div id="content-inner-6">

 <div id="content-inner">

 <div class="page" id="page1">

 <img src="images/test1.jpg" alt="test1" title="test1">

 <div class="page-info" id="info1">

 <h2>Страница 1</h2>

 <div class="page-text">Lorem ipsum dolor sit amet, consectur whatever blah.</div>

 </div>

 </div>

 <div class="page" id="page2">

 <img src="images/test2.jpg" alt="test2" title="test2">

 <div class="page-info" id="info2">

 <h2>Страница 2</h2>

 <div class="page-text">Lorem ipsum dolor sit amet, consectur whatever blah.</div>

 </div>

 </div>

 <div class="page" id="page3">

 <img src="images/test3.jpg" alt="test3" title="test3">

 <div class="page-info" id="info3">

 <h2>Страница 3</h2>

 <div class="page-text">Lorem ipsum dolor sit amet, consectur whatever blah.</div>

 </div>

 </div>

 <div class="page" id="page4">

 <img src="images/test4.jpg" alt="test4" title="test4">

 <div class="page-info" id="info4">

 <h2>Страница 4</h2>

 <div class="page-text">Lorem ipsum dolor sit amet, consectur whatever blah.</div>

 </div>

 </div>

 <div class="page" id="page5">

 <img src="images/test5.jpg" alt="test5" title="test5">

 <div class="page-info" id="info5">

 <h2>Страница 5</h2>

 <div class="page-text">Lorem ipsum dolor sit amet, consectur whatever blah.</div>

 </div>

 </div>

 <div class="page" id="page6">

 <img src="images/test6.jpg" alt="test6" title="test6">

 <div class="page-info" id="info6">

 <h2>Страница 6</h2>

 <div class="page-text">Lorem ipsum dolor sit amet, consectur whatever blah.</div>

 </div>

 </div>

 </div>       

 </div>

 </div>

 </div>

 </div>

 </div>

 </div>

 </div>

 <ul id="nav">

 <li class="button" id="button1"><a href="#content-inner-1"></a></li>

 <li class="button" id="button2"><a href="#content-inner-2"></a></li>

 <li class="button" id="button3"><a href="#content-inner-3"></a></li>

 <li class="button" id="button4"><a href="#content-inner-4"></a></li>

 <li class="button" id="button5"><a href="#content-inner-5"></a></li>

 <li class="button" id="button6"><a href="#content-inner-6"></a></li>

 </ul>

 </div>

Согласен, что выглядит страшно. Очень страшно. Помните, что это не будет самой семантической вещью на планете. Теперь, позвольте мне объяснить.

У нас есть div "content-slider", который содержит все содержимое. Мы просто устанавливаем для него "margin: 0 auto" и забываем о нем.

Затем, у нас есть два раздела: div "content" и ul "nav". Div content содержит все наши страницы, и ul "nav", который позволяет нам получать доступ к разным страницам.

Теперь, прямо внутри div "content", мы добавляем 6 вложенных дивов: начиная с "content-inner-1" до "content-inner-6". Эти 6 дивов делают все основную работу, как именно, я объясню в дальнейшем.

CSS

#content-slider {

font-family: arial;

width: 640px;

margin: 0 auto;

margin-top: 100px;

}

 #content {

overflow: hidden;

width: 640px;

height: 480px;

-webkit-box-shadow: 0px 0px 50px 10px #c9c9c9;

-moz-box-shadow: 0px 0px 50px 10px #c9c9c9;

box-shadow: 0px 0px 50px 10px #c9c9c9;

}

 #content-inner {

width:10000px;

height: 480px;

}

 .page {

width: 640px;

height: 480px;

float: left;

}

Как я уже сказал, все что мы сделали с div "content-slider" это поместили его по центру страницы, и сдвинули его на 100px от верхней границы страницы.

Стили для div "content" очень важны. Мы установили ему "overflow: hidden" - это гарантирует, что слайды будут невидимыми, пока они не будут выбраны.

Теперь, div "content-inner", который содержит все страницы. Именно по этой причине он имеет ширину 10 000 px. Обычно, Javascript позволяет изменять и устанавливать правильную ширину, но в данном случае мы не используем Javascript.

Страницы имеют ширину и высоту, и они располагаются друг за другом, для этого используем правило float:left.

Теперь напишем некоторые общие стили, для блоков "page-info", и "nav".

.page-info {

height: 90px;

background-color: rgba(99, 99, 99, 0.6);

position: relative;

margin-top: 0px;

bottom: 103px;

color: #dedede;

padding-left: 20px;

padding-top: 10px;

}

 .page-info h2 {

font-size: 21px;

margin-bottom: 10px;

margin-top: 0px;

color: #fafafa;

}

 .page-text {

font-size: 15px;

}

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

Далее, мы добавим некоторые интересные CSS3-стили для кнопок.

.button {

float: left;

background: #bababa;

width: 16px;

height: 16px;

-webkit-border-radius: 8px;

-moz-border-radius: 8px;

border-radius: 8px;

margin-left: 5px;

margin-right: 5px;

}

 .button:hover {

-webkit-box-shadow: inset 0px 0px 2px 2px #d4d4d4;

-moz-box-shadow: inset 0px 0px 2px 2px #d4d4d4;

box-shadow: inset 0px 0px 2px 2px #d4d4d4;

}

 .button:active {

-webkit-box-shadow: inset 0px 0px 2px 2px #7a7a7a;

-moz-box-shadow: inset 0px 0px 2px 2px #7a7a7a;

box-shadow: inset 0px 0px 2px 2px #7a7a7a;

}

 .button a {

display: block;

width: 16px;

height: 16px;

}

Мы сделали кнопки круглыми, и дабавили им падающие тени.

Теперь я объясню, как это все будет работать.

Используя псевдо-селектор CSS3 :target, мы можем устанавливать стили элементов, которые находятся по ссылке. Например:

#example {

visibility: hidden;

}

 #example:target {

visibility: visible;

}

Теперь, если мы были по адресу, такому как, например, http://www.example.com/index.html#example стили с :target выше, были бы применены. И в этом случае, div "example" будет виден.

Используя это, мы можем имитировать функцию JavaScript click. Если пользователь нажимает на ссылку, указывающую на "http://www.example.com/index.html#example", то стиль будет применяться к блоку "example".

В нашем случае, мы будем использовать ":target", чтобы сделать наш контент-слайдер работающим. Когда пользователь нажимает на любую из шести кнопок в меню навигации, "content-inner" будет сдвигаться в соответствующее положение, точно также как и при использовании JavaScript.

Вот код:

#content-inner-1:target #content-inner {

-webkit-transition: all 400ms ease;

-moz-transition: all 400ms ease;

-o-transition: all 400ms ease;

transition: all 400ms ease;

margin-left: 0px;

}

 #content-inner-2:target #content-inner {

-webkit-transition: all 400ms ease;

-moz-transition: all 400ms ease;

-o-transition: all 400ms ease;

transition: all 400ms ease;

margin-left: -640px;

}

 #content-inner-3:target #content-inner {

-webkit-transition: all 400ms ease;

-moz-transition: all 400ms ease;

-o-transition: all 400ms ease;

transition: all 400ms ease;

margin-left: -1280px;

}

 #content-inner-4:target #content-inner {

-webkit-transition: all 400ms ease;

-moz-transition: all 400ms ease;

-o-transition: all 400ms ease;

transition: all 400ms ease;

margin-left: -1920px;

}

 #content-inner-5:target #content-inner {

-webkit-transition: all 400ms ease;

-moz-transition: all 400ms ease;

-o-transition: all 400ms ease;

transition: all 400ms ease;

margin-left: -2560px;

}

 #content-inner-6:target #content-inner {

-webkit-transition: all 400ms ease;

-moz-transition: all 400ms ease;

-o-transition: all 400ms ease;

transition: all 400ms ease;

margin-left: -3200px;

}

Заключение

У нас есть 6 "content-inner-[number]" дивов, и каждый div соответствует странице. 6 страниц = 6 дивов.

Div "content-inner" является дочерним для каждого "content-inner-[number]" div-а, поэтому когда любой из 6 "content-inner-[number]" вызывается, мы можем установить соответствующие стили для "content-inner".

Так как каждая страница имеет ширину 640px, мы просто устанавливаем margin-left для div-a "content-inner" кратный 640.

Чтобы сделать ":target" стили рабочими, мы должны иметь ссылки, указывающие на них.

Для того чтобы действительно оживить "content-inner", мы создаем для него обычную CSS3-анимацию с использованием префиксов для разных браузеров.

Ну вот всё, мы имеем полностью функциональный, хотя и не семантичный, слайдер.