untung99.homes: Membuat Gallery Gambar dengan HTML dan CSS
Untung99 menawarkan beragam permainan yang menarik, termasuk slot online, poker, roulette, blackjack, dan taruhan olahraga langsung. Dengan koleksi permainan yang lengkap dan terus diperbarui, pemain memiliki banyak pilihan untuk menjaga kegembiraan mereka. Selain itu, Untung99 juga menyediakan bonus dan promosi menarik yang meningkatkan peluang kemenangan dan memberikan nilai tambah kepada pemain.
Berikut adalah artikel atau berita tentang Harian untung99.homes dengan judul untung99.homes: Membuat Gallery Gambar dengan HTML dan CSS yang telah tayang di untung99.homes terimakasih telah menyimak. Bila ada masukan atau komplain mengenai artikel berikut silahkan hubungi email kami di koresponden@untung99.homes, Terimakasih.
Tutorial Belajar CSS: Membuat Gallery Gambar dengan HTML dan CSS
Bermodalkan pemahaman tentang CSS Box Model, dalam tutorial belajar CSS Duniaikom kali ini kita akan praktek membuat gallery gambar sederhana. Setiap gambar ini nantinya menggunakan bingkai yang dibuat dari CSS Box Model: border, padding dan margin.
Cara Menambahkan Bingkai Gambar dengan CSS
Untuk membuat bingkai gambar, kita tinggal menambahkan property border ke dalam tag , seperti contoh berikut:
Property border: 4px solid #575D63 akan menambahkan efek bingkai abu-abu gelap di sisi luar gambar. Agar bingkai ini lebih terlihat, saya akan menambahkan sedikit padding:
Sekarang, terdapat sedikit spasi antara gambar dengan border. Ini berasal dari penambahan property padding: 10px, yang artinya akan membuat jarak 10 pixel antara gambar dengan border.
Baik, 1 gambar selesai, mari kita mulai merancang gallery gambar dengan menambahkan 3 gambar lain.
Dengan penambahan 3 buah tag lainnya, berikut kode HTML dan CSS yang saya gunakan:
Inilah salah satu keunggulan menggunakan CSS, dimana setiap penambahan element HTML baru, akan langsung dikenai kode CSS (selama selector CSS tersebut cocok dengan element HTML).
Pada kode di atas, selector CSS img akan membuat setiap tag juga memiliki width, height, border dan padding yang sama dengan gambar pertama kita.
Tapi, bisa anda perhatikan setiap gambar saling menempel satu sama lain. Bagaimana cara menambah ruang atau spasi diantara gambar-gambar ini? Yup, saatnya kita menggunakan property margin:
Hasilnya, untuk setiap gambar, akan terdapat margin sebesar 20 pixel.
Sebagai efek terakhir, bagaimana cara agar gambar-gambar ini tampil persis di tengah-tengah web browser?
Untuk ini kita akan menggunakan trik margin: auto. Nilai auto pada horizontal margin (sisi kiri dan kanan) akan membuat sebuah element HTML berada ditengah-tengah parent element-nya. Dalam kasus kita, ini akan menempatkan gallery tepat di tengah-tengah web browser.
Berikut hasil akhir gallery gambar:
Kali ini saya menambahkan sebuah selector baru: body. Untuk selector ini saya mengatur lebarnya sebesar 736 pixel, margin: 10px auto, dan efek bingkai melalui border: 2px solid black.
Dari mana datangnya angka 736 pixel? Angka ini berasal penjumlahan 2 lebar gambar. Untuk membuat sebuah kotak yang ‘pas’ membungkus gallery gambar, kita harus menghitung setiap sisi dari CSS Box Model.
Cara perhitungan ini sudah kita bahas pada tutorial sebelumnya: Cara Menghitung Lebar dan Tinggi CSS Box Model.
Lebar dan Tinggi dari sebuah element berasal dari penjumlahan width/height + padding + border + margin. Total lebar dari 1 gambar adalah: 300px width + 2*10px padding + 2*4px border + 2*20px margin = 368 pixel.
Karena saya ingin ada 2 gambar berdampingan, maka 368*2 = 736 pixel!
Tutorial kali ini menutup sesi pembahasan singkat tentang CSS Box Model di Duniailkom. Semoga anda bisa memahami ilustrasi dan contoh penggunaan CSS Box Model yang saya bahas di sini. CSS Box Model sangat penting untuk dipahami, tetapi sering juga membuat bingung.
Sebagai contoh, di dalam CSS juga dikenal konsep margin collapsing, yakni ‘menyatunya’ 2 buah margin vertikal ketika saling berhimpitan. Serta trik penggunaan CSS Reset dalam membuat design layout. Karena materi seperti perlu pembahasan yang cukup panjang dan detail, saya akan membahasnya di eBook CSS Uncover Duniailkom.
eBook CSS Uncover Duniailkom