Begini Cara Membuat Gallery Image Dengan CSS
Ada banyak cara untuk merapihkan foto-foto yang Anda masukan ke dalam website. Entah menyusunnya sesuai dengan ukuran fotonya, atau dengan cara paling sederhana dan mudah adalah mengandalkan CSS.
Setelah sebelumnya kita mempelajari tentang Cara menulis kode warna dengan CSS, maka pada tutorial kali ini kita akan mempelajar tentang cara membuat galery image dengan CSS.
Yep! Dengan CSS, gambar yang ada dalam website Anda akan berubah selayaknya Gallery tanpa perlu lagi susah-susah mengubah seluruh code Image nya.
Bagaimana cara membuatnya? Mudah saja! Pastikan terlebih dahulu Anda sudah mempelajari bagaimana cara membuat Box dengan CSS. Nah, untuk Langkah-langkahnya adalah sebagai berikut:
Pada <style> Anda langsung tunjukan kepada img { dan langsung mengatur tinggi serta lebar nya (dan apabila Anda tertarik, dapat pula menambahkan border untuk memberikan kesan frame). Seperti di bawah ini :
Maka hasilnya akan menjadi seperti ini:
Nah, terlihat ada kotak coklat di samping-samping fotonya tersebut kan? Untuk membuatnya menjadi lebih presisi dan bahwa kotak coklat tersebut seperti bingkai Anda dapat menambahkan padding, ukuran 10-15px sepertinya cukup :
Dan voila, hasilnya akan menjadi seperti ini :
Terlihat seperti frame sungguhan bukan?
Oke! Langkah selanjutnya adalah menambahkan margin antar-gambar. Kenapa hal tersebut perlu dilakukan? Tentunya agar gambar tidak saling berdempet atau bertabrakan satu-sama-lain. Untuk menambahkan margin, tambahkan saja di bawah padding yang tadi sudah Anda masukan.
Untuk ukuran marginnya dapat Anda masukan 20px.
Apabila Anda sudah selesai, tinggal masukan saja gambar yang lain ke dalam code. Sebagai contoh seperti ini :
Bila dijalankan maka hasilnya akan menjadi seperti ini :
Bagaimana? Menarik bukan? Gambarnya tidak berdepet satu sama lain layaknya sebuah Gallery. Dengan bantuan CSS karena tadi perintahnya adalah terhadap img, maka seluruh tag <img> yang berada di dalam code tersebut akan berubah menjadi sesuai yang diperintahkan di awal.
Tentunya Anda sudah belajar tentang hal itu bukan? Bagaimana? Mudah sekali kan?
Ini adalah tutorial untuk pemula tentunya. Apabila Anda masih kesulitan untuk tutorial ini, silahkan berikan komentar di bawah untuk pertanyaan maupun unek-unek yang ingin diberikan. Terimakasih! Sampai jumpa di tutorial berikutnya.
