Membuat efek pure css3 slider keren ~ blog sepot

Hayyy,. sobat kali ini saya akan membagikan efek keren pada gambar yaitu Efek Pure Css3 Slider karena slider ini saya buat dari banyak kode CSS3. Setelah saya membaca Disini Walaupun saya cuma mengerti sedikit mengenai Efek Pure Css3 Slider ini.

Efek Pure Css3 Slider ini akan sempurna anda lihat jika browser anda mendukung efek transition jika browser anda tidak mendukung efek transition maka slider ini tidak akan terlihat sempurna, karena perpindahan gambarnya menggunakan efek transition. tapi slider ini tetep bekerja di browser yang tidak support transition cuman efeknya saja yang tidak muncul hehehe. Lebih jelas nya silahkan sobat lihat DEMO nya di bawah ini.

Untuk melihat efeknya silahkan sobat klik tombol Navigasinya, Jika sobat tertarik untuk membuat Efek Pure Css3 Slider ini.

Simak langkah² dibawah ini:

1. Login ke akun blogger sobat

2. Klik Template » Edit HTML

3. Kemudian tekan Ctrl+F cari kode ]]></b:skin> atau </style>

4. Lalu tambahkan kode CSS berikut ini tepat diatas kode ]]></b:skin> atau </style>

#slider-vanz {
 padding:0;
 width:550px;
 height:300px;
 margin:0 auto;
 background:#98d url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlQVKe2dUmQigTNpafhEhaLnwXyPflsjgqDYPE7OvPHxN4WSFh44MsYiNRejFTXiBslbuw8kHE8T-7xf_1v5pCDOcMUA7MPJRADSDxUUYfAEOHMW6J9Zj-DPBqVIac_rXI-Giu9QrehHMK/s1600/BIE_Beckheader.jpg)no-repeat center;
 position:relative;
 border:4px solid #C03E16;
 overflow:hidden;
}
#slider-vanz .gambar {
 padding:0;
 margin:0 auto;
}
#slider-vanz .gambar input {
 display:none;
}
#slider-vanz .gambar li {
 list-style-type:none;
 margin:0;
 padding:0;
}
#slider-vanz .gambar img {
 width:100%;
 height:100%;
 position:absolute;
 -moz-transition:all 900ms linear;
 -o-transition:all 900ms linear;
 -webkit-transition:all 900ms linear;
 transition:all 900ms linear;
 opacity:0;
 visibility:hidden;
}
#slider-vanz input:checked ~ img,
#slider-vanz input:checked ~ img#gerak-kiri,
#slider-vanz input:checked ~ img#gerak-bawah,
#slider-vanz input:checked ~ img#gerak-atas,
#slider-vanz input:checked ~ img#muter,
#slider-vanz input:checked ~ img#gerak-kanan,
#slider-vanz input:checked ~ img#miring {
 -moz-transform:rotate(0deg) scale(1);
 -ms-transform:rotate(0deg) scale(1);
 -o-transform:rotate(0deg) scale(1);
 -webkit-transform:rotate(0deg) scale(1);
 transform:rotate(0deg) scale(1);
 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
 filter:alpha(opacity=100);
 opacity:1;
 top:0 !important;
 left:0;
 right:0;
 visibility:visible;
}
#slider-vanz .nav {
 padding:2px;
 background:rgba(0,0,0,0.5);
 color:#09f;
 text-decoration:none;
 margin:0;
 position:absolute;
 top:0;
 left:0;
 right:0;
}
#slider-vanz label {
 padding:1px 10px;
 background:#BC2315;
 color:#FFF;
 font:bold 12px/20px Arial,sans-serif;
 text-decoration:none;
 margin:1px 4px 1px 0;
 display:inline-block;
 cursor:pointer;
 position:relative;
}
#slider-vanz .gambar li .deskripsi {
 position:absolute;
 padding:5px;
 background:rgba(0,0,0,0.8);
 color:#FA381E;
 left:0;
 right:0;
 bottom:-1000px;
 font:normal 13px/20px Arial,sans-serif;
 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 filter:alpha(opacity=0);
 opacity:0;
 -moz-transition:all 1s ease-in-out;
 -o-transition:all 1s ease-in-out;
 -webkit-transition:all 1s ease-in-out;
 transition:all 1s ease-in-out;
}
#slider-vanz input:checked ~ .deskripsi {
 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
 filter:alpha(opacity=100);
 opacity:1;
 bottom:0;
 -moz-transition-delay:0.5s;
 -o-transition-delay:0.5s;
 -webkit-transition-delay:0.5s;
 transition-delay:0.5s;
}
#slider-vanz .gambar li .deskripsi a,
#slider-vanz .gambar li .deskripsi a:visited {
 color:#fff;
 text-decoration:none;
}
#slider-vanz .gambar img#gerak-kiri,
#slider-vanz .gambar img#gerak-kanan,
#slider-vanz .gambar img#gerak-bawah,
#slider-vanz .gambar img#gerak-atas,
#slider-vanz .gambar img#muter,
#slider-vanz .gambar img#miring {
 -moz-transition-delay:0.5s;
 -o-transition-delay:0.5s;
 -webkit-transition-delay:0.5s;
 transition-delay:0.5s;
}
#slider-vanz .gambar img#gerak-kiri {
 left:-100%
}
#slider-vanz .gambar img#gerak-kanan {
 left:100%
}
#slider-vanz .gambar img#gerak-bawah {
 top:100%
}
#slider-vanz .gambar img#gerak-atas {
 top:-100%
}
#slider-vanz .gambar img#muter {
 -moz-transform:rotate(1230deg) scale(0);
 -ms-transform:rotate(1230deg) scale(0);
 -o-transform:rotate(1230deg) scale(0);
 -webkit-transform:rotate(1230deg) scale(0);
 transform:rotate(1230deg) scale(0);
}
#slider-vanz .gambar img#miring {
 opacity:0;
 -moz-transform:matrix(2.373,0,0.085,-0.013,-50.175,12.399);
 -ms-transform:matrix(2.373,0,0.085,-0.013,-50.175,12.399);
 -o-transform:matrix(2.373,0,0.085,-0.013,-50.175,12.399);
 -webkit-transform:matrix(2.373,0,0.085,-0.013,-50.175,12.399);
 transform:matrix(2.373,0,0.085,-0.013,-50.175,12.399);
}

5. Masukan kode HTML di bawah ini didalam gadget HTML/Javascript atau bisa juga di taruh dalam postingan blog sobat

<div id="slider-vanz">
<div class="gambar">
<li><input checked="true" id="a" name="system" type="radio" />
<img id="gerak-kiri" src="URL gambar1.jpg" />
<div class="deskripsi">Disini deskripsi gambar 1</div>
</li>
<li><input id="b" name="system" type="radio" />
<img id="gerak-kanan" src="URL gambar1.jpg" />
<div class="deskripsi">Disini deskripsi gambar 2</div>
</li>
<li><input id="c" name="system" type="radio" />
<img id="gerak-atas" src="URL gambar1.jpg" />
<div class="deskripsi">Disini deskripsi gambar 3</div>
</li>
<li><input id="d" name="system" type="radio" />
<img id="gerak-bawah" src="URL gambar1.jpg" />
<div class="deskripsi">Disini deskripsi gambar 4</div>
</li>
<li><input id="e" name="system" type="radio" />
<img id="muter" src="URL gambar1.jpg" />
<div class='deskripsi'>Disini deskripsi gambar 5</div>
</li>
<li><input id="f" name="system" type="radio" />
<img id="miring" src="URL gambar1.jpg" />
<div class='deskripsi'>Disini deskripsi gambar 6</div>
</li>
<li><input id="g" name="system" type="radio" />
<img src="URL gambar1.jpg" />
<div class='deskripsi'>Disini deskripsi gambar 7</div>
</li>
</div><!--Penutup .gambar-->
<div class='nav'>
<label for='a'>1</label>
<label for='b'>2</label>
<label for='c'>3</label>
<label for='d'>4</label>
<label for='e'>5</label>
<label for='f'>6</label>
<label for='g'>7</label>
</div><!--Penutup .nav-->
</div><!--Penutup #slider-vanz-->

Silahkan di coba dan semoga berhasil......
Happy Blogging and Coding,.. :)

Terima kasih telah membaca artikel tentang Membuat efek pure css3 slider keren di blog blog sepot jika anda ingin menyebar luaskan artikel ini di mohon untuk mencantumkan link sebagai Sumbernya, dan bila artikel ini bermanfaat silakan bookmark halaman ini diwebbroswer anda, dengan cara menekan Ctrl + D pada tombol keyboard anda.