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 <img>, seperti contoh berikut:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
   img {
     width: 300px;
     height: 200px;
     border: 4px solid #575D63;
   }
</style>
</head>
<body>
  <img src="autumn_lake.jpg">
</body>
</html>

Cara menambahkan bingkai ke gambar menggunakan CSS

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:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
   img {
     width: 300px;
     height: 200px;
     border: 4px solid #575D63;
     padding: 10px;
   }
</style>
</head>
<body>
  <img src="autumn_lake.jpg">
</body>
</html>

Menambahkan padding ke dalam gambar menggunakan CSS

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.


Membuat Gallery Gambar dengan HTML dan CSS

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
   img {
     width: 300px;
     height: 200px;
     border: 4px solid #575D63;
     padding: 10px;
   }
</style>
</head>
<body>
  <img class="gambar1" src="autumn_lake.jpg"><img class="gambar2" src="beach.jpg">
  <img class="gambar3" src="berry.jpg"><img class="gambar4" src="sakura.jpg">
</body>
</html>

Membuat gallery gambar menggunakan CSS

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 diatas, selector CSS img akan membuat setiap tag <img> 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 menambahkan ruang atau spasi diantara gambar-gambar ini? Yup, saatnya kita menggunakan property margin:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
   img {
     width: 300px;
     height: 200px;
     border: 4px solid #575D63;
     padding: 10px;
     margin: 20px;
   }
</style>
</head>
<body>
  <img class="gambar1" src="autumn_lake.jpg"><img class="gambar2" src="beach.jpg">
  <img class="gambar3" src="berry.jpg"><img class="gambar4" src="sakura.jpg">
</body>
</html>

Penambahan margin ke dalam gambar

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:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
   body {
     width: 736px;
     margin: 10px auto;
     border: 2px solid black;
   }
   img {
     border: 4px solid #575D63;
     margin: 20px;
     padding: 10px;
     width: 300px;
     height: 200px;
   }
</style>
</head>
<body>
<img class="gambar1" src="autumn_lake.jpg"><img class="gambar2" src="beach.jpg">
<img class="gambar3" src="berry.jpg"><img class="gambar4" src="sakura.jpg">
</body>
</html>

Hasil akhir tampilan final gallery dengan CSS

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.

Darimana 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 disini. 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
Jika anda ingin belajar cara mendesain web, CSS wajib dikuasai. Duniailkom telah menyusun eBook CSS Uncover yang membahas CSS dengan lebih detail dan lebih lengkap, mulai dari dasar hingga fitur terbaru CSS3 seperti animasi dan web responsive. Penjelasan lebih lanjut bisa ke: eBook CSS Uncover Duniailkom.

Tutorial Terkait:

25 Comments

  1. reza
    25 Jan 16
  2. Anonymous
    27 Apr 16
  3. Anonymous
    05 Jun 16
  4. Septian
    14 Jun 16
    • Andre
      14 Jun 16
  5. Azhar Lihan
    07 Aug 16
    • Andre
      07 Aug 16
      • Azhar Lihan
        08 Aug 16
        • Andre
          10 Aug 16
        • Azhar Lihan
          11 Aug 16
  6. Liyan
    10 Aug 16
  7. Azhar Lihan
    11 Aug 16
    • Andre
      11 Aug 16
  8. muhammad ramadhan iskandar
    15 Feb 17
    • muhammad ramadhan iskandar
      15 Feb 17
    • Andre
      17 Feb 17
  9. mrifqims
    25 Mar 17
    • Andre
      25 Mar 17
  10. Nasry
    22 Apr 17
    • Andre
      24 Apr 17
  11. Hari
    19 Jul 17
    • Andre
      21 Jul 17
  12. Ihsan Magazine
    09 Aug 17

Add Comment