Tutorial Belajar CSS: Membuat Gallery Gambar dengan HTML dan CSS

Posted on

Bermodalkan pemahaman mengenai CSS Box Model, di panduan belajar CSS Duniaikom kali ini kita akan praktek membuat gallery gambar sederhana. Setiap gambar ini nantinya menggunakan bingkai yang dibangun dari CSS Box Model: border, padding dan margin.


Cara Menambahkan Bingkai Gambar dengan CSS

Untuk mendesain bingkai gambar, kita tinggal menambahkan property border ke di tag <img>, 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:

Kini, terdapat sedikit spasi antara gambar dengan border. Ini berasal dari penambahan property padding: 10px, yang artinya akan mendesain jarak 10 pixel antara gambar dengan border.

Bagus, 1 gambar selesai, mari kita mulai mendesain gallery gambar dengan menambahkan 3 gambar lain.


Mendesain Gallery Gambar dengan HTML dan CSS

Dengan penambahan 3 buah tag <img> lainnya, berikut kode HTML dan CSS yang saya gunakan:

Inilah diantara keunggulan menggunakan CSS, dimana setiap penambahan element HTML baru, akan seketika dikenai kode CSS (pada rentang waktu selector CSS tersebut cocok dengan element HTML).

Di kode di atas, selector CSS img akan mendesain setiap tag <img> pun mempunyai width, height, border dan padding yang sama dengan gambar pertama-tama kita.

Tetapi, dapat kamu 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.

Selaku 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 di horizontal margin (sisi kiri dan kanan) akan mendesain sebuah element HTML berada ditengah-tengah parent element-nya. Di kasus kita, ini akan menempatkan gallery tepat di tengah-tengah web browser.

Berikut hasil ahir 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 via border: 2px solid black.

Dari mana datangnya angka 736 pixel? Angka ini berasal penjumlahan 2 lebar gambar. Untuk mendesain sebuah kotak yang ‘pas’ membungkus gallery gambar, kita mesti menghitung setiap sisi dari CSS Box Model.

Cara perhitungan ini telah kita bahas di panduan 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 yakni: 300px width + 2*10px padding + 2*4px border + 2*20px margin = 368 pixel.

Karena saya ingin ada 2 gambar berdampingan, karenanya 368*2 = 736 pixel!


Panduan kali ini menutup sesi pembahasan singkat mengenai CSS Box Model di Source Code Program. Semoga kamu dapat memahami ilustrasi dan contoh pemakaian CSS Box Model yang saya bahas di sini. CSS Box Model betul-betul urgen untuk dimengerti, tetapi sering pun mendesain bingung.

Selaku contoh, di di CSS pun dikenal konsep margin collapsing, yakni ‘menyatunya’ 2 buah margin vertikal ketika saling berhimpitan. Serta trik pemakaian CSS Reset di mendesain design layout. Karena bahan seperti perlu pembahasan yang lumayan panjang dan detail, saya akan membahasnya di eBook CSS Uncover Duniailkom.


eBook CSS Uncover Duniailkom

Seandainya kamu ingin belajar cara mendesain web, CSS wajib dikuasai. Duniailkom telah menyusun eBook CSS Uncover yang membahas CSS dengan lebih detail dan lebih komplit, mulai dari mendasar hingga fitur terbaru CSS3 seperti animasi dan web mempunyai tampilan yang dinamis. Penjelasan lebih lanjut dapat ke: eBook CSS Uncover Duniailkom.


Sumber https://www.duniailkom.com/