Teknik CSS 3 yang harus anda ketahui untuk membuat website yang kreatif

Kebanyakan dari anda mungkin sudah mendengar sedikit mengenai CSS3.Pada CSS3 ada beberapa teknik baru yang sangat menarik dan kebanyakan akan bekerja dengan baik pada browser-browser seperti Firefox, Chrome, Opera dan Safari, tentunya dengan dukungan Browser Extension.


Jika anda belum mengetahui apa itu Browser Extension, di bawah ini saya tulis beberapa Browser Extension dan contoh penggunaannya.

box-shadow: #333 3px 3px 4px;
-moz-box-shadow: #333 3px 3px 4px;
-webkit-box-shadow: #333 3px 3px 4px;

Contoh diatas adalah kode CSS3 yang digunakan untuk membuat efek Drop Shadow pada sebuah Image. Kode awalan yang berwarna merah itulah yang disebut Browser Extension. Berikut sedikit penjelasannya:

•  -moz-adalah Browser Extension untuk mozilla/Firefox/Gecko
• Sedangkan -webkit- Untuk Safari dan Google Chrome.

Sebagian orang mungkin sudah tahu bahwa salah satu kelemahan dari CSS3 adalah " kita harus selalu menuliskan Browser Extensionnya agar bisa diterjemahkan oleh Firefox, Safari dan Chrome ". Dan, perlu anda ketahui bahwa IE tidak mendukung CSS3 seperti yang bisa dilihat bahwa IE tidak mempunyai Browser Extension seperti yang lainnya.

Baiklah, langsung saja saya Sebutkan beberapa teknik yang bisa digunakan pada CSS3, diantaranya:

1) Drop Shadow
    Pada effect drop shadow ini ada 4 nilai yang perlu diperhatikan. Yang pertama adalah nilai warna dari suatu objek yang diberi efek drop shadow, selanjutnya adalah nilai yang menunjukan posisi dari efek tersebut secara vertikal dan horizontal, yang ketiga adalah nilai yang menentukan seberapa lebar efek blur pada drop shadow dan yang terakhir adalah jumlah efek sebaran dari blur tersebut.

box-shadow: #333 3px 3px 4px;
-moz-box-shadow: #333 3px 3px 4px;
-webkit-box-shadow: #333 3px 3px 4px;

2) Gradients

3) RGBA

4) HSL

5) Border Color

6) Text Selection Color

7) Transform

8) Multi Colom Layout

Mungkin itu hanyalah sedikit info singkat mengenai CSS3 semoga bermanfaat bagi anda, terutama yang sedang mendalami CSS.
Good Luck... ^_^