CSS3 Multi-colomn Tata Letak
Tata letak CSS3 multi-colomn memungkinkan mudah definisi beberapa kolom teks - seperti di surat kabar:
CSS3 Multi-kolom Properti
Dalam bab ini Anda akan belajar tentang mengikuti sifat multi-kolom:
- colomn-count
- colomn-gap
- colomn-rule-style
- colomn-rule-width
- colomn-rule-color
- colomn-rule
- colomn-span
- colomn-width
CSS3 Membuat Beberapa Kolom
Properti colomn-count menentukan jumlah kolom elemen harus dibagi ke dalam.
Contoh berikut akan membagi teks dalam elemen <div> menjadi 3 kolom:
.colomku {
-webkit-column-count: 3;/*chrome*/
-moz-column-count: 3; /*firefox*/
column-count: 3;
}
CSS3 Tentukan Gap Antara Kolom
Properti column-gap menentukan kesenjangan antara kolom.
Contoh berikut menetapkan 30 piksel kesenjangan antara kolom:
.colomku {
-webkit-column-count: 3;/*chrome*/
-moz-column-count: 3; /*firefox*/
column-count: 3;
-webkit-column-gap: 30px;/*chrome*/
-moz-column-gap: 30px; /*firefox*/
column-gap: 30px;
}
CSS3 Kolom Rule
Properti kolom-rule menentukan gaya aturan antara kolom:
.colomku {
-webkit-column-count: 3;/*chrome*/
-moz-column-count: 3; /*firefox*/
column-count: 3;
-webkit-column-gap: 30px;/*chrome*/
-moz-column-gap: 30px; /*firefox*/
column-gap: 30px;
-webkit-column-rule: solid; /*chrome*/
-moz-column-rule: solid; /*firefox*/
column-rule: solid;
}
Properti colomn-rule-width menentukan lebar aturan antara kolom:
.colomku {
-webkit-column-count: 3;/*chrome*/
-moz-column-count: 3; /*firefox*/
column-count: 3;
-webkit-column-gap: 30px;/*chrome*/
-moz-column-gap: 30px; /*firefox*/
column-gap: 30px;
-webkit-column-rule: solid; /*chrome*/
-moz-column-rule: solid; /*firefox*/
column-rule: solid;
-webkit-column-rule-width: 1px; /*chrome*/
-moz-column-width: 1px; /*firefox*/
column-width: 1px;
}
Properti column-rule-color menentukan warna aturan antara kolom
.colomku {
-webkit-column-count: 3;/*chrome*/
-moz-column-count: 3; /*firefox*/
column-count: 3;
-webkit-column-gap: 30px;/*chrome*/
-moz-column-gap: 30px; /*firefox*/
column-gap: 30px;
-webkit-column-rule: solid; /*chrome*/
-moz-column-rule: solid; /*firefox*/
column-rule: solid;
-webkit-column-rule-width: 1px; /*chrome*/
-moz-column-width: 1px; /*firefox*/
column-width: 1px;
-webkit-column-rule-color: lightblue; /*chrome*/
-moz-column-color: lightblue; /*firefox*/
column-color: lightblue;
}
Properti colomn-rule adalah properti singkat untuk setting semua kolom--aturan * sifat di atas.
Contoh berikut menetapkan lebar, gaya, dan warna aturan antara kolom:
.colomku {
-webkit-column-count: 3;/*chrome*/
-moz-column-count: 3; /*firefox*/
column-count: 3;
-webkit-column-gap: 30px;/*chrome*/
-moz-column-gap: 30px; /*firefox*/
column-gap: 30px;
-webkit-column-rule: 1px solid lightblue; /*chrome*/
-moz-column-rule: 1px solid lightblue; /*firefox*/
column-rule: 1px solid lightblue;
}
Tentukan Berapa Banyak Kolom Elemen Harus Span
Properti column-span menentukan berapa banyak kolom elemen harus mencakup seluruh.
Contoh berikut menetapkan bahwa <h2> elemen harus mencakup seluruh semua kolom:
h2 {
-webkit-column-span: all;
column-span: all;
}
Tentukan Kolom Lebar
Properti column-width menetapkan lebar untuk kolom.
Contoh berikut menetapkan bahwa lebar untuk kolom 100px:
.colomku {
-webkit-column-count: 3;/*chrome*/
-moz-column-count: 3; /*firefox*/
column-count: 3;
-webkit-column-width: 100px; /*chrome*/
-moz-column-width: 100px; /*firefox*/
column-width: 100px;
}
0 komentar:
Posting Komentar