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.
Dalam tutorial ini 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:
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:
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.