TUTORIAL | TIPS DAN TRIK

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 :





Berikutnya kita bisa membagi kolom berdasrkan jumlah kolom dalam satu baris. Code yang saya gunakan adalah column-count. Contoh penulisannya adalah sebagai berikut :

.contoh2 {
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-count: 4; /*Jumlah kolom*/
-webkit-column-gap: 1em; /*Ukuran gap atau jarak  antar kolom*/
-webkit-column-count: 4;/*Jumlah kolom*/
}

Hasilnya akan terlihat seperti berikut :


Kita juga bisa menambahkan garis di dalam gap dengan cara menambahkan kode column-rulesehingga contoh penulisannya adalah sebagai berikut :

.contoh3 {
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;
-moz-column-width: 13em;
-moz-column-rule: 1px solid black;/*Ukuran, tipe dan warna garis*/
-webkit-column-gap: 1em;
-webkit-column-width: 13em;
-webkit-column-rule: 1px solid black;/*Ukuran, tipe dan warna garis*/
}

Hasilnya akan terlihat seperti berikut :


Itulah beberapa cara membagi kolom memjadi beberapa bagian dengan css3. Semoga bermanfaat...