Info Terbaru CSS3 : 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.

1. Keterangan/Catatan:.
   • 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).
   • 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.
   • 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

Contoh 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>