Tampilan blog atau website yang menarik tidak selalu harus menggunakan banyak animasi atau script yang rumit. Salah satu cara sederhana yang bisa digunakan untuk membuat tampilan halaman menjadi lebih modern adalah dengan menambahkan Slider, contohnya Slider Accordion CSS3. Elemen ini dapat menampilkan beberapa gambar atau konten dalam satu area sehingga halaman terlihat interaktif.
Cocok bagi kamu yang sedang belajar CSS dan ingin mencoba membuat efek slider sederhana tanpa harus menggunakan plugin tambahan yang berat. Dengan memanfaatkan kemampuan CSS3, tampilan accordion dapat dibuat lebih menarik dengan efek transisi dan animasi yang cukup halus. Slider Accordion juga bisa dimanfaatkan untuk berbagai kebutuhan, misalnya menampilkan artikel pilihan, gambar, banner, informasi produk, portofolio, atau konten lainnya. Selain membuat tampilan lebih menarik, penggunaan CSS3 juga dapat membantu menjaga kode tetap sederhana dan mudah disesuaikan.
 |
| CSS3 Slider Accordian Style |
CSS3 Slider Accordian Style
<div class="accordian">
<ul>
<li>
<div class="image_title">
<a href="https://thesisnew.blogspot.com/" target="_blank">KungFu Panda</a>
</div>
<a href="https://thesisnew.blogspot.com/" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmA6bUbhls3XyXihc-HEWdHVfZf2hlxOLfap0F7X0Ra0J6OEuIgCpGjj2HfxEkkhEk4N1hbFulfrD2Bje50jxCtli1MRHubABRvbYmhIo5tcOzBYuI3hC1Yc-CiMxIxTYpyxysQ2Ttbn8/s1600/seocips1.jpg" />
</a>
</li>
<li>
<div class="image_title">
<a href="https://thesisnew.blogspot.com/" target="_blank">Toy Story 2</a>
</div>
<a href="https://thesisnew.blogspot.com/" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ-E_6Es5tXabjsP2rK_-6RiOcPkTwj-zPJ2hSjtzy4Gq4T1CJQ4JmecN2Ffip-FP8RdTCbPMsoRX400zdcpXv4Baw2Pij4atQpF7vJK9KN0JdhD9UmLYhq4q1VPdEeL07RgC3dosKVZA/s1600/seocips2.jpg" />
</a>
</li>
<li>
<div class="image_title">
<a href="https://thesisnew.blogspot.com/" target="_blank">Wall-E</a>
</div>
<a href="https://thesisnew.blogspot.com/" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNvTTrizUuVy9aQ1XvmKbMwifgy0w7wph0Fhfrn4NXq_U4vRTxDJ6f3QCSRvvIFJ1VW8r5Y6RsZrH9MApGyL4CuK8xUA9G-xM2ksWymx1aza0APiq0K6iu2JBy8nWru4OsIEvH3f0iXgM/s1600/seocips3.jpg" />
</a>
</li>
<li>
<div class="image_title">
<a href="https://thesisnew.blogspot.com/" target="_blank">Up</a>
</div>
<a href="https://thesisnew.blogspot.com/">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ7iZGexZAmLxyXKJCZOc8Md11arurEry7gDKueDb22jR2vqIL4HO3oBJwnJbLb575vsYl2U792vSJ_eTFRnJ3guvyX5oj1VlTL406ZTllN9tlU0BBxH3SPwuv-bHpFP5j5-i-odH-Jjs/s1600/seocips4.jpg" />
</a>
</li>
<li>
<div class="image_title">
<a href="https://thesisnew.blogspot.com/" target="_blank">Cars 2</a>
</div>
<a href="https://thesisnew.blogspot.com/" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgye3CUukwhZityYS-7ayjnnwwMdLYmHbb1DBRn3l_jfEv0JjhnC4cUHk3er0aTua0r4PztngbGsHUklUCX8gKUydUMHirw_iywXrvFFsDdEBT_56qDK-skmkJCyKiHMuMjoUF2gn1IebE/s1600/seocips5.jpg" />
</a>
</li>
</ul>
</div>
<style>
/*Now the styles*/
.accordian {
width: 805px;
height: 320px;
overflow: hidden;
/*Time for some styling*/
margin: 20px 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;
}
</style>
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;
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;
Dengan memanfaatkan CSS3, kamu dapat membuat slider yang terlihat modern, ringan, dan responsive tanpa harus menggunakan JavaScript atau plugin tambahan. Kode yang digunakan juga cukup sederhana, baik untuk menampilkan gambar, artikel, banner, maupun konten lainnya.
Semoga tutorial ini bermanfaat dan membantu kamu menambahkan widget yang menarik pada blog. Selamat mencoba dan jangan ragu untuk bereksperimen dengan warna, ukuran, efek transisi, serta desain lainnya agar sesuai dengan yang kamu inginkan.
0 Komentar untuk "Cara Membuat Slider Accordion Style Modern dengan CSS3 untuk Mempercantik Blog"