Wajah menggunakan kode html penggeser gambar

Setelah saya posting mengenai membuat popup dengan css3 murni beberapa waktu yang lalu, ternyata postingan tersebut mendapat respon yang sangat bagus dari beberapa grup web development baik di facebook maupun google+. Beberapa orang bahkan sampai mengirimi pesan secara pribadi untuk bertanya seputar trik tersebut. Ada juga yang meminta untuk membuatkan tutorial CSS3 murni lain di blog ini

Karena alasan tersebut, saya terpicu dan bersemangat untuk mengeksplor trik CSS3 murni lain yang mudah-mudahan juga mendapat respons yang serupa, heheh. Dan temuilah saya dengan trik membuat slider CSS3 murni ini. Inti dari trik ini sebenarnya saya contek dari slider-nya CSSslider. com, sebuah website software CSS slider generator. software tersebut berbayar. Namun ada versi gratisnya yang memungkinkan kita men-generate CSS slider dengan style basic

Nah, saya mencoba membuat slider baru dengan 3 buah gambar dari software tersebut. Dari slider yang dihasilkan, saya mencari kode inti css yang menyebabkannya bisa menjadi slider. Namun karena di generate oleh sebuah software, kode css yang dihasilkan ternyata sangat banyak (lebih dari 1000 baris). Padahal, cuma berisi 3 slide T_T. Dan itu tentu saja membuat saya pusing

Setelah lumayan lama mencari dan bereksperimen, dengan hati yang berbunga-bunga (lebay) akhirnya saya bisa mempersingkat 1000+ baris kode tersebut menjadi sekitar 100+ kode css untuk membuat sebuah slider yang berisi 3 slide. Itu pun sudah termasuk CSS reset, styling, dan embel-embel lainnya. Kode intinya hanya sekitar 50 baris. Itupun kebanyakan adalah perulangan untuk 3 slide tersebut

Slide yang dihasilkan memang sederhana. Itu karena saya membuatnya untuk membagikan tutorial dan tekniknya pada posting ini. agar mudah dipahami. Untuk gaya selebihnya, Anda bisa bereksperimen sendiri

Sejujurnya, bagi anda yang terbiasa membuat slider dengan menggunakan library jquery, teknik ini memang lebih ribet. Tidak se-otomatis pembuatan dengan jquery yang hanya tinggal meng-konfigurasi saja. Teknik ini juga hanya bekerja pada browser-browser modern. Tidak support untuk browser IE 9 ke bawah. Jadi teknik ini hanya untuk digunakan pada website-website modern yang penggunanya bukan orang-orang yang melek IT. Namun, ada beberapa kelebihan dibalik kekurangan tersebut, terutama di sisi developer. Silahkan baca dibawah

1. Lebih ringan karena hanya membutuhkan tidak lebih dari 100 baris CSS. dan itupun kebanyakan hanya perulangan untuk setiap slide

2. Lebih fleksibel untuk di modifikasi. Efek animasi apapun yang anda inginkan, anda bisa membuatnya sendiri dengan mengintegrasikannya dengan CSS3 animation, atau library animate. css. Untuk poin ini, di bagian kedua artikel ini saya akan membahas bagaimana caranya mengintegrasikannya dengan animate. css

3. Alternatif ketika anda dalam keadaan tidak bisa menggunakan library JS. Misalnya, untuk siswa/mahasiswa yang mengikuti lomba/LKS, biasanya tidak diperbolehkan menggunakan source apapun dari luar. Nah, lanjut bisa menggunakan teknik ini sebagai nilai tambah

Akankah mereka berpikir mereka memberikan wajah membuatnya?

