Andrey Prikaznov 
How to Create a Pure CSS3 Slideshow
Email
The HTML5 Microzone is presented by DZone and Microsoft to bring you the most interesting and relevant content on emerging web standards. Experience all that the HTML5 Microzone has to offer on our homepage and check out the cutting edge web development tutorials on Script Junkie, Build My Pinned Site, and the HTML5 DevCenter.
Today we
will develop a cool CSS3 slideshow (without any JavaScript). The slideshow
will contain left and right navigation buttons, images, and a tracker bar.
We'll use left/right buttons or the extra tracker bar to navigate
through the images.
Here is our final result:
Live Demo
download package
Ok, download the example files and let's start coding !
Step 1. HTML
Here is the full html code for our slideshow.
index.html<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8" />
<title>Pure CSS3 Slideshow | Script Tutorials</title>
<link href="css/layout.css" rel="stylesheet" type="text/css" />
<link href="css/slideshow.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
<h2>Pure CSS3 Slideshow</h2>
<a href="http://www.script-tutorials.com/how-to-create-a-pure-css3-slideshow/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
</header>
<div class="container" id="container">
<!-- caps, non-existent items -->
<span id="slide1" class="cap"></span>
<span id="slide2" class="cap"></span>
<span id="slide3" class="cap"></span>
<span id="slide4" class="cap"></span>
<span id="slide5" class="cap"></span>
<ul class="slider">
<!-- left arrow -->
<li class="lArrow">
<a href="#slide5" class="a5"></a>
<a href="#slide4" class="a4"></a>
<a href="#slide3" class="a3"></a>
<a href="#slide2" class="a2"></a>
<a href="#slide1" class="a1"></a>
</li>
<!-- slides -->
<li class="slides">
<img src="images/0.jpg" alt="" class="g0" />
<img src="images/1.jpg" alt="" class="g1" />
<img src="images/2.jpg" alt="" class="g2" />
<img src="images/3.jpg" alt="" class="g3" />
<img src="images/4.jpg" alt="" class="g4" />
<img src="images/5.jpg" alt="" class="g5" />
</li>
<!-- right arrow -->
<li class="rArrow">
<a href="#slide5" class="a5"></a>
<a href="#slide4" class="a4"></a>
<a href="#slide3" class="a3"></a>
<a href="#slide2" class="a2"></a>
<a href="#slide1" class="a1"></a>
</li>
<!-- tracker -->
<li class="track">
<a href="#slide1" class="tr1"></a>
<a href="#slide2" class="tr2"></a>
<a href="#slide3" class="tr3"></a>
<a href="#slide4" class="tr4"></a>
<a href="#slide5" class="tr5"></a>
</li>
</ul>
</div>
</body>
</html>Step 2. CSS
Now – all CSS styles:
css/slideshow.cssspan.cap {
display:none;
}
ul.slider {
margin:0 auto;
height:455px;
list-style:none;
position:relative;
width:706px;
}
ul.slider li {
float:left;
-moz-transition: 1s;
-ms-transition: 1s;
-o-transition: 1s;
-webkit-transition: 1s;
transition: 1s;
}
ul.slider li.slides {
border:1px solid #888;
height:453px;
overflow:hidden;
position:relative;
width:604px;
z-index:10;
-moz-transition: 1s;
-ms-transition: 1s;
-o-transition: 1s;
-webkit-transition: 1s;
transition: 1s;
}
ul.slider li.slides img {
display:block;
left:50%;
opacity:0;
position:absolute;
top:0;
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
-o-transform: scale(0.5);
-webkit-transform: scale(0.5);
transform: scale(0.5);
-moz-transition: 1s;
-ms-transition: 1s;
-o-transition: 1s;
-webkit-transition: 1s;
transition: 1s;
}
ul.slider li.slides img.g1,
ul.slider li.slides img.g2,
ul.slider li.slides img.g3,
ul.slider li.slides img.g4,
ul.slider li.slides img.g5 {
margin-left:-302px
}
ul.slider li.lArrow,
ul.slider li.rArrow {
background-color:#bbb;
border:2px solid #888;
height:451px;
position:relative;
width:48px;
z-index:5;
}
ul.slider li.lArrow {
border-radius:100px 0 0 100px;
border-width:2px 0 2px 2px;
}
ul.slider li.rArrow {
border-radius:0 100px 100px 0;
border-width:2px 2px 2px 0;
}
ul.slider li.lArrow a,
ul.slider li.rArrow a {
display:block;
height:100%;
left:0;
position:absolute;
top:0;
width:50px;
}
ul.slider li.lArrow:hover {
background-color:#eee;
left:2px;
}
ul.slider li.rArrow:hover {
background-color:#eee;
left:-2px;
}
ul.slider li.track {
background-color:rgba(255,255,255,0.3);
clear:left;
height:25px;
margin-left:51px;
margin-top:-25px;
position:relative;
text-align:center;
width:604px;
z-index:20;
}
ul.slider li.track a {
background-color:#fff;
display:inline-block;
height:15px;
margin:5px;
width:10px;
border-radius:5px;
-moz-box-shadow:2px 1px 1px #000000;
-ms-box-shadow:2px 1px 1px #000000;
-webkit-box-shadow:2px 1px 1px #000000);
-o-box-shadow:2px 1px 1px #000000;
box-shadow:2px 1px 1px #000000;
}
ul.slider li.track a:hover {
background-color:#0f0;
}
span#slide1:target ~ ul.slider li.slides .g1,
span#slide2:target ~ ul.slider li.slides .g2,
span#slide3:target ~ ul.slider li.slides .g3,
span#slide4:target ~ ul.slider li.slides .g4,
span#slide5:target ~ ul.slider li.slides .g5 {
opacity:1;
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
ul.slider li.slides .g0 {
margin-left:-302px;
opacity:1;
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
span#slide1:target ~ ul.slider li.slides .g0,
span#slide2:target ~ ul.slider li.slides .g0,
span#slide3:target ~ ul.slider li.slides .g0,
span#slide4:target ~ ul.slider li.slides .g0,
span#slide5:target ~ ul.slider li.slides .g0 {
opacity:0;
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
-webkit-transform: scale(0);
transform: scale(0);
}
span#slide1:target ~ ul.slider li.track .tr1,
span#slide2:target ~ ul.slider li.track .tr2,
span#slide3:target ~ ul.slider li.track .tr3,
span#slide4:target ~ ul.slider li.track .tr4,
span#slide5:target ~ ul.slider li.track .tr5 {
background-color:#f00;
}
span#slide1:target ~ ul.slider li.lArrow a,
span#slide1:target ~ ul.slider li.rArrow a {z-index:10}
span#slide1:target ~ ul.slider li.rArrow .a2 {z-index:100}
span#slide1:target ~ ul.slider li.lArrow .a8 {z-index:100}
span#slide2:target ~ ul.slider li.lArrow a,
span#slide2:target ~ ul.slider li.rArrow a {z-index:10}
span#slide2:target ~ ul.slider li.rArrow .a3 {z-index:100}
span#slide2:target ~ ul.slider li.lArrow .a1 {z-index:100}
span#slide3:target ~ ul.slider li.lArrow a,
span#slide3:target ~ ul.slider li.rArrow a {z-index:10}
span#slide3:target ~ ul.slider li.rArrow .a4 {z-index:100}
span#slide3:target ~ ul.slider li.lArrow .a2 {z-index:100}
span#slide4:target ~ ul.slider li.lArrow a,
span#slide4:target ~ ul.slider li.rArrow a {z-index:10}
span#slide4:target ~ ul.slider li.rArrow .a5 {z-index:100}
span#slide4:target ~ ul.slider li.lArrow .a3 {z-index:100}
span#slide5:target ~ ul.slider li.lArrow a,
span#slide5:target ~ ul.slider li.rArrow a {z-index:10}
span#slide5:target ~ ul.slider li.rArrow .a6 {z-index:100}
span#slide5:target ~ ul.slider li.lArrow .a4 {z-index:100}The css for the page layout (layout.css) is not included in the article. But, as always, it's available in the download package.
Live Demo
download package
Conclusion
That's all -- really easy, isn’t it? The result was great as usual. I hope that our nice tips help you. Good luck!
Source: http://www.script-tutorials.com/how-to-create-a-pure-css3-slideshow/
(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)
HTML5 is the most dramatic step in the evolution of web standards. It incorporates features such as geolocation, video playback and drag-and-drop. HTML5 allows developers to create rich internet applications without the need for third party APIs and browser plug-ins. Under the banner of HTML5, modern web standards such as CSS3, SVG, XHR2, WebSockets, IndexedDB, and AppCache are pushing the boundaries for what a browser can achieve using web standards. This Microzone is supported by Microsoft, and it will delve into the intricacies of using these new web technologies and teach you how to make your websites compatible with all of the modern browsers.
