Panduan CSS3 mempelajari bagaimana Cara Membuat Multi Kolom Dengan CSS3 untuk tampilan website yang menawan.
Panduan CSS3 mempelajari bagaimana Cara Membuat Multi Kolom Dengan CSS3 untuk tampilan website yang menawan. CSS3 didukung multi-kolom untuk mengatur teks sebagai struktur kertas berita. Beberapa yang paling umum digunakan multi-kolom sifat seperti yang ditunjukkan di bawah ini:
| Values | Deskripsi |
|---|---|
| column-count | Digunakan untuk menghitung jumlah kolom yang elemen harus dibagi |
| column-fill | Digunakan untuk memutuskan, bagaimana mengisi kolom |
| column-gap | Digunakan untuk menentukan kesenjangan antara kolom |
| column-rule | Digunakan untuk menentukan jumlah aturan |
| rule-color | Digunakan untuk menentukan warna aturan kolom |
| rule-style | Digunakan untuk menentukan aturan style untuk kolom |
| rule-width | Digunakan untuk menentukan lebar |
| column-span | Digunakan untuk menentukan rentang antara kolom |
Contoh Multi Kolom Dengan CSS3
Berikut contoh menunjukkan susunan teks sebagai struktur kertas baru.
<html> <head> <style> .multi { /* Column count property */ -webkit-column-count: 4; -moz-column-count: 4; column-count: 4; /* Column gap property */ -webkit-column-gap: 40px; -moz-column-gap: 40px; column-gap: 40px; /* Column style property */ -webkit-column-rule-style: solid; -moz-column-rule-style: solid; column-rule-style: solid; } </style> </head> <body> <div class="multi"> Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms. The journey commenced with a single tutorial on HTML in 2006 and elated by the response it generated, we worked our way to adding fresh tutorials to our repository which now proudly flaunts a wealth of tutorials and allied articles on topics ranging from programming languages to web designing to academics and much more. </div> </body> </html>
Untuk beranggapan, jika pengguna ingin membuat teks seperti kertas baru tanpa line, kita bisa melakukan ini dengan menghapus sintaks style seperti yang ditunjukkan di bawah ini
.multi { /* Column count property */ -webkit-column-count: 4; -moz-column-count: 4; column-count: 4; /* Column gap property */ -webkit-column-gap: 40px; -moz-column-gap: 40px; column-gap: 40px; }
akan menghasilkan hasil sebagai berikut :
COMMENTS