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 css bootstrap dan library chartjs seperti contoh dibawah ini :

<!DOCTYPE html&gt;
<html lang="en"&gt;
  <head&gt;

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"&gt;
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"&gt;</script&gt;


  </head&gt;
  <body&gt;

  </body&gt;
<footer&gt;

  </footer&gt;
</html&gt;

Kemudian, tambahkan script berikut ini kedalam tag <boody></body> :

<div class="container-fluid"&gt;
    <div class="row"&gt;

      <div class="col-md-12" style="background:rgb(192, 192, 102)"&gt;
        <canvas id="myChart" width="200" height="100"&gt;</canvas&gt;

      </div&gt;

    </div&gt;


  </div&gt;

Pada baris ke-2, terdapat class=”row”  yang merupakan kelas bootstrap untuk membuat sebuah baris. Dimana didalamnya terdapat tag <div> yang memiliki class=”col-md-12″ agar membuat sebuah kolom untuk perangkat medium/ laptop dengan ukuran masksimal (12) berdasarkan aturan grid system bootstrap. Selanjutnya pada baris ke-5 terdapat tag <canvas> yang memiliki atribut id=”myChart” sebagai penanda khusus, agar tag yang bersangkutan dapat dimanipulasi oleh perintah javascript yang akan kita tambahkan sebagai berikut :

  <script&gt;
  var ctx = document.getElementById("myChart").getContext('2d');
  var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132)',
                'rgba(54, 162, 235)',
                'rgba(255, 206, 86)',
                'rgba(75, 192, 192)',
                'rgba(153, 102, 255)',
                'rgba(255, 159, 64)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
  });
  </script&gt;

Letakkan perintah diatas didalam tag <footer></footer>. Pada script diatas terdapat variable ctx dimana nilainya diambil dari tag <canvas> melalui fungsi getElementById() dan ditambahkan fungsi getContext(“2d”) agar dapat membuat sebuah grafik didalam tag tersebut. Selanjutnya kita membuat object myChart dari class Chart yang telah disediakan oleh library chartjs. Parameter pertama dari class Chart diisi dengan variable ctx dan paramter kedua digunakan untuk memanipulasi tampilan dari grafiknya, baik dari segi warna, bentuk grafik dan juga isi datanya yang bisa kita padukan dengan database. Adapun parameter kedua ditulis dalam pemformatan JSON. Hasilnya akan terlihat seperti Ini :

Membuat Gallery Image Dengan HTML Dan CSS

Pada kesempatan kali ini kita akan membuat gallery Image dengan HTML dan CSS. Langkah Pertama, buat file dengan nama “sampleimage.html” kemudian tambahkan perintah sebagai berikut :

<html&gt;
<head&gt;
<style&gt;

</style&gt;
</head&gt;
<body&gt;

<div class="gallery"&gt;
  <a target="_blank" href="d.jpg"&gt;
    <img src="d.jpg" alt="Cinque Terre" width="600" height="400"&gt;
  </a&gt;
  <div class="desc"&gt;Add a description of the image here</div&gt;
</div&gt;

<div class="gallery"&gt;
  <a target="_blank" href="b.jpg"&gt;
    <img src="b.jpg" alt="Forest" width="600" height="400"&gt;
  </a&gt;
  <div class="desc"&gt;Add a description of the image here</div&gt;
</div&gt;

<div class="gallery"&gt;
  <a target="_blank" href="c.jpg"&gt;
    <img src="c.jpg" alt="Northern Lights" width="600" height="400"&gt;
  </a&gt;
  <div class="desc"&gt;Add a description of the image here</div&gt;
</div&gt;

<div class="gallery"&gt;
  <a target="_blank" href="d.jpg"&gt;
    <img src="d.jpg" alt="Mountains" width="600" height="400"&gt;
  </a&gt;
  <div class="desc"&gt;Add a description of the image here</div&gt;
</div&gt;

</body&gt;
</html&gt;

Hasilnya akan terlihat seperti ini :

Gambar akan ditampilkan secara vertikal. Hal ini disebabkan karena kita menambahkan tag <div></div>. Dimana tag <div> defaultnya memiliki sifat display block. Artinya tag yang bersifat block akan dicetak didalam baris baru. Oleh karena itu, kita menambahkan atribut class = “galery” yang nantinya akan kita gunakan sebagai selector di CSS agar dapat dimanipulasi tampilannya. Dalam hal ini, kita akan membuat agar gambar yang ditampilkan dapat sejajar dalam satu baru. Tambahkan perintah CSS ini kedalam tag <style></style> yang ada pada file “sampleimage.html” diatas. Adapun perintah CSSnya adalah sebagai Berikut:

div.gallery {
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 180px;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 15px;
  text-align: center;
}

Dari perintah diatas, terlihat bahwa agar dapat memaksa gambar di dalam tag <div></div> dapat sejajar dalam satu baris adalah menambahkan properti css, yaitu properti float : left. Dengan menambahkan properti ini, maka tag html yang displaynya bersifat block dapat dipaksa agar dapat bersebelahan dengan tag lainnya. Biasanya properti ini digunakan saat menampilkan tulisan yang sejajar dengan gambar disebelahnya. Hasil akhirnya akan terlihat seperti ini :

Membuat Form Dengan HTML5 Dan CSS3

Pada kesempatan ini, kita akan membuat form sederhana dengan HTML5 dan CSS3. Langkah pertama adalah membuat struktur dasar dari dokumen HTML5. Seperti perintah dibawah ini :

<!DOCTYPE html&gt;
<html &gt;
  <head&gt;
  
  
  </head&gt;
  <body&gt;


  </body&gt;
</html&gt;

Kemudian tambahkan perintah berikut didalam tag <body> </body>

<h3&gt;Latihan Membuat Form dengan HTML Dan CSS</h3&gt;

<div&gt;
  <form action="send.php"&gt;
    <label for="fname"&gt;Nama Depan</label&gt;
    <input type="text" id="fname" name="firstname" placeholder="Nama Anda.."&gt;

    <label for="lname"&gt;Nama Belakang</label&gt;
    <input type="text" id="lname" name="lastname" placeholder="Nama Belakang Anda.."&gt;

    <label for="country"&gt;Provinsi</label&gt;
    <select id="country" name="country"&gt;
      <option value="jabar"&gt;Jawa Barat</option&gt;
      <option value="jatim"&gt;Jawa Timur</option&gt;
      <option value="jateng"&gt;Jawa Tengah</option&gt;
    </select&gt;
  
    <input type="submit" value="Kirim"&gt;
  </form&gt;
</div&gt;

Perhatikan pada baris keempat, terdapat sebuah tag bernama form, dimana tag tersebut memiliki atribut action dengan value “send.php”. Atribut action digunakan untuk mengirimkan data form ketika form disubmit atau mengirimkan data dari form inputan saat tombol kirim diklik menuju script dengan nama “send.php”. Adapun bahasa pemprgoraman untuk mengolahnya dapat beragam seperti bahasa komputer PHP, ASP, JAVA dan lain lain. Selanjutnya perhatikan pada bagian ini :

<label for="fname"&gt;Nama Depan</label&gt;
    <input type="text" id="fname" name="firstname" placeholder="Nama Anda.."&gt;

Tag <label></label> digunakan untuk memberikan keterangan berupa teks pada setiap form input dengan memberikan atribut for. Adapun tag <input> digunakan untuk membuat kolom isian yang akan diisi oleh user. Pada tag <input> terdapat atribut type yang berfungsi sebagai penentu jenis inputan user, misal berupa teks, password, email dan seterusnya. Kemudian atribut yang tidak kalah penting adalah atribut name yang berfungsi sebagai penanda khusus form inputan yang nantinya agar dikenali sebagai variable tertentu oleh bahasa pemprograman web server. Untuk menampilkan menu dropdown kita dapat menggunakan tag-tag berikut ini :

  <select id="country" name="country"&gt;
      <option value="jabar"&gt;Jawa Barat</option&gt;
      <option value="jatim"&gt;Jawa Timur</option&gt;
      <option value="jateng"&gt;Jawa Tengah</option&gt;
    </select&gt;

Selanjutnya yang tidak kalah penting adalah perintah berikut ini :

<input type="submit" value="Kirim"&gt;

Pada bagian inilah form inputan yang telah kita buat akan dikirm menuju perintah “send.php” karena atribut type bernilai “submit”. Saat kita jalankan keseluruhan perintah diatas, hasilnya akan terlihat seperti ini :

Agar tampilan form diatas terlihat lebih baik. tambahkan perintah CSS diantara tag <style></style>, seperti yang terlihat pada script dibawah ini :

<!DOCTYPE html&gt;
<html&gt;
<style&gt;
input[type=text], select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type=submit] {
  width: 100%;
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}

div {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}
</style&gt;
<body&gt;

<h3&gt;Latihan Membuat Form dengan HTML Dan CSS</h3&gt;

<div&gt;
  <form action="send.php"&gt;
    <label for="fname"&gt;Nama Depan</label&gt;
    <input type="text" id="fname" name="firstname" placeholder="Nama Anda.."&gt;

    <label for="lname"&gt;Nama Belakang</label&gt;
    <input type="text" id="lname" name="lastname" placeholder="Nama Belakang Anda.."&gt;

    <label for="country"&gt;Provinsi</label&gt;
    <select id="country" name="country"&gt;
      <option value="jabar"&gt;Jawa Barat</option&gt;
      <option value="jatim"&gt;Jawa Timur</option&gt;
      <option value="jateng"&gt;Jawa Tengah</option&gt;
    </select&gt;

    <input type="submit" value="Kirim"&gt;
  </form&gt;
</div&gt;

</body&gt;
</html&gt;

Maka hasilnya Akan terlihat seperti ini :

Belajar Menggunakan HTML5 Canvas

Pada tutorial kali ini, kita akan belajar cara menggunakan HTML canvas. HTML canvas adalah salah satu fitur element baru yang terdapat pada versi HTML5.

Apakah Kegunaan dari Canvas ?

Canvas digunakan sebagai element HTML yang bisa digambar dengan perintah bahasa komputer javascript.

Membuat Canvas

untuk menggunakan Canvas, cukup dengan menambahkan tag <canvas> </canvas> . Sekarang kita buat sebuah struktur dasar dari halaman html dengan nama file belajarcanvas.html kemudian tambahkan tag canvas dengan tambahan atribut id, width, height pada tag canvas. Seperti contoh yang tertera dibawah ini :

<!DOCTYPE html&gt;
<html lang="en"&gt;
  <head&gt;

    <title&gt;HTML Canvas</title&gt;


  </head&gt;
  <body&gt;

    <canvas id="myCanvas" width="640" height="480" style="border:1px solid black;"&gt;
  </canvas&gt;
  </body&gt;
</html&gt;

Membuat Persegi Pada Canvas

Untuk dapat membuat sebuah garis. Pertama atribut id diatas akan digunakan untuk mendapatkan element html canvas. Dimana nantinya kita manipulasi element canvas tersbut dengan menyimpannya kedalam variable dengan nama “canvas” . Setelah mendapatkan element html dengan nama canvas, selanjutnya kita dapat menyimpan variabel baru dengan nama “ctx” dimana variabel ini diperoleh dari fungsi variable canvas.getContext(“2d”). Selanjutnya kita manipulasi variable “ctx” dengan menggunakan beberapa fungsi yang telah disediakan oleh javascript untuk membuat garis persegi. Adapun fungsi tersebut adalah .strokeRect() dan .fillRect(). Fungsi .strokeRect() dugunakan untuk membuat persegi dengan garis polos saja sedangkan .fillRect() digunakan untuk membuat persegi dengan warna.

<!DOCTYPE html&gt;
<html lang="en"&gt;
  <head&gt;

    <title&gt;HTML Canvas</title&gt;


  </head&gt;
  <body&gt;

    <canvas id="myCanvas" width="640" height="480" style="border:1px solid black;"&gt;
      <script type="text/javascript"&gt;
              var canvas = document.getElementById("myCanvas");
              var ctx = canvas.getContext("2d");

              ctx.strokeRect(100,10,100,100);
              ctx.fillRect(250,10,100,100);

          </script&gt;
  </canvas&gt;
  </body&gt;
</html&gt;

Perintah diatas hasilnya akan terlihat seperti dibawah ini :

Pada kedua fungsi diatas terdapat empat parameter yang berisi variabel (x, y, w, h), dimana variabel pertama adalah mengatur posisi sumbu x, selanjutnya mengatur posisi sumbu y, lebar dan tinggi dari garis yang akan dibuat.

Membuat Menu Navigasi Breadcrumb Menggunakan CSS3

Pada tutorial kali ini, kita akan sebuah menu navigasi breadcrumb menggunakan CSS3. Hasil akhir dari menu navigasi tersebut adalah seperti gambar di bawah ini:

Lihat video cara pembuatannya berikut ini:

Source Code

<html>
<head>
    <title>Pure CSS3 Breadcrumb Navigation Menu</title>    
    <style>
        /* Import custom font from google font*/
        @import url(http://fonts.googleapis.com/css?family=Noto+Serif); 

        body {
            font-family: 'Noto Serif', Verdana, Arial;	
            font-size:13px;	
            padding-top: 100px;
            text-align:center;
        }

        .breadcrumb {
            display:inline-block;
            box-shadow: 0 0 15px 1px rgba(0,0,0,0.6);
            border-radius: 5px;
            
            overflow:hidden;
            counter-reset:flag;
        }

        .breadcrumb a {
            display:block;
            float:left;
            
            text-decoration:none;
            padding: 0 10px 0 60px;
            
            line-height:36px;
            
            background: linear-gradient(#5DA6E1,#185282);
            color:white;
            
            position:relative;
        }

        .breadcrumb a.active, .breadcrumb a:hover {
            background: linear-gradient(#64D86A, #1D7521);
        }
                
        .breadcrumb a.active:after, .breadcrumb a:hover:after {
            background: linear-gradient(135deg,#64D86A, #1D7521);
        }

        .breadcrumb a:after {
            content:'';
            width: 36px;
            height:36px;
                            
            background:linear-gradient(135deg,#5DA6E1,#185282);
            
            position:absolute;
            top:0px;
            
            z-index:1;
            right:-18px;
            
            -webkit-transform: scale(0.707) rotate(45deg);
            -moz-transform: scale(0.707) rotate(45deg);
            -o-transform: scale(0.707) rotate(45deg);
            transform: scale(0.707) rotate(45deg);
            
            border-radius: 0 0 0 30px;
            
            box-shadow: 2px -2px 1px 1px rgba(0,0,0,0.5),
                3px -2px 1px 1px rgba(255,255,255,0.6);					
        }

        .breadcrumb a:last-child:after {
            content:none;
        }

        .breadcrumb a:last-child {
            padding-right:20px;
            border-radius: 0 5px 5px 0;
        }

        .breadcrumb a:before {
            content:counter(flag);
            counter-increment:flag;
            
            width: 20px;
            height:20px;
            
            background:#0E2F4A;
            font-weight:bold;
            
            position:absolute;
            top:0px;
            left:30px;
            
            line-height:20px;
            margin:8px 0;
            
            border-radius: 100%;
        }
    </style>
</head>
<body>
<div class="breadcrumb">
	<a href="#" class="active">Choose Product</a>
	<a href="#">Choose Color</a>
	<a href="#">Billing Address</a>
	<a href="#">Checkout</a>
</div>
</body>
</html>

Building Simple Image Slider Using Pure CSS3

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

  4. :before and :after Selector
    The :before selector inserts content before the selected element(s). The :after selector inserts content after the selected element(s).
  5. ~ (Tilde Selector)
  6. 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.

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

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

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.

#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:

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.

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

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.

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

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