/* Reset CSS */
* {
lapisan. 0;
batas. 0;
}
img{
max-width. 100%;
tinggi. mobil;
}
ul, ol {
daftar-gaya-jenis. tidak ada;
}
/* akhiri reset css */. container { /* posisikan letak slidernya */
batas. 10% mobil;
posisi. terkait;
meluap. tersembunyi;
}
wadah. geser li img{
lebar. 500px;
tinggi. 300px;
}ul. menggeser {
posisi. sangat;
menampilkan. blok;
lebar. 300%;
}. caption { /* styling untuk deskripsi setiap slide */
posisi. sangat;
warna latar belakang. rgba(0,0,0,0. 5);
bawah. 0;
lapisan. 10px;
Warna. #fff;
kiri. 0;
Baik. 0;
}/* Yang membuatnya jadi slider, alias kode intinya */
ul. geser li {
menampilkan. inline-blok;
mengambang. kiri;
-ukuran kotak-webkit. kotak perbatasan;
-ukuran kotak-moz. kotak perbatasan;
ukuran lembu. kotak perbatasan;
-webkit-transisi. -webkit-transform 2000ms;
-moz-transisi. -moz-transform 2000ms;
transisi. -webkit-transform 2000ms, transform 2000ms;
}
ul. geser li. slide-1 {
kiri. 0%;
}
ul. geser li. slide-2 {
kiri. 100%;
}
ul. geser li. slide-3 {
kiri. 200%;
}
#nav-1. diperiksa ~ ul. geser li{
-webkit-transformasi. terjemahkanX(0%);
-moz-transform. terjemahkanX(0%);
mengubah. terjemahkanX(0%);
}
#nav-2. diperiksa ~ ul. geser li{
-webkit-transformasi. translateX(-100%);
-moz-transform. translateX(-100%);
mengubah. translateX(-100%);
}
#nav-3. diperiksa ~ ul. geser li {
-webkit-transformasi. translateX(-200%);
-moz-transform. translateX(-200%);
mengubah. translateX(-200%);
}
/* End, yang membuatnya jadi slider *//* Navigator */. radio-nav { /* menghilangkan tombol radio */
menampilkan. tidak ada;
}/* styling untuk tombol next dan slide sebelumnya */
panah-nav {
posisi. sangat;
atas. Empat, Lima%;
lebar. 50px;
tinggi. 50px;
}
nav-berikutnya {
Baik. 10px;
}
nav-sebelumnya {
kiri. 10px;
}
label panah-nav {
-webkit-transisi. semua 0. 3 detik;
-moz-transisi. semua 0. 3 detik;
transisi. semua 0. 3 detik;
warna latar belakang. rgba(0,0,0,0. 3);
Warna. #fff;
radius perbatasan. lima puluh%;
menampilkan. blok;
posisi. sangat;
lapisan. 15px 20px;
kursor. penunjuk;
z-index. satu;
kegelapan. 0;
font-berat. berani;
tinggi garis. satu;
}
wadah. melayang. label panah-nav{
warna latar belakang. rgba(0,0,0,0. 7);
}
/* akhiri penataan untuk tombol berikutnya dan slide sebelumnya */
/* Ini termasuk kode inti. Setiap slide mempunya tombol prev dan next-nya masing-masing. Nah, tampilkan tombol yang tepat dengan kode dibawah ini*/
#nav-1. diperiksa ~. label nav-sebelumnya. nav-3,
#nav-1. diperiksa ~. label nav-berikutnya. nav-2,
#nav-2. diperiksa ~. label nav-sebelumnya. nav-1,
#nav-2. diperiksa ~. label nav-berikutnya. nav-3,
#nav-3. diperiksa ~. label nav-sebelumnya. nav-2,
#nav-3. diperiksa ~. label nav-berikutnya. nav-1 {
z-index. 2;
kegelapan. satu;
}
/* akhir *//* Navigator */

Unduh DEMO

Jika dan perhatikan kode CSS di atas. Teknik yang digunakan untuk membuat slider ini adalah dengan memanfaatkan input bertipe radio. Saat radio dengan id tertentu di pilih, maka akan tampil slide tertentu. Berhubung ini adalah postingan yang ditujukan untuk orang yang sudah mengerti CSS dan HTML, saya tidak akan menjelaskan konsep kodenya secara detail. Pusing merangkai katanya hehehe. Saya yakin, untuk kode sesedikit ini, tidak sampai setengah jam juga sudah bisa mempraktikannya, jika ada kemauan untuk memahami

Yap, itu saja untuk tutorial kali ini

Oh ya, jangan lupa untuk datang lagi senin depan untuk kelanjutan postingan ini. Saya akan membahas face mengintegrasikan CSS slider ini dengan animasi-animasi yang ada di animate. css