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