Building Simple Image Slider Using Pure CSS3

Published by on

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.

    1. 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.
    2. :target Selector

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 :target selector can be used to style the current active target element.

    1. :before and :after Selector
      The :before selector inserts content before the selected element(s). The :after selector inserts content after the selected element(s).
    2. ~ (Tilde Selector)

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.

  1. 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

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.

[sourcecode lang=”html”]
<html>
<head>
<title>CSS3 Image Slider</title>
</head>
<body>
<div id="slider"></div>
</body>
</html>
[/sourcecode]

 

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.

[sourcecode lang=”css”]
#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);
}
[/sourcecode]

Now, our stage looks like below image.

Stage Preview

Stage Preview

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.

[sourcecode lang=”css”]
#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;
}
[/sourcecode]

Move the second drop shadow to the right.

[sourcecode lang=”css”]
#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);
}
[/sourcecode]

Now, the stage looks like below image:

Drop Shadow on Stage

Drop Shadow on Stage

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.

[sourcecode lang=”html” highlight=”9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25″]
<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>
[/sourcecode]

Add style to control buttons.

[sourcecode lang=”css”]
#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;
}
[/sourcecode]

Now, our slider will look like image bellow.

Style Control Button

Style Control Button

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.

[sourcecode lang=”html” highlight=”7,8,9,10,11″]
<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>
[/sourcecode]

Now, we give style to the images.

[sourcecode lang=”css”]
#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;
}
[/sourcecode]

 

Make The Image Slidding When Control Button Clicked

We’ll make the slider to change active image by using :target property

[sourcecode lang=”css”]
#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);
}
[/sourcecode]

 

Make The Control Buttons Selected When The Button Clicked

[sourcecode lang=”css”]
#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;
}
[/sourcecode]

[sourcecode lang=”css”]
#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;
}
[/sourcecode]

 

Make First Image Appear When Page Loaded

[sourcecode lang=”css”]
#slider img#one {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
[/sourcecode]

[sourcecode lang=”css”]
#slider ul li a[href="#one"] {
background: #777;
}
[/sourcecode]

Final Image Slider

Final Image Slider

 

Final Source Codes

Below the final source codes. Save it as HTML file and open it on your favorite browser.

[sourcecode lang=”css”]
<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>
[/sourcecode]

Categories: AndroidCSS
Tags:

0 Comments

Leave a Reply

Avatar placeholder

Related Posts

Memahami Konsep Utility-first dalam Tailwind CSS Prinsip Dasar dan Penerapannya
CSS

Memahami Konsep Utility-first dalam Tailwind CSS: Prinsip Dasar dan Penerapannya

I. Pendahuluan A. Pengenalan tentang Tailwind CSS Tailwind CSS adalah sebuah framework CSS yang mengadopsi pendekatan utility-first dalam penulisan kode CSS. Dibandingkan dengan pendekatan tradisional yang menggunakan banyak komponen primitif, Tailwind CSS memungkinkan pengembang untuk Read more…

Mengenal Tailwind CSS Membangun Antarmuka Web yang Bersih dan Responsif
CSS

Mengenal Tailwind CSS: Membangun Antarmuka Web yang Bersih dan Responsif

I. Pendahuluan Pengenalan tentang Tailwind CSS Tailwind CSS adalah sebuah framework CSS yang sangat fleksibel dan dapat disesuaikan, yang memungkinkan pengembang untuk membangun antarmuka web dengan cepat dan efisien. Berbeda dengan framework CSS tradisional yang Read more…

CSS

Menampilkan Grafik Dengan Bootstrap Dan ChartJS

Pada kesempatan kali ini, kita akan membuat sebuah grafik sederhana menggunakan bootstrap dan ChartJS. Langkah pertama yang akan kita lakukan adalah membuat struktur dasar dari file html dengan menambahkan CDN (Content Delivery Network) dari library Read more…