Membuat Layout Kolom Koran Dengan Memakai Css3
Walaupun penggunaan CSS2, masih banyak ditemukan dalam pembuatan sebuah website. Tetapi hadirnya CSS3 memperlihatkan imbas 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 menyerupai menciptakan animasi warna hingga animasi 3D. Untuk desainer sendiri, akan lebih dimudahkan dalam hal kompatibilitas website yang berjalan pada smartphone, mengapa? Karena CSS3 memiliki fitur media query yang memperlihatkan sumbangan untuk melaksanakan semua itu.
Artikel Terkait : Tutorial Membuat Website Sendiri, Menggunakan HTML5, CSS3, PHP dan MySQL
Oke, eksklusif saja pada pokok bahasan kita, yaitu menciptakan layout kolom koran dengan memakai CSS3. Pada tutorial ini, aku memakai notepad++ yang sanggup juga anda d0wnl0ad secara gratis di website resminya (http://notepad-plus-plus.org). Pada tutorial pembuatan layout kolom dengan CSS3 ini, aku asumsikan anda sudah mengerti penulisan sintaks pada CSS yaitu selector, property dan value. Bila belum mengenal ketiga penulisan sintaks tersebut, silahkan baca dan d0wnl0ad pada goresan pena aku sebelumnya yaitu: tutorial css pdf lengkap.
Menggunakan Property Column
Pembuatan layout kolom koran dengan CSS3 berikut, memakai property column, dimana property column ini, dikembangkan dalam tiga macam, yaitu:
- column-count: dipakai untuk memilih banyaknya kolom yang akan dibentuk dalam sebuah elemen.
- column-gap: dipakai untuk mengatur lebar antar kolom yang dibuat.
- column-rule: dipakai untuk mengatur baris pembatas antar kolom.
property column ini sudah didukung sepenuhnya oleh browser opera, tetapi untuk google chrome mesti memakai awalan -webkit- dan mozilla firefox harus dengan awalan -moz-.
Artikel lain: 2 Buku Gratis Bahasa Pemrograman Web dengan PHP dan MySQL Terbaik
Berikut instruksi html dan css yang dibentuk untuk pembuatan kolom memakai 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 berguru microsoft office dan sistem pakar. Selain itu
di blog ini menyediakan tutorial lainnya menyerupai review ebook gratis, cyberpreneuship, tutorial internet, dan lain-lain. Awalnya umardanny.com memang
ditujukan untuk sharing atau mengembangkan ebook indonesia dan menggali lebih dalam sistem pakar. Sehingga ada beberapa artikel mengenai kesehatan yang awalnya
dibutuhkan sanggup menjadi knowledge base atau basis pengetahuan untuk sistem pakar, tapi pada perjalannaya artikel wacana kesehatan tidak pernah diupdate lagi.
Kaprikornus umardanny.com lebih fokus ke problem pembelajaran ms. office, seluk beluk sistem pakar dan pastinya ebook gratis Indonesia. Semoga Ebook Indonesia bisa
membantu banyak user Indonesia yang ingin mendapakan bahan gratis dan tentunya berkualitas.
</div>
</div>
</body>
</html>
Penjelasan dari instruksi CSS di atas:
Jumlah kolom yang dihasilkan sebanyak 4 buah, kemudian jarak antara kolom yakni 45 pixel. Untuk garis diantara kolom, lebarnya 5 pixel dengan bergaya dashed/garis putus-putus warna abu-abu. Anda juga sanggup memakai 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 memakai Teknik CSS3 Media Queries yakni responsive, dimana teknik tersebut yakni mengatur layout halaman sebuah website, sehingga tampilannya sanggup menyesuaikan berdasarkan lebar jendela browser.
Oke, berikutnya gunakan instruksi sebelumnya, untuk memperlihatkan teladan dari teknik media queries. Berikut instruksi yang tuliskan didalam tag style, sempurna 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 berguru microsoft office dan sistem pakar. Selain itu
di blog ini menyediakan tutorial lainnya menyerupai review ebook gratis, cyberpreneuship, tutorial internet, dan lain-lain. Awalnya umardanny.com memang
ditujukan untuk sharing atau mengembangkan ebook indonesia dan menggali lebih dalam sistem pakar. Sehingga ada beberapa artikel mengenai kesehatan yang awalnya
dibutuhkan sanggup menjadi knowledge base atau basis pengetahuan untuk sistem pakar, tapi pada perjalannaya artikel wacana kesehatan tidak pernah diupdate lagi.
Kaprikornus umardanny.com lebih fokus ke problem pembelajaran ms. office, seluk beluk sistem pakar dan pastinya ebook gratis Indonesia. Semoga Ebook Indonesia bisa
membantu banyak user Indonesia yang ingin mendapakan bahan gratis dan tentunya berkualitas.</div>
</div>
</body>
</html>
Penjelasan dari instruksi di atas :
@media screen and (max-width: 800px) dipakai untuk mendeteksi lebar maksimal dari layar. Jika lebar window antara 601 pixel hingga dengan 800 pixel maka jumlah kolom dikurangi menjadi tiga. Jika lebar window/jendela antara 361px hingga 600px maka jumlah kolom ditentukan menjadi dua kolom dan yang terakhir jikalau lebar jendela di bawah 361 maka kolom hanya berjumlah satu.
Download
Untuk mend0wnl0ad source code di atas, silahkan klik disini.
Sumber aciknadzirah.blogspot.com
0 Response to "Membuat Layout Kolom Koran Dengan Memakai Css3"
Posting Komentar