Membuat kolom di Web adalah cerita yang sama sekali berbeda. Ini cukup sulit. Bahkan, tidak terlalu lama Anda mungkin perlu untuk membagi konten secara manual ke dalam beberapa divs dan mengapung ke kanan atau ke kiri, kemudian tentukan lebar, padding, margin, perbatasan, dan sebagainya.
Tapi, hal-hal yang sekarang jauh disederhanakan dengan Modul Kolom CSS3 multi. Seperti namanya jelas menyiratkan, modul ini memungkinkan kita untuk membagi konten ke dalam tata letak berbentuk kolom yang kita lihat di koran atau majalah. Browser Dukungan
Browser Support
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, tapi versi berikutnya, IE10, tampaknya sudah mulai memberikan dukungan untuk modul ini.Source: When can I use CSS3 Multiple column layout?
Create Multiple Column
Sebelum kita menciptakan kolom, kami telah menyiapkan beberapa paragraf teks untuk demonstrasi, dibungkus dalam HTML5<article>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc libero magna, venenatis quis aliquet et,
rutrum in augue. Donec vel tempor dolor. Donec volutpat fringilla porta. Suspendisse non nulla tortor.
Quisque commodo ornare mi, sit amet aliquet justo bibendum non. Integer bibendum convallis sapien, sit
amet tincidunt orci placerat in. Integer vitae consequat augue.
/ / Dan seterusnya
</article>
Dan menentukan lebar untuk 600px dari style sheet, itu saja.
Sekarang, mari kita mulai menciptakan kolom.
Pada contoh di bawah ini, kami akan membagi konten menjadi dua kolom dengan kolom properti-hitungan. Properti ini akan memberitahu browser untuk membuat konten ke dalam kolom dengan jumlah tertentu dan membiarkan browser menentukan lebar yang tepat untuk setiap kolom.
article {
-webkit-column-count:2;
-moz-column-count:2;
column-count:2;
}
Selain dari yang didefinisikan oleh hitungan, kolom dapat dibuat dengan menentukan lebar kolom menggunakan properti-lebar dan meninggalkan browser untuk memutuskan berapa banyak kolom harus dihasilkan di tempat.Dalam contoh ini, kita tentukan lebar kolom untuk 150px, yang mengakibatkan konten yang akan dibagi menjadi tiga kolom.
article {
-moz-column-width: 150px;
-webkit-column-width: 150px;
column-width: 150px;
}
Sebagaimana dinyatakan dalam spec. lebar kolom sebenarnya mungkin lebih luas atau sempit dari lebar kolom tertentu tergantung pada ruang yang tersedia. Juga, jika nilai lebar tidak secara eksplisit ditentukan, "auto" akan diambil sebagai standar, yang juga bisa berarti "ada kolom".
Column Gap
Gap Kolom menentukan ruang yang memisahkan setiap kolom. Nilai kesenjangan dapat dinyatakan dalam em atau px, tetapi seperti yang dinyatakan dalam spesifikasi nilai tidak bisa menjadi negatif. Pada contoh di bawah kita tentukan celah untuk 30px, sehingga ruang antara kolom terlihat sedikit lebih lebar.
article {
-webkit-column-gap: 30px;
-moz-column-gap: 30px;
column-gap: 30px;
}
Column Rule
Jika Anda ingin menambahkan perbatasan antara kolom, Anda dapat menggunakan properti kolom-aturan, yang bekerja sangat mirip dengan properti perbatasan. Jadi, mari kita katakan, jika kita ingin menempatkan perbatasan bertitik antara kolom, kita dapat menulis;
article {
-moz-column-rule: 1px dotted #ccc;
-webkit-column-rule: 1px dotted #ccc;
column-rule: 1px dotted #ccc;
}
Column Span
Properti ini bekerja sangat mirip dengan colspan dalam tag tabel. Pelaksanaan umum dari properti ini adalah untuk menjangkau judul konten ini di semua kolom. Berikut ini adalah contoh.
article h1 {
-webkit-column-span: all;
column-span:all;
}
Pada contoh di atas kita mendefinisikan h1 untuk span di semua kolom, dan jika rentang kolom yang ditentukan, 1 akan diambil sebagai default. Sayangnya properti ini, pada saat penulisan ini, hanya bekerja di Opera dan Chrome.
Final Words
Itu saja untuk saat ini, kami telah datang melalui semua hal penting untuk membuat beberapa kolom dengan CSS3, dan seperti yang telah kami sebutkan di awal, modul ini bekerja sangat baik di browser modern tetapi tidak bekerja lagi di Internet Explorer, tetapi harus Anda bersikeras menerapkan Kolom Beberapa di browser yang tidak didukung, Anda dapat menggunakan perpustakaan ini JavaScript untuk meniru fungsi ini Modul.Pada akhirnya, kami berharap bahwa Anda sekarang memiliki pemahaman yang cukup baik tentang cara membuat kolom dengan CSS3, dan jika Anda punya waktu untuk eksperimen, jangan ragu untuk berbagi metode dan hasil di kotak komentar di bawah ini. Terima kasih telah membaca posting ini dan bersenang-senang.
Sumber: Hongkiat.com
Tidak ada komentar:
Posting Komentar