Lebih Jauh tentang CSS Box-Shadow

Tabel Konten
  1. Dasar 
  2. Multiple Box Shadow 
  3. Box Shadow dengan Nilai Berupa 4 Angka 

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

Coba Sendiri Sebelumnya: Dasar CSS Box Shadow

1 Komentar

  • Putra

    nah, ada juga yah yg sedetail ini :)
    suka banget blog ini :))

Komentar telah ditutup.