Beranda CSS3

Tingkat Lanjut Tentang CSS Box-Shadow

21.58
A+ A- Print Email

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;
}