Слайдер для сайта с помощью CSS3

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

 

ДЕМО

ИСХОДНИКИ

 

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

Шаг 1. HTML

Для начала мы создаем простую разметку, в которой будут помещены радио-кнопки:

 <figure>
 <img src="01_Fabio_Basile.jpg"/>
 <figcaption>
 <h4>Fabio Basile</h4>
 <nav role='navigation'>
 <p>iPhone 6 Infinity</p>
 <ul>
 <li><a href="#" class="entypo-dribbble"></a></li>
 <li><a href="#" class="entypo-twitter"></a></li>
 </ul>
 </nav>
 </figcaption>
 </figure>

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

Шаг 2. CSS

Со стилями все еще проще, для начала нам необходимо определить общие стили контейнера, затем нам необходимо установить тени, рамки, и заливку с радио-кнопками:

*, *:before, *:after {
 margin:0;
 padding:0;
 -webkit-box-sizing:border-box;
 -moz-box-sizing:border-box;
 box-sizing:border-box;
}
#gal {
 position:relative;
 width:600px;
 height:300px;
 margin:0 auto;
 top:100px;
 background:white;
 -webkit-box-shadow:0px 0px 0px 10px white,
 5px 5px 0px 10px rgba(0,0,0,0.1);
 -moz-box-shadow:0px 0px 0px 10px white,
 5px 5px 0px 10px rgba(0,0,0,0.1);
 box-shadow:0px 0px 0px 10px white,
 5px 5px 0px 10px rgba(0,0,0,0.1);
 -webkit-transform:translate3d(0, 0, 0);
 -moz-transform: translate3d(0, 0, 0);
 -ms-transform: translate3d(0, 0, 0);
 -o-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
}
#gal:after {
 content:'';
 position:absolute;
 bottom:24px;
 right:0;
 left:0;
 width:100%;
 height:1px;
 background:rgba(255,255,255,0.35);
 z-index:3;
}
#gal ul {list-style-type:none;}
input[type="radio"], input[type="radio"] + label {
 position:absolute;
 bottom:15px;
 display:block;
 width:20px;
 height:20px;
 -webkit-border-radius:50%;
 -moz-border-radius:50%;
 border-radius:50%;
 cursor:pointer;
}
input[type="radio"] {
 opacity:0;
 z-index:9;
}
input[value="one"], input[value="one"] + label {left:20px;}
input[value="two"], input[value="two"] + label {left:128px;}
input[value="three"], input[value="three"] + label {left:236px;}
input[value="four"], input[value="four"] + label {left:344px;}
input[value="five"], input[value="five"] + label {left:452px;}
input[value="six"], input[value="six"] + label {right:20px;}
input[type="radio"] + label {
 background:rgba(255,255,255,0.35);
 z-index:7;
 -webkit-box-shadow:0px 0px 0px 0px rgba(255,255,255,0.15);
 -moz-box-shadow:0px 0px 0px 0px rgba(255,255,255,0.15);
 box-shadow:0px 0px 0px 0px rgba(255,255,255,0.15);
 -webkit-transition:all .3s;
 -moz-transition:all .3s;
 -o-transition:all .3s;
 transition:all .3s;
}
[class*="entypo-"]:before {
 position:absolute;
 font-family: 'entypo', sans-serif;
}
figure[class*="entypo-"]:before {
 left:10px;
 top:5px;
 font-size:2rem;
 color:rgba(255,255,255,0);
 z-index:1;
 -webkit-transition:color .1s;
 -moz-transition:color .1s;
 -o-transition:color .1s;
 transition:color .1s;
}
a[class*="entypo-"]:before {
 top:8px;
 left:9px;
 font-size:1.5rem;
 color:white;
}
a:hover[class*="entypo-"]:before {
 color:white;
}
figure, figure img, figcaption {
 position:absolute;
 top:0;
 right:0;
}
figure {
 bottom:0;
 left:0;
 width:600px;
 height:300px;
 display:block;
 overflow:hidden;
}
figure img {
 bottom:0;
 left:0;
 display:block;
 width:600px;
 height:300px;
 z-index:1;
 -webkit-transform:translateX(600px);
 -moz-transform:translateX(600px);
 -ms-transform:translateX(600px);
 -o-transform:translateX(600px);
 transform:translateX(600px);
 -webkit-transition:all .15s .15s, z-index 0s;
 -moz-transition:all .15s .15s, z-index 0s;
 -o-transition:all .15s .15s, z-index 0s;
 transition:all .15s .15s, z-index 0s;
}

Полный исходник стилей можно посмотреть в стилях в архиве.

Вот и все. Готово!

---