Tutorial Belajar Pemrograman, membuat game, membuat aplikasi, membuat program, android, game maker, yii, php, CSS, HTML, java, javascript, codeigniter, jquery, Pascal, c++

Sunday, April 20, 2014

Cara Membuat Slider Keren Dengan HTML5 dan CSS3

Cara Membuat Slider Keren Dengan HTML5 dan CSS3 - Slider adalah kumpulan gambar / image di satukan berbentuk galeri dan terkadang diberi berbagai animasi yang pada umumnya diletakan pada suatu halaman website untuk mempresentasikan produk website tersebut atau mempercantik tampilan website.

Baca juga : Cara Membuat Multistep Form Keren Dengan HTML5

Pada umumnya sider dibuat dengan menggabungkan HTML5 + CSS + Javascript, akan tetapi pada kali ini kita akan membuat slider accordian serderhana hanya dengan menggunakan HTML5 + CSS saja. Akan tetapi tetap menghasilkan slider yang keren dan tidak berat saat loadnya. untuk lebih jelasnya langsung saja kita mulai membuat programnya.

Untuk menulisakan script anda dapat menggunakan apa saja bebas, contoh : Notepad, Notepad++, Dreamwaver, NetBeans, Eclipse. Karena program ini cukup sederhana saya sarankan menggunakan Notepad atau Notepad++ saja sudah cukup.

CSS

Buatlah sebuah folder baru di mana saja sesukan anda dengan nama Slider Acc. Buatlah dengan notepad atau notepad++ file baru kemudian isikan script berikut dan simpan dalam folder sebelumnya dengan nama style.css 


/*Now the styles*/
* {
 margin: 0; 
 padding: 0;
}
body {
 background: #ccc; 
 font-family: arial, verdana, tahoma;
}

/*Time to apply widths for accordian to work
Width of image = 640px
total images = 5
so width of hovered image = 640px
width of un-hovered image = 40px - you can set this to anything
so total container width = 640 + 40*4 = 800px;
default width = 800/5 = 160px;
*/

.accordian {
 width: 805px; height: 320px;
 overflow: hidden;
 
 /*Time for some styling*/
 margin: 100px auto;
 box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
 -webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
 -moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
}

/*A small hack to prevent flickering on some browsers*/
.accordian ul {
 width: 2000px;
 /*This will give ample space to the last item to move
 instead of falling down/flickering during hovers.*/
}

.accordian li {
 position: relative;
 display: block;
 width: 160px;
 float: left;
 
 border-left: 1px solid #888;
 
 box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
 -webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
 -moz-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
 
 /*Transitions to give animation effect*/
 transition: all 0.5s;
 -webkit-transition: all 0.5s;
 -moz-transition: all 0.5s;
 /*If you hover on the images now you should be able to 
 see the basic accordian*/
}

/*Reduce with of un-hovered elements*/
.accordian ul:hover li {width: 40px;}
/*Lets apply hover effects now*/
/*The LI hover style should override the UL hover style*/
.accordian ul li:hover {width: 640px;}


.accordian li img {
 display: block;
}

/*Image title styles*/
.image_title {
 background: rgba(0, 0, 0, 0.5);
 position: absolute;
 left: 0; bottom: 0; 
width: 640px; 

}
.image_title a {
 display: block;
 color: #fff;
 text-decoration: none;
 padding: 20px;
 font-size: 16px;
}

HTML

Sekarang untuk tampilannya buatlah sebuah file HTML baru dengan notepad++ anda dan isi dengan script berikut :


<!DOCTYPE html>
<html>
 <head>          
  <link href="style.css" rel="stylesheet">    
    </head>
    <body>
     <!-- Kita akan membuat simple accordian dengan efek hover -->
<div class="accordian">
 <ul>
  <li>
   <div class="image_title">
    <a href="#">Slide 1</a>
   </div>
   <a href="#">
    <img src="1.jpg"/>
   </a>
  </li>
  <li>
   <div class="image_title">
    <a href="#">Slide 2</a>
   </div>
   <a href="#">
    <img src="2.jpg"/>
   </a>
  </li>
  <li>
   <div class="image_title">
    <a href="#">Slide 3</a>
   </div>
   <a href="#">
    <img src="3.jpg"/>
   </a>
  </li>
  <li>
   <div class="image_title">
    <a href="#">Slide 4</a>
   </div>
   <a href="#">
    <img src="4.jpg"/>
   </a>
  </li>
  <li>
   <div class="image_title">
    <a href="#">Slide 5</a>
   </div>
   <a href="#">
    <img src="5.jpg"/>
   </a>
  </li>
 </ul>
</div>
    </body>
</html>


Simpan nama index.html dalam folder yang sama dengan CSS

Sekrang untuk gambarnya anda dapat mengambil contohnya dari sini atau menggunakan gambar sendiri, yang terpenting simpan di dalam folder yang sama dengan HTML dan CSSnya. anda dapat mengunduh source gambarnya disini beserta HTML dan CSS yang sudah jadi : DOWNLOAD

Sekarang Slider Accordian dengan HTML5 dan CSS3 anda sudah selesai anda dapat mencobanya dengan cara klik 2x pada file tersebut, disarankan membukanya dengan browser Chrome atau Mozilla, jangan menggunakan IE hehheeh klw di IE tidak jalan saya sudah tidak heran.

Terima Kasih Telah Mengunjungi Blog Sederhana Ini.

Di Mohon Apabila Anda Ingin Mengcopas Artikel Pada Blog ini Cantumkan URL Sumber.

Sebagai Pengunjung Yang Baik Anda Dapat Meninggalkan Komentar di Blog Sederhana Ini.

Share this post

4 komentar

  1. Kalau bisa saya ingin melihat DEMOnya :-(

    http://blogkurogi.blogspot.com

    ReplyDelete
  2. Langsung coba buat aj gan,,,
    (o)
    cukup mudah kok,,
    :)

    ReplyDelete
  3. Ijin mempraktekkan ilmunya, thanks mas bro..

    ReplyDelete

:) :) :-) :-) :)) :)) =)) =)) :( :( :-( :-( :(( :(( :d :d :-d :-d @-) @-) :p :p :o :o :>) :>) (o) (o) [-( [-( :-? :-? (p) (p) :-s :-s (m) (m) 8-) 8-) :-t :-t :-b :-b b-( b-( :-# :-# =p~ =p~ :-$ :-$ (b) (b) (f) (f) x-) x-) (k) (k) (h) (h) (c) (c) cheer cheer

 
© Jin Toples Programming
Designed by BlogThietKe Cooperated with Duy Pham
Released under Creative Commons 3.0 CC BY-NC 3.0