Dalam postingan sebelumya saya membahas tentang bagaimana
membuat round corner dengan css3. dalam postingan tersebut saya menggunakan penulisan dengan gaya koran atau majalah dengan cara membagi kolom yang ada menjadi 2 bagian. Dengan menggunakan css3 kita hanya perlu beberapa code untuk membuat beberapa kolom. Karena code untuk membagi kolom sudah tersedia di css3. Code yang digunakan adalah
column-width jika kita ingin membagi kolom berdasarka lebarnya dan
column-count jika kita ingin membagi kolom berdasar jumlahnya.
Seperti yang sudah saya singgung di artikel saya yang berjudul
Border-radius: Membuat pojok yang tidak lancip dengan CSS3 bahwa ada dua buah browser besar dengan 2 cara penulisan. yaitu dengan menambahka -moz- untuk Mozila/Firefox dan -webkit- untuk Google Chrome.
Berikut adalah contoh pembuatan kolom dengan menggunakan code
column-width. Yaitu Menentukan kolom berdasarkan lebar-nya. Code yang saya tuliskan adalah :
.contoh1 {
width:500px;
margin: 0 auto;
padding: 5px;
clear: both;
background-color:rgba(255, 255, 255, 0.8);
-moz-box-shadow:0 0 10px rgba(0, 0, 0, 0.3);
&-webkit-box-shadow:0 0 10px rgba(0, 0, 0, 0.3);
-moz-column-gap: 1em;/*Ukuran gap atau jarak antar kolom*/
-moz-column-width: 13em; /*Lebar kolom*/
-webkit-column-gap: 1em; /*Ukuran gap atau jarak antar kolom*/
-webkit-column-width: 13em;/*Lebar kolom*/
}
Hasilnya akan terlihat seperti berikut :
Lorem ipsum dolor sit amet, onsectetuer css3 adipiscing elit. Aenean egestas blandit ipsum. Morbi nuedges nulla metus, luctus et, ullamcorper sit amet, commodo quis, nisl. Ut blandit lacus nec nibh. Phasellus eleifend enim et risus. Nam multi-kolom condimentum. Praesent euismod auctor dui. Nunc ut leo vel css3 magna adipiscing tempor. Nuedges pretium, ligula et hendrerit faucibus, sem velit accumsan tortor, sodales tempor est ligula non velit. Nulla multi-kolom css3 sagittis, odio quis porta nonummy, mauris nuedges arcu gravida odio, quis aliquam lacus elit non libero. Proin aliquam augue accumsan augue. Quisque ut eros at erat ultrices sodales. Nunc nuedges vitae ipsum. Mauris in elit in dolor imperdiet interdum. Vivamus egestas sagittis css3 justo. Sed lorem. Sed nuedges vel neque in ipsum gravida nonummy.
Image courtesy of www.vectorjungle.com