Jun 17, 2011

Cara buat kolom text magazine dengan CSS3

Satu atau dua tahun yang lalu mungkin anda pernah mendengar CSS versi 3 telah keluar, meskipun saat itu masih beta tapi ini menjadi kabar yang menggembirakan, karena CSS3 tidak akan dirilis jika tidak membawa banyak sekali fitur-fitur baru di dalamnya.

Namun saat itu baru sedikit browser internet yang mendukung CSS3 ini. Browser yang mensupport CSS baru Safari v.3, namun sekarang Firefox pada versi ke 3.6 sudah mendukung CSS3.

Bagi anda yang mungkin belum mengetahui CSS, CSS digunakan dalam pembuatan layout yang tableless, artinya pembuatan layout tidak lagi menggunakan metode table, karena dampak dari penggunaan table yang paling terasa adalah beratnya layout yang dihasilkan karena begitu banyak kode-kode dari hasil penggunaan table.

Tableless pun menjadi standarisasi bagi seorang SEO-er, karena sifatnya yang search engine friendly. Tidak hanya dalam pembuatan layout, CSS3 pun efektif digunakan dalam pembuatan style-style yang mempercantik sebuah website.

Saat ini tutorial yang akan k'ian bahas adalah mengenai cara membuat kolom text, atau tulisan bergaya kolom pada koran yang biasa kita baca.. berikut tutorialnya
Copy kode dibawah ini dan letakkan pada posisi "entry kode", atau kalau kita mau membuatnya single kode juga bisa dengan menambahkan beberapa kode.
-moz-column-count:3;
menjadikan text memiliki 3 kolom, silahkan diubah jika menginginkan bukan hanya 3 kolom.

-moz-column-rule:1px solid black;
dan memiliki garis tengah, kode hampir sama dengan border

-moz-column-gap: 30px;
gap disini sama seperti padding, atau jarak antar text.
Untuk penggunaan single kode, kita tambakan beberapa kode dan parse awalnya..lihat contoh kode berikut ini:
.contoh{text-align:justify;
-moz-column-count:4;
-moz-column-rule:1px solid #d2d2d2;
-moz-column-gap: 30px;}
Bisa dilihat bahwa k'ian menggunakan sebuah parse dengan nama .contoh, itu artinya jika kita menginginkan sebuah tulisan memiliki kolom maka cukup kita panggil kodenya saja. hasilnya :

Satu atau dua tahun yang lalu mungkin anda pernah mendengar CSS versi 3 telah keluar, meskipun saat itu masih beta tapi ini menjadi kabar yang menggembirakan, karena CSS3 tidak akan dirilis jika tidak membawa banyak sekali fitur-fitur baru di dalamnya, namun saat itu baru sedikit browser internet yang mendukung CSS3 ini. Browser yang mensupport CSS baru Safari v.3, namun sekarang Firefox pada versi ke 3.6 sudah mendukung CSS3. Bagi anda yang mungkin belum mengetahui CSS, CSS digunakan dalam pembuatan layout yang tableless, artinya pembuatan layout tidak lagi menggunakan metode table, karena dampak dari penggunaan table yang paling terasa adalah beratnya layout yang dihasilkan karena begitu banyak kode-kode dari hasil penggunaan table. Tableless pun menjadi standarisasi bagi seorang SEO-er, karena sifatnya yang search engine friendly. Tidak hanya dalam pembuatan layout, CSS3 pun efektif digunakan dalam pembuatan style-style yang mempercantik sebuah website.
 

AKTUAL NEWS ONLINE

Author & Editor

Has laoreet percipitur ad. Vide interesset in mei, no his legimus verterem. Et nostrum imperdiet appellantur usu, mnesarchum referrentur id vim.

0 comments:

Post a Comment

Komen yang bijak sangat di nantikan...! Terimakasih..