CSS3 generasi terakhir dari CSStelah dirilis, dan perkembangan begitu pesat hingga saat ini, hampir semua browser terbaru bisa menjalankannya. Meskipun tidak seluruh rule CSS 3 telah diimplementasikan dengan efektif (bayangkan kita menggunakan prefix -moz untuk mozilla dan -o- untuk opera, wow ini sungguh merepotkan)  ini tidak menghalangi para web developer dan web designer untuk menggunakan.

Dan mungkin beberapa pembaca tertarik juga untuk menggunakannya, jadi mari kita lihat beberapa fitur terbaru dari CSS 3 yang mungkin akan sering kita gunakan.

1. Border Radius

Kita masih ingat ketika menginginkan sebuah sudut yang halus di web, kita akan membuka GIMP atau Inkscape lalu kita buat sebuah image dengan sudut yang kita inginkan, kita save/export, baru kita gunakan di web.

Lupakan semua proses menrepotkan tersebut karena kini kita bisa membuatnya dengan sebuah baris perintah pada CSS.

cukup gunakan : ‘border-radius’

tiap browser berbeda dalam penggunaannya :

mozilla : -moz-border-radius

webkit/safari : -webkit-border-radius

opera : border-radius

catatan untuk webkit browser terbaru perintah untuk border radius telah berubah. jadi anda bisa menghilangkan prefix -webkit- jika anda mau.

Penggunaannya cukup mudah , contoh yang paling sering digunakan sebagai berikut :

border-radius : 5px;

5px diatas menunjukkan nilai kelengkungan dari sudut pada element html. singkat kata semakin besar nilainya semakin radius lengkungannya semakin besar.

Contoh Penggunaan Border Radius Pada Tombol Submit

contoh lainnya coba sorot nama penulis dari tulisan ini, maka akan terlihat sebuah persegi yang memiliki sudut melengkung dengan radius 5px;

Contoh pengunaan border-radius dalam dunia web mungkin bisa kita lihat pada Jquery-UI

2. @font-face

Seperti yang telah diketahui sebuah font dalam web, akan tampil jika user yang membuka web tersebut memiliki font tersebut. lalu bagaimana jika ternyata font tersebut tidak dimiliki pembaca web. tentu saja font akan berubah. lalu bagaimana solusinya. tentu saja sesuai dengan sub judul ‘@font-face’.

format penggunaannya yang cukup sederhana  :

@font-face {
    font-family: "Droid Sans Mono";
    font-style: normal;
    font-weight: normal;
    src: local("Droid Sans Mono"), local("DroidSansMono"), url("http://themes.googleusercontent.com/font?kit=ns-m2xQYezAtqh7ai59hJUYuTAAIFFn5GTWtryCmBQ4") format("woff");
}

Dimana font-family adalah nama font yang akan digunakan pada perintah css lain, misal h2{font-family:”FontName”;font-size:2em;}. sedang src adalah alamat dari file font tersebut.

lalu dimana kita bisa mendapatkan font untuk digunakan pada css. Itu mudah, karena fontsquirrel akan mempermudah kita.

3. Box Shadow

fitur ketiga dan terkahir yang sering digunakan adalah efek bayangan pada sebuah element html. sepeti biasa penggunaan untuk tiap browser menggunakan prefix (-moz-box-shadow untuk mozilla, -webkit-box-shadow untuk webkit, box-shadow untuk opera),

contoh penggunaan box-shadow :

box-shadow : 0px 0px 5px #000;

dua angka terdepan (0px 0px) merupakan titik awal pembentukan bayangan. jika kita mengesetnya (5px 5px) maka koordinat awalnya ialah 5,5 yang berarti bayangan akan terletak sedikit turun

angka ketiga (5px) berarti radius dari bayangan, semakin besar akan semakin lebar bayangannya.

dan yang terakhir tentu sudah bisa ditebak, warna bayangan!

Bahkan anda bisa bermain-main dengan box shadow, seperti yang diperlihatkan oleh Ariona Rian dalam Bermain-main dengan css3 box-shadow

Box Shadow

Bahan Bacaan

Contoh diatas hanya sedikit dari contoh fitur CSS3, dan mungkin yang paling populer, untuk mengetahui lebih lanjut, ada beberapa web yang bisa memberi penjelasan mendetail dan lebih baik dari saya.

1. css3files

CSS3Files

2. css3.info

CSS3.info

3. Solusi CSS 3 pada IE

4. Tutorial CSS3