Home » , » Lebih Jauh tentang CSS Box-Shadow

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:

CSS Box Shadow
Multiple Box Shadow


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:

CSS3 Box Shadow 4 Digit Angka
4 Angka dan 1 Kode Warna


div {
-webkit-box-shadow:0px 0px 5px 10px black;
-moz-box-shadow:0px 0px 5px 10px black;
box-shadow:0px 0px 5px 10px black;
}


Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Creating Website

0 comments:

Post a Comment

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. Homtimpa - All Rights Reserved
Template Modify by Creating Website
Proudly powered by Blogger