Deklarasi Tunggal CSS3 Box Shadow Property

Setelah semua browser mendukung deklarasi tunggal CSS3 border radius property dalam bentuk penggunaan kode CSS yang sama “border-radius“, kini CSS3 box shadow property telah juga didukung dalam satu deklarasi tunggal. Tak perlu lagi tambahan kode berbeda untuk tiap-tiap browser guna menampilkan box shadow. Kode khusus seperti -mox-box-shadow dan -webkit-box-shadow sudah menjadi masa lalu yang tak harus lagi menambah penuhnya kode CSS sebuah desain blog. Cukup tuliskan box-shadow: …px …px …px color; maka box shadow akan dengan cantiknya terlihat di semua browser besar seperti Opera 11.51, Mozilla Firefox 6.1, Safari 5.1, Google Chrome dan bahkan SeaMonkey.

untuk melihat cara penulisan Kodenya Silahkan klik Show

Penulisan Kode Box Shadow Terbaru

<style type="text/css">
.box{
 width:400px;
 height:200px;
 background:#eee;
 margin:20px auto;
 padding:10px;
 border:2px solid #999;
 border-radius:10px;
 box-shadow:0 0 12px #000;
}
</style>

<div class="box"></div>

Catatan:

1. Kode Warna box shadow bisa dituliskan dalam bentuk teks seperti red, green, blue …dst, atau dalam bentuk berbeda seperti #000 (hitam), #fff (putih) #FF0000 (red). Anda bisa juga menggunakan rgba color, seperti misalnya rgba(0,0,0,0.9).
2. Dengan deklarasi tunggal CSS3 box shadow property maka semua kode CSS3 lama yang selama ini memenuhi template dan masih menggunakan bentuk tambahan kode untuk masing-masing browser (-moz dan -webkit), harus segera di edit ulang agar kode CSS dalam template menjadi lebih ringkas dan tidak menambah beban loading blog.
3. Setelah border radius property dan box shadow property mendapat dukungan penuh dari browser-browser besar dalam bentuk deklarasi yang sama (tunggal), perlu diketahui juga bahwa pada saat ini CSS3 outline-offset juga telah didukung secara penuh oleh Opera, Mozilla, Google Chrome, Safari dan tentu saja tak ketinggalan pula anak buah Mozilla si-SeaMonkey