Lebih Jauh tentang CSS Box-Shadow
Dasar
5px
yang pertama adalah offset sumbu X, 5px
yang ke dua adalah offset sumbu Y, 7px
adalah tingkat blur bayangan, black
adalah warna bayangan:
div {
-webkit-box-shadow:5px 5px 7px black;
-moz-box-shadow:5px 5px 7px black;
box-shadow:5px 5px 7px black;
}
Multiple Box Shadow
Sama seperti cara pertama, hanya saja kita membuat lebih dari satu baris deklarasi bayangan. Setiap satu bayangan dipisahkan dengan tanda koma:
div {
-webkit-box-shadow:
5px 5px 0px red,
10px 10px 0px green,
15px 15px 0px blue,
20px 20px 0px yellow,
20px 20px 3px black;
-moz-box-shadow:
5px 5px 0px red,
10px 10px 0px green,
15px 15px 0px blue,
20px 20px 0px yellow,
20px 20px 3px black;
box-shadow:
5px 5px 0px red,
10px 10px 0px green,
15px 15px 0px blue,
20px 20px 0px yellow,
20px 20px 3px black;
}
Box Shadow dengan Nilai Berupa 4 Angka
Secara umum terdiri dari tiga angka dengan satu kode warna untuk menentukan warna bayangan (??).
Sintaks CSS Box Shadow dengan 4 buah angka dan satu kode warna: 0px
yang pertama adalah offset sumbu X, 0px
yang ke dua adalah offset sumbu Y, 5px
adalah tingkat blur bayangan, 10px
adalah ketebalan bayangan dari elemen (lebih tampak sebagai border-width
dalam CSS Border, hanya saja ini diterapkan pada bayangan), black
adalah warna bayangan:
div {
-webkit-box-shadow:0px 0px 5px 10px black;
-moz-box-shadow:0px 0px 5px 10px black;
box-shadow:0px 0px 5px 10px black;
}
1 Komentar
Putra
nah, ada juga yah yg sedetail ini :)
suka banget blog ini :))