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
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.
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.
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
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.
Tidak ada komentar:
Posting Komentar