Tutorial Belajar CSS3: Cara Membuat Kolom Koran di HTML (multiple column)

Salah satu tambahan yang cukup menarik di CSS3 adalah modul multiple column. Modul ini digunakan untuk membagi konten teks menjadi kolom-kolom seperti di koran. Dalam tutorial belajar CSS3 kali ini kita akan membahas cara membuat kolom koran di HTML.


Cara Membuat Tampilan Kolom Koran dengan CSS

CSS3 menyediakan beberapa property untuk membuat tampilan kolom seperti koran. Beberapa diantaranya membutuhkan penjelasan yang cukup panjang yang saya bahas di eBook CSS Uncover Duniailkom. Dalam tutorial ini saya akan membahas 3 property diantaranya: column-count, column-width, dan column-rule.

Perlu juga menjadi catatan bahwa property-property ini belum bersifat final dan belum didukung secara penuh oleh web browser. Untuk hal ini kita harus menggunakan cara penulisan vendor prefix, yakni penambahan kode web browser di awal property CSS.


Membagi Kolom Berdasarkan Jumlahnya (column-count)

Cara paling praktis untuk membagi kolom HTML seperti tampilan di koran adalah menggunakan property column-count. Property ini bisa diisi dengan jumlah kolom yang kita inginkan, apakah 2, 3, 4 atau lebih. Web browser kemudian akan mengatur lebar dari tiap-tiap kolom. Berikut contoh penggunaannya:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
 div {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
  }
</style>
</head>
<body>
<h2>Belajar CSS Multiple Column di Duniailkom</h2>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mi
tortor, imperdiet sed hendrerit non, consequat luctus magna. Nullam
accumsan odio ac lectus mollis finibus. Maecenas imperdiet feugiat 
felis, sit amet ullamcorper elit vulputate in.
</p>
<p>liquam a lectus porta, bibendum enim id, dictum nunc. Duis tincidunt
sed turpis non suscipit. Nunc id mi molestie, porta leo id, vulputate
eros. Donec scelerisque vitae justo finibus imperdiet. Curabitur eget
nibh dignissim ipsum interdum maximus at scelerisque odio.</p>
<p>
Morbi ac fermentum risus. Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per inceptos himenaeos. Praesent gravida
luctus leo sit amet vehicula. Donec luctus sit amet justo vel pretium.
Mauris id elit et sem semper convallis non eu nibh. Nullam ultrices
molestie lectus ut ultricies. Nam nec risus nunc.</p>
</div>
</body>
</html>

Cara Membuat Kolom Koran dengan CSS

Seperti yang terlihat, tampilan teks dibagi merata ke dalam 3 kolom, sesuai dengan property column-count: 3.


Membagi Kolom Berdasarkan Lebarnya (column-width)

Cara kedua untuk membagi kolom adalah berdasarkan lebar dari kolom itu sendiri. Web browser akan otomatis mengkalkulasi berapa jumlah kolom yang bisa ditampilkan.

Sebagai contoh, jika saya men-set lebar kolom 200px, maka akan terdapat 4 kolom jika lebar yang tersedia adalah 800px. Untuk keperluan ini kita menggunakan propery column-width.

Berikut contoh penggunaannya:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
  <style>
    div {
    -webkit-column-width: 200px;
    -moz-column-width: 200px;
    column-width: 200px;
  }
</style>
</head>
<body>
<h2>Belajar CSS Multiple Column di Duniailkom</h2>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mi
tortor, imperdiet sed hendrerit non, consequat luctus magna. Nullam
accumsan odio ac lectus mollis finibus. Maecenas imperdiet feugiat 
felis, sit amet ullamcorper elit vulputate in.
</p>
<p>liquam a lectus porta, bibendum enim id, dictum nunc. Duis tincidunt
sed turpis non suscipit. Nunc id mi molestie, porta leo id, vulputate
eros. Donec scelerisque vitae justo finibus imperdiet. Curabitur eget
nibh dignissim ipsum interdum maximus at scelerisque odio.</p>
<p>
Morbi ac fermentum risus. Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per inceptos himenaeos. Praesent gravida
luctus leo sit amet vehicula. Donec luctus sit amet justo vel pretium.
Mauris id elit et sem semper convallis non eu nibh. Nullam ultrices
molestie lectus ut ultricies. Nam nec risus nunc.</p>
</div>
</body>
</html>

Membagi kolom berdasarkan lebar pixel

Kali ini saya mengatur agar lebar kolom pas sebesar 200px. Jika terdapat ruang lebih, kolom baru akan ditambahkan. Efek yang dihasilkan cukup unik, karena jika anda mengubah-ubah lebar web browser, jumlah kolom juga akan berubah. Ini terjadi karena saya tidak menempatkan kolom-kolom ini kedalam ‘container’ lain seperti tag <div>.


Menambahkan garis pemisah kolom (column-rule)

Untuk efek yang lebih menarik, kita bisa menambahkan garis pemisah diantara kolom-kolom ini. Property yang digunakan adalah column-rule. Nilai yang bisa diisi sama dengan nilai yang digunakan untuk property border CSS. Berikut contoh penggunaannya:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
  div {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
 
    -webkit-column-rule: 5px double black;
    -moz-column-rule: 5px double black;
    column-rule: 5px double black;
  }
</style>
</head>
<body>
<h2>Belajar CSS Multiple Column di Duniailkom</h2>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mi
tortor, imperdiet sed hendrerit non, consequat luctus magna. Nullam
accumsan odio ac lectus mollis finibus. Maecenas imperdiet feugiat 
felis, sit amet ullamcorper elit vulputate in.
</p>
<p>liquam a lectus porta, bibendum enim id, dictum nunc. Duis tincidunt
sed turpis non suscipit. Nunc id mi molestie, porta leo id, vulputate
eros. Donec scelerisque vitae justo finibus imperdiet. Curabitur eget
nibh dignissim ipsum interdum maximus at scelerisque odio.</p>
<p>
Morbi ac fermentum risus. Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per inceptos himenaeos. Praesent gravida
luctus leo sit amet vehicula. Donec luctus sit amet justo vel pretium.
Mauris id elit et sem semper convallis non eu nibh. Nullam ultrices
molestie lectus ut ultricies. Nam nec risus nunc.</p>
</div>
</body>
</html>

Menambahkan garis pembatas kolom koran

Property column-rule: 5px double black akan membuat sebuah garis pemisah dengan tebal 2 pixel diantara setiap kolom.

Tampilan halaman web seperti yang kita bahas disini memang tidak banyak digunakan. Salah satu alasannya karena property CSS3 Multiple Column masih relatif baru dan belum didukung oleh mayoritas web browser. Namun jika tanpa CSS3, efek seperti ini cukup sulit dibuat.


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:

6 Comments

  1. asep aka taruna
    20 Nov 15
    • Andre
      21 Nov 15
  2. ahmadnorhady
    11 May 17
    • Cahya Ibrahim
      07 Jul 17
  3. specxstre
    30 Oct 17
    • Andre
      30 Oct 17

Add Comment