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

Posted on

Diantara tambahan yang lumayan menarik di CSS3 ialah modul multiple column. Modul ini digunakan untuk membagi konten teks menjadi kolom-kolom seperti di koran. Di panduan belajar CSS3 kali ini kita akan membahas cara membuat kolom koran di HTML.


Cara Mendesain Tampilan Kolom Koran dengan CSS

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

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


Membagi Kolom Menurut Jumlahnya (column-count)

Cara amat gampang untuk membagi kolom HTML seperti tampilan di koran ialah menggunakan property column-count. Property ini dapat 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:

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


Membagi Kolom Menurut Lebarnya (column-width)

Cara kedua untuk membagi kolom ialah merujuk di lebar dari kolom itu sendiri. Web browser akan otomatis mengkalkulasi berapa jumlah kolom yang dapat ditampilkan.

Selaku contoh, kalau saya men-set lebar kolom 200px, karenanya akan terdapat 4 kolom kalau lebar yang terdapat ialah 800px. Untuk keperluan ini kita menggunakan propery column-width.

Berikut contoh penggunaannya:

Kali ini saya mengatur agar lebar kolom pas sebesar 200px. Bila terdapat ruang lebih, kolom baru akan ditambahkan. Efek yang didapatkan lumayan unik, karena kalau kamu mengubah-ubah lebar web browser, jumlah kolom pun akan berubah. Ini terjadi karena saya tak menempatkan kolom-kolom ini kedalam ‘container’ lain seperti tag <div>.


Menambahkan garis pemisah kolom (column-rule)

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

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

Tampilan halaman web seperti yang kita bahas disini memang tak banyak digunakan. Diantara alasannya karena property CSS3 Multiple Column masih relatif baru dan belum didukung oleh mayoritas web browser. Namun kalau tanpa CSS3, efek seperti ini lumayan sulit dibangun.


eBook CSS Uncover Duniailkom

Bila 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/