Box-shadow, Salah Satu Fitur yang Keren dari CSS3

Box-shadow, one of CSS3’s best new features

CSS3 backgrounds dan borders module mempunyai fitur baru yang bagus disebut box-shadow, yang diimplementasikan di Safari 3 +, Chrome dan Firefox 3.1 (Alpha).


Rule:

1. offset bayangan horisontal, positif berarti bayangan akan di sebelah kanan kotak, offset negatif akan menempatkan bayangan di sebelah kiri kotak
   
2. offset vertikal, yang negatif berarti bayangan kotak-akan di atas kotak, yang positif berarti bayangan akan di bawah kotak
   
3. blur radius, jika diatur ke 0 bayangan akan tajam, semakin tinggi angka, maka akan semakin kabur.

Bayangan itu harus mengikuti sudut melengkung yang dibuat dengan border-radius. Bagi anda yang browsernya belum mendukung, berikut adalah Screenshot-nya.

Harusnya ada bayangan di box ini....

Scriptnya adalah :

box-shadow: 10px 10px 5px #888;
padding: 5px 5px 5px 15px;

Lebih lengkap :

margin: 30px 0;
-o-box-shadow: 10px 10px 5px #888;
-icab-box-shadow: 10px 10px 5px #888;
-khtml-box-shadow: 10px 10px 5px #888;
-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;
padding: 5px 5px 5px 15px;
background-color: #eee;
width: 90%;

Harusnya di box ini juga ada bayangan yang sudutnya melengkung....

Scriptnya adalah :

box-shadow: -10px -10px 0px #000;
border-radius: 5px;
padding: 5px 5px 5px 15px;

Lebih lengkap :

margin: 30px 0;
box-shadow: -10px -10px 0px #000;
-o-box-shadow: -10px -10px 0px #000;
-icab-box-shadow: -10px -10px 0px #000;
-khtml-box-shadow: -10px -10px 0px #000;
-moz-box-shadow: -10px -10px 0px #000;
-webkit-box-shadow: -10px -10px 0px #000;
border-radius: 5px;
-o-border-radius: 5px;
-icab-border-radius: 5px;
-khtml-border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
padding: 5px 5px 5px 15px;
background-color: #eee;
width: 90%;

*.:｡✿ Don't forget to come back again ✿.｡.:*

Visit Wahyudi Blog !
Sumber: css3.info