CSS is an acronym for Cascading Style Sheets, it is used to format web page look. The latest version of CSS is CSS3. This new version of CSS gives web developers more flexibility when styling the webpage. It comes with a set of new rules that make CSS3 better than the old version. CSS3 provides way to create an animation. In this tutorial, we’ll build simple image slider using pure CSS3.
CSS Overview
Before we start into deep explanation to create the slider, I’ll give some overview of CSS feature that is used to create the slider.
- Transform Property
The transform property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, skew, etc., elements. - :target Selector
- :before and :after Selector
The :before selector inserts content before the selected element(s). The :after selector inserts content after the selected element(s). - ~ (Tilde Selector)
- Vendor Specific Property
In order to make our slider runs cross browser, we must add vendor specific property by adding the following prefix into several CSS properties:- -moz-: Mozila Firefox
- -webkit-: Safari, Chrome (and other WebKit-based browsers)
- -ms-: Microsoft
- -o-: Opera
URLs with an # followed by an anchor name, link to a certain element within a document. The element being linked to is the target element. The
Tilde selector also called general sibling combination. The general sibling combinator selector is very similar to the adjacent sibling combinator selector. The difference is that that the element being selected doesn’t need immediately succeed the first element, but can appear anywhere after it.
Prepare the Stage
The stage of the slider is a div HTML tag where the slider takes place. We’ll create the stage which have 640px x 320px dimensions. The following HTML tags define the slider stage. We give id [cci]slider[/cci] to the stage.
<html>
<head>
<title>CSS3 Image Slider</title>
</head>
<body>
<div id="slider"></div>
</body>
</html>
Give Style to the Stage
After the stage has been created, now it’s time to give a style to the stage. At this step, we give dimension, margin, background and shadow to the stage.
#slider {
width: 640px;
height: 320px;
margin: 50px auto 0;
position: relative;
background: #fff;
/* give shadow to the stage*/
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
}
Now, our stage looks like below image.
Add Drop Shadow Effect at the Bottom of Stage
We’ll add a drop shadow effect to the stage at the bottom left and bottom right. The drop shadow that we used is simply a blank div element with the following style.
#slider:before, #slider:after {
content: '';
position: absolute;
width: 60%;
height: 20px;
/* Adding shadow to this content*/
-webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
-ms-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
-o-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
/* Transform the content*/
-webkit-transform: rotate(-4deg) skew(-10deg);
-moz-transform: rotate(-4deg) skew(-10deg);
-o-transform: rotate(-4deg) skew(-10deg);
-ms-transform: rotate(-4deg) skew(-10deg);
transform: rotate(-4deg) skew(-10deg);
left: 10px;
bottom: 13px;
z-index: -1;
}
Move the second drop shadow to the right.
#slider:after {
left: auto;
right: 10px;
-webkit-transform: rotate(4deg) skew(10deg);
-moz-transform: rotate(4deg) skew(10deg);
-o-transform: rotate(4deg) skew(10deg);
-ms-transform: rotate(4deg) skew(10deg);
transform: rotate(4deg) skew(10deg);
}
Now, the stage looks like below image:
Add Control Button
Control buttons is a set of buttons to control the slider. The button is used as a transition trigger for the slider. If user click a button, the slider will change the image on the stage.
<html>
<head>
<title>CSS3 Image Slider</title>
</head>
<body>
<div id="slider"></div>
<!-- Control buttons! -->
<ul>
<li>
<a href="#one"></a>
</li>
<li>
<a href="#two"></a>
</li>
<li>
<a href="#three"></a>
</li>
<li>
<a href="#four"></a>
</li>
<li>
<a href="#five"></a>
</li>
</ul>
</body>
</html>
Add style to control buttons.
#slider ul {
width: 140px;
height: 40px;
padding: 0 0 0 0;
position: absolute;
z-index: 10;
list-style: none;
left: 50%;
margin-left: -70px;
bottom: -60px;
}
#slider ul li:first-child {
margin-left: 16px;
}
#slider ul li {
float: left;
margin-right: 12px;
margin-top: 14px;
}
#slider ul li:last-child {
margin-right: 0;
}
#slider ul li a {
width: 12px;
height: 12px;
display: block;
outline: none;
border: none;
position: relative;
z-index: 2;
background: #aaa;
box-shadow: inset 0 1px 1px 0px rgba(0, 0, 0, 0.6), 0px 1px 1px 0px white;
-moz-box-shadow: inset 0 1px 1px 0px rgba(0, 0, 0, 0.6), 0px 1px 1px 0px white;
-webkit-box-shadow: inset 0 1px 1px 0px rgba(0, 0, 0, 0.6), 0px 1px 1px 0px white;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
#slider ul li a:hover {
background: #888;
}
Now, our slider will look like image bellow.
Add images
Images is the heart of our slider. You can download the images we used in this tutorial by downloading source code. The donwload button is located on the top.
<html>
<head>
<title>CSS3 Image Slider</title>
</head>
<body>
<!-- Images -->
<img id="one" src="1.jpg" />
<img id="two" src="2.jpg" />
<img id="three" src="3.jpg" />
<img id="four" src="4.jpg" />
<img id="five" src="5.jpg" />
<div id="slider"></div>
<!-- Control buttons! -->
<ul>
<li>
<a href="#one"></a>
</li>
<li>
<a href="#two"></a>
</li>
<li>
<a href="#three"></a>
</li>
<li>
<a href="#four"></a>
</li>
<li>
<a href="#five"></a>
</li>
</ul>
</body>
</html>
Now, we give style to the images.
#slider img {
position: absolute;
left: 0;
top: 0;
opacity: 0;
/* scale images*/
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
/* set transition*/
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
Make The Image Slidding When Control Button Clicked
We’ll make the slider to change active image by using :target property
#slider img:target {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
#slider img:not(:target){
opacity: 0;
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
Make The Control Buttons Selected When The Button Clicked
#one:target ~ ul li a[href="#one"],
#two:target ~ ul li a[href="#two"],
#three:target ~ ul li a[href="#three"],
#four:target ~ ul li a[href="#four"],
#five:target ~ ul li a[href="#five"] {
background: #777;
}
#two:target ~ ul li a[href="#one"],
#three:target ~ ul li a[href="#one"],
#four:target ~ ul li a[href="#one"],
#one:target ~ ul li a[href="#one"] {
background: #aaa;
}
Make First Image Appear When Page Loaded
#slider img#one {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
#slider ul li a[href="#one"] {
background: #777;
}
Final Source Codes
Below the final source codes. Save it as HTML file and open it on your favorite browser.
<html>
<head>
<title>CSS3 Image Slider</title>
<style>
body {
padding: 0;
margin: 0;
background: #ccc;
}
#slider {
width: 640px;
height: 320px;
margin: 50px auto 0;
position: relative;
background: #fff;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
}
#slider:before, #slider:after {
content: '';
position: absolute;
width: 60%;
height: 20px;
-webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
-ms-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
-o-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
-webkit-transform: rotate(-4deg) skew(-10deg);
-moz-transform: rotate(-4deg) skew(-10deg);
-o-transform: rotate(-4deg) skew(-10deg);
-ms-transform: rotate(-4deg) skew(-10deg);
transform: rotate(-4deg) skew(-10deg);
left: 10px;
bottom: 13px;
z-index: -1;
}
#slider:after {
left: auto;
right: 10px;
-webkit-transform: rotate(4deg) skew(10deg);
-moz-transform: rotate(4deg) skew(10deg);
-o-transform: rotate(4deg) skew(10deg);
-ms-transform: rotate(4deg) skew(10deg);
transform: rotate(4deg) skew(10deg);
}
#slider ul {
width: 140px;
height: 40px;
padding: 0 0 0 0;
position: absolute;
z-index: 10;
list-style: none;
left: 50%;
margin-left: -70px;
bottom: -60px;
}
#slider ul li:first-child {
margin-left: 16px;
}
#slider ul li {
float: left;
margin-right: 12px;
margin-top: 14px;
}
#slider ul li:last-child {
margin-right: 0;
}
#slider ul li a {
width: 12px;
height: 12px;
display: block;
outline: none;
border: none;
position: relative;
z-index: 2;
background: #aaa;
box-shadow: inset 0 1px 1px 0px rgba(0, 0, 0, 0.6), 0px 1px 1px 0px white;
-moz-box-shadow: inset 0 1px 1px 0px rgba(0, 0, 0, 0.6), 0px 1px 1px 0px white;
-webkit-box-shadow: inset 0 1px 1px 0px rgba(0, 0, 0, 0.6), 0px 1px 1px 0px white;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
#slider ul li a:hover {
background: #888;
}
#slider img {
position: absolute;
left: 0;
top: 0;
opacity: 0;
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
#slider img:target {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
#slider img#one {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
#slider img:not(:target){
opacity: 0;
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
#slider ul li a[href="#one"] {
background: #777;
}
#one:target ~ ul li a[href="#one"],
#two:target ~ ul li a[href="#two"],
#three:target ~ ul li a[href="#three"],
#four:target ~ ul li a[href="#four"],
#five:target ~ ul li a[href="#five"] {
background: #777;
}
#two:target ~ ul li a[href="#one"],
#three:target ~ ul li a[href="#one"],
#four:target ~ ul li a[href="#one"],
#five:target ~ ul li a[href="#one"] {
background: #aaa;
}
</style>
</head>
<body>
<div id="slider">
<!-- Images -->
<img id="one" src="1.jpg" />
<img id="two" src="2.jpg" />
<img id="three" src="3.jpg" />
<img id="four" src="4.jpg" />
<img id="five" src="5.jpg" />
<!-- Control buttons! -->
<ul>
<li>
<a href="#one"></a>
</li>
<li>
<a href="#two"></a>
</li>
<li>
<a href="#three"></a>
</li>
<li>
<a href="#four"></a>
</li>
<li>
<a href="#five"></a>
</li>
</ul>
</div>
</body>
</html>