Selamat pagi,..kali ini saya akan berbagi efek keren pada gambar yaitu
Efek Pure CSS3 Slider karena slider ini saya buat dari banyak kode CSS3. Setelah saya membaca di
Disini walaupun saya cuma mengerti sedikit mengenai
Efek Pure CSS3 Slider ini, tapi tidak ada salahnya kita mencobanya :)
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 tetap bekerja di browser yang tidak support
transition cuma efeknya saja yang tidak muncul hehehe.. lebih jelasnya silahkan Anda lihat DEMO-nya di bawah ini :
Untuk melihat efeknya silahkan Anda klik tombol navigasinya, jika Anda tertarik untuk memasangnya
Efek Pure CSS3 Slider di blog silahkan Anda ikuti tutorial selanjutnya.
Simak Langkah-Langkah di Bawah Ini :
1. Login ke akun
blogger Anda.
2. Klik
Template Edit HTML
3. Kemudian tekan
CTRL+F cari kode
]]></b:skin> atau
</style>
4. Lalu tambahkan kode CSS berikut ini tepat di atas 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/AVvXsEjgtvSZhHa40yb1zZB1k-aj6cclHYoZUHK0GPeMUQiJqOo2UJeWWUXbNX-RJkWkmgiwF8drO8_7TI9dpLML0jAm6ul-nVzPrkQp73hIkIF3C6FbAXS4wYWjO0yhp6MNzC4rQBKkpKy0DUhJ/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. Masukkan kode
HTML di bawah ini di dalam gadget
HTML/JavaScript atau bisa juga di taruh dalam postingan blog Anda.
<div id="slider-vanz">
<div class="gambar">
<li><input checked="true" id="a" name="system" type="radio" /> <img id="gerak-kiri" src="URL gambar.jpg" /> <div class="deskripsi">Disini deskripsi gambar 1</div> </li>
<li><input id="b" name="system" type="radio" /> <img id="gerak-kanan" src="URL gambar.jpg" /> <div class="deskripsi">Disini deskripsi gambar 2</div> </li>
<li><input id="c" name="system" type="radio" /> <img id="gerak-atas" src="URL gambar.jpg" /> <div class="deskripsi">Disini deskripsi gambar 3</div> </li>
<li><input id="d" name="system" type="radio" /> <img id="gerak-bawah" src="URL gambar.jpg" /> <div class="deskripsi">Disini deskripsi gambar 4</div> </li>
<li><input id="e" name="system" type="radio" /> <img id="muter" src="URL gambar.jpg" /> <div class='deskripsi'>Disini deskripsi gambar 5</div> </li>
<li><input id="f" name="system" type="radio" /> <img id="miring" src="URL gambar.jpg" /> <div class='deskripsi'>Disini deskripsi gambar 6</div> </li>
<li><input id="g" name="system" type="radio" /> <img src="URL gambar.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-->
Silakan di coba dan semoga berhasil....
Happy blogging and coding,.. :)
Blogger
Google+
Facebook
Twitter