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:
- offset bayangan horisontal, positif berarti bayangan akan di sebelah kanan kotak, offset negatif akan menempatkan bayangan di sebelah kiri kotak
- offset vertikal, yang negatif berarti bayangan kotak-akan di atas kotak, yang positif berarti bayangan akan di bawah kotak
- 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;
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%;
-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;
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%;
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
Tidak ada komentar:
Posting Komentar
Plisss...
Jangan nyepam (spam), jangan promosi (apapun itu), jangan SARA, jangan OOT...
Mohon kerja samanya, berikan komentar yang berbobot dan bermanfaat bagi semua... ^^