Layout Beberapa Kolom (Majalah-sama) Dengan CSS3 / Desain web

Secara umum, orang akan kehilangan jejak saat membaca konten yang sangat panjang. Itulah sebabnya, di media cetak seperti majalah dan koran, konten dibagi menjadi beberapa kolom agar mudah dibaca.

Membuat kolom di Web adalah cerita yang sama sekali berbeda. Cukup sulit. Bahkan, belum lama ini Anda mungkin perlu membagi konten secara manual menjadi beberapa divs dan mengapungkannya ke kanan atau kiri, kemudian tentukan lebar, padding, margin, batas dan sebagainya.

Tapi, sekarang banyak hal disederhanakan dengan Modul Multi Kolom CSS3. Seperti namanya, modul ini memungkinkan kita untuk membagi konten ke dalam tata letak kolom yang kita lihat di koran atau majalah.

Dukungan Browser

Beberapa kolom saat ini didukung di semua browser - Firefox 2+, Chrome 4+, Safari 3.1+ dan Opera 11.1 - kecuali, seperti yang diperkirakan, Internet Explorer, tetapi versi berikutnya, IE10, tampaknya sudah mulai memberikan dukungan untuk Modul ini..

Agar browser lainnya dapat berfungsi, Firefox tetap membutuhkannya -moz- awalan, sedangkan Chrome dan Safari membutuhkan -webkit- awalan. Opera tidak memerlukan awalan, jadi kita bisa menggunakan properti resmi saja.

Buat Banyak Kolom

Sebelum kita membuat kolom, kami telah menyiapkan beberapa paragraf teks untuk demonstrasi, yang dibungkus dengan HTML5

tag, sebagai berikut;

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sekarang ini akan dirilis pada hari Senin, lalu buka sekarang dan klik pada tanggal. Donor atau tempor warna. Jangan lupa fringilla porta. Suspendisse non nulla tortor. Cukup cepat atau lambat, duduk di sini hanya di bibendum non. Integral bibendum convallis sapien, satet tincidunt orci placerat in. Integer vitae resultat augue. //dan seterusnya

... dan tentukan lebar untuk 600px dari style sheet, itu dia.

Sekarang, mari kita mulai membuat kolom.

Dalam contoh di bawah ini, kami akan membagi konten menjadi dua kolom dengan hitungan kolom milik. Properti ini akan memberi tahu browser untuk merender konten menjadi kolom dengan nomor yang ditentukan dan membiarkan browser menentukan lebar yang tepat untuk setiap kolom.

 artikel -webkit-kolom-hitung: 2; -moz-kolom-hitung: 2; jumlah kolom: 2;

Selain didefinisikan oleh hitungan, kolom dapat dibuat dengan menentukan lebar menggunakan lebar kolom properti dan meninggalkan browser untuk memutuskan berapa banyak kolom yang harus dihasilkan.

Dalam contoh ini, kami menentukan lebar kolom untuk 150px, yang mengakibatkan konten dibagi menjadi tiga kolom.

 artikel -moz-lebar kolom: 150px; -webkit-column-width: 150px; lebar kolom: 150px;

Seperti yang dinyatakan dalam spesifikasi. lebar kolom yang sebenarnya mungkin lebih lebar atau lebih sempit dari lebar kolom yang ditentukan tergantung pada ruang yang tersedia. Juga, jika nilai lebar tidak ditentukan secara eksplisit, the “mobil” akan dianggap sebagai default, yang juga bisa berarti “tidak ada kolom”.

Celah Kolom

Celah Kolom tentukan spasi yang memisahkan setiap kolom. Nilai gap dapat dinyatakan dalam em atau px, tetapi sebagaimana dinyatakan dalam spesifikasi nilainya tidak boleh negatif. Dalam contoh di bawah ini kami menentukan celah untuk 30px, sehingga ruang di antara kolom terlihat sedikit lebih luas.

 artikel -webkit-kolom-gap: 30px; -moz-kolom-gap: 30px; gap-kolom: 30px;

Aturan Kolom

Jika Anda ingin menambahkan batas antara kolom, Anda dapat menggunakan aturan kolom properti, yang bekerja sangat mirip dengan berbatasan milik. Jadi, katakanlah, jika kita ingin meletakkan batas bertitik di antara kolom, kita dapat menulis;

 artikel -moz-kolom-rule: 1px bertitik #ccc; -webkit-kolom-rule: 1px bertitik #ccc; aturan kolom: 1px bertitik #ccc;

Rentang Kolom

Properti ini berfungsi sangat mirip dengan colspan di meja menandai. Implementasi umum dari properti ini adalah untuk membentangkan tajuk konten di semua kolom. Berikut ini sebuah contoh.

 artikel h1 -webkit-kolom-span: semua; span-kolom: semua;

Dalam contoh di atas kita mendefinisikan h1 untuk menjangkau semua kolom, dan jika rentang kolom ditentukan, 1 akan dianggap sebagai default. Sayangnya, properti ini, pada saat penulisan ini, hanya berfungsi di Opera dan Chrome.

Kata-kata terakhir

Itu saja untuk saat ini, kami telah melalui semua hal penting untuk membuat beberapa kolom dengan CSS3, dan seperti yang telah kami sebutkan di awal, modul ini bekerja dengan sangat baik di browser modern tetapi belum berfungsi di Internet Explorer.

Pada akhirnya, kami harap Anda sekarang memiliki pemahaman yang cukup baik tentang cara membuat kolom dengan CSS3, dan jika Anda punya waktu untuk eksperimen, silakan berbagi metode dan hasil Anda di kotak komentar di bawah ini. Terima kasih telah membaca posting ini dan bersenang-senanglah.

Demo
Sumber Unduhan