Salah satu tambahan yang menarik di CSS3 adalah fitur multiple column. Fitur ini digunakan guna membagi konten teks menjadi kolom-kolom seperti di koran. Pada tulisan ini kita akan membahas cara membuat kolom mirip koran pada HTML. CSS3 menyediakan sejumlah property guna membuat tampilan kolom seperti koran. Pada tutorial ini saya akan membahas 3 property diantaranya: column-count, column-width, serta column-rule.
Membagi Kolom Berdasarkan Jumlah Kolom (Column-Count)
Cara paling mudah membagi kolom HTML seperti tampilan di koran yaitu memakai property column-count. Property ini dapat diisi secara jumlah kolom yang kita inginkan, apakah 2, 3, 4 atau lebih. Web browser kemudian hendak mengatur lebar dari tiap-tiap kolom. Berikut model penggunaannya:
-webkit-column-count: 3; -moz-column-count: 3; column-count: 3;
Untuk penggunaan secara lengkap bisa lihat source code berikut:
<!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</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>
Hasil Output dari code tersebut adalah:
Membagi Kolom Berdasarkan Lebar Kolom (Column-Width)
<!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</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>
Hasil output:
Dalam source code tersebut, saya mengatur supaya lebar kolom pas sebesar 200px. Jadi jika ada ruang lebih, kolom baru akan ditambahkan. Imbasyang dihasilkan relatif unik, sebab jika anda mengubah-ubah lebar web browser, jumlah kolom juga akan berubah. Ini timbul sebab saya tidak menempatkan kolom-kolom ini ke dalam 'container' lain seperti tag <div>.
Menambahkan Garis Pemisah Kolom (Column-Rule)
Untuk hasil yang lebih menarik, kita bisa menambahkan garis pemisah antar kolom. Nilai yang dapat diisi sama seperti nilai yang digunakan untuk property border CSS. Berikut model 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: 2px double black; -moz-column-rule: 2px double black; column-rule: 2px double black; } </style> </head> <body> <h2>Belajar CSS Multiple Column</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>
1 Komentar
Lucky Club Casino Site - Lucky Club Online Casino
BalasHapusLucky luckyclub.live Club Casino offers 100% casino games. The slots and table games are the most popular and the players from around the world enjoy the games. Rating: 4.7 · 36 votes