Walaupun penggunaan CSS2, masih banyak ditemukan dalam pembuatan sebuah website. Tetapi hadirnya CSS3 memberikan dampak yang signifikan untuk pada developer atau design web beralih ke versi terbaru yang telah direkomendasikan oleh World Wide Web Consortium atau W3C.
Banyak kelebihan CSS3 yang tidak ditemukan pada versi sebelumnya seperti membuat animasi warna hingga animasi 3D. Untuk desainer sendiri, akan lebih dimudahkan dalam hal kompatibilitas website yang berjalan pada smartphone, mengapa? Karena CSS3 mempunyai fitur media query yang memberikan dukungan untuk melakukan semua itu.
Artikel Terkait : Tutorial Membuat Website Sendiri, Menggunakan HTML5, CSS3, PHP dan MySQL
Oke, langsung saja pada pokok bahasan kita, yaitu membuat layout kolom koran dengan menggunakan CSS3. Pada tutorial ini, saya menggunakan notepad++ yang bisa juga anda download secara gratis di website resminya (http://notepad-plus-plus.org). Pada tutorial pembuatan layout kolom dengan CSS3 ini, saya asumsikan anda sudah mengerti penulisan sintaks pada CSS yaitu selector, property dan value. Bila belum mengenal ketiga penulisan sintaks tersebut, silahkan baca dan download pada tulisan saya sebelumnya yaitu: tutorial css pdf lengkap.
Menggunakan Property Column
Pembuatan layout kolom koran dengan CSS3 berikut, menggunakan property column, dimana property column ini, dikembangkan dalam tiga macam, yaitu:
- column-count: digunakan untuk menentukan banyaknya kolom yang akan dibuat dalam sebuah elemen.
- column-gap: digunakan untuk mengatur lebar antar kolom yang dibuat.
- column-rule: digunakan untuk mengatur baris pembatas antar kolom.
property column ini sudah didukung sepenuhnya oleh browser opera, tetapi untuk google chrome mesti menggunakan awalan -webkit- dan mozilla firefox harus dengan awalan -moz-.
Artikel lain: 2 Buku Gratis Bahasa Pemrograman Web dengan PHP dan MySQL Terbaik
Berikut kode html dan css yang dibuat untuk pembuatan kolom menggunakan property column
<html>
<head>
<title> test layout 4 kolom </title>
<style>
div#wrapper{
background: none;
border: none;
padding: 20px;}
div.kolom{
-webkit-column-count:4;
-moz-column-count: 4;
column-count:4;-webkit-column-gap:45px;
-moz-column-gap:45px
column-gap:45px;-webkit-column-rule:5px dashed grey;
-moz-column-rule: 5px dashed grey;
column-rule: 5px dashed grey;
}</style>
</head>
<body>
<div id=”wrapper”>
<div class=”kolom”>umardanny.com merupakan sebuah blog yang berisikan tutorial belajar microsoft office dan sistem pakar. Selain itu
di blog ini menyediakan tutorial lainnya seperti review ebook gratis, cyberpreneuship, tutorial internet, dan lain-lain. Awalnya umardanny.com memang
ditujukan untuk sharing atau berbagi ebook indonesia dan menggali lebih dalam sistem pakar. Sehingga ada beberapa artikel mengenai kesehatan yang awalnya
diharapkan bisa menjadi knowledge base atau basis pengetahuan untuk sistem pakar, tapi pada perjalannaya artikel tentang kesehatan tidak pernah diupdate lagi.
Jadi umardanny.com lebih fokus ke masalah pembelajaran ms. office, seluk beluk sistem pakar dan pastinya ebook gratis Indonesia. Semoga Ebook Indonesia bisa
membantu banyak user Indonesia yang ingin mendapakan materi gratis dan tentunya berkualitas.
</div>
</div>
</body>
</html>
Penjelasan dari kode CSS di atas:
Jumlah kolom yang dihasilkan sebanyak 4 buah, lalu jarak antara kolom adalah 45 pixel. Untuk garis diantara kolom, lebarnya 5 pixel dengan bergaya dashed/garis putus-putus warna abu-abu. Anda juga bisa menggunakan dotted, double dan solid selain pengunaan dashed.
Gambar berikut ini, tampilan yang dihasilkan dari source code (kode) CSS3 di atas, yang dijalankan di browser mozilla firefox.
Menggunakan CSS3 Media Queries
Keuntungan menggunakan Teknik CSS3 Media Queries adalah responsive, dimana teknik tersebut adalah mengatur layout halaman sebuah website, sehingga tampilannya dapat menyesuaikan menurut lebar jendela browser.
Oke, berikutnya gunakan kode sebelumnya, untuk memberikan contoh dari teknik media queries. Berikut kode yang tuliskan didalam tag style, tepat dibawah tag untuk mengatur kolom.
<html>
<head>
<title> test layout 4 kolom </title>
<style>
div#wrapper{
background: none;
border: none;
padding: 20px;}
div.kolom{
-webkit-column-count:4;
-moz-column-count: 4;
column-count:4;-webkit-column-gap:45px;
-moz-column-gap:45px
column-gap:45px;-webkit-column-rule:5px dashed grey;
-moz-column-rule: 5px dashed grey;
column-rule: 5px dashed grey;
}@media screen and(max-width: 800px){
div.kolom{
-webkit-column-count: 3;
-moz-column-count :3;
column-count :3;
}
}
@media screen and (max-width: 600px){
div.kolom{
-webkit-column-count: 2;
-moz-column-count :2;
column-count :2;
}
}
@media screen and (max-width: 360px){
div.kolom{
-webkit-column-count: 1;
-moz-column-count :1;
column-count :1;
}
}
</style>
</head>
<body>
<div id=”wrapper”>
<div class=”kolom”>
umardanny.com merupakan sebuah blog yang berisikan tutorial belajar microsoft office dan sistem pakar. Selain itu
di blog ini menyediakan tutorial lainnya seperti review ebook gratis, cyberpreneuship, tutorial internet, dan lain-lain. Awalnya umardanny.com memang
ditujukan untuk sharing atau berbagi ebook indonesia dan menggali lebih dalam sistem pakar. Sehingga ada beberapa artikel mengenai kesehatan yang awalnya
diharapkan bisa menjadi knowledge base atau basis pengetahuan untuk sistem pakar, tapi pada perjalannaya artikel tentang kesehatan tidak pernah diupdate lagi.
Jadi umardanny.com lebih fokus ke masalah pembelajaran ms. office, seluk beluk sistem pakar dan pastinya ebook gratis Indonesia. Semoga Ebook Indonesia bisa
membantu banyak user Indonesia yang ingin mendapakan materi gratis dan tentunya berkualitas.</div>
</div>
</body>
</html>
Penjelasan dari kode di atas :
@media screen and (max-width: 800px) digunakan untuk mendeteksi lebar maksimal dari layar. Jika lebar window antara 601 pixel sampai dengan 800 pixel maka jumlah kolom dikurangi menjadi tiga. Jika lebar window/jendela antara 361px sampai 600px maka jumlah kolom ditentukan menjadi dua kolom dan yang terakhir jika lebar jendela di bawah 361 maka kolom hanya berjumlah satu.
Download
Untuk mendownload source code di atas, silahkan klik disini.