CSS Box Shadow - Membuat Bayangan Pada Elemen Tertentu

Css Box Shadow adalah salah satu property dari css3 yang berfungsi untuk memberikan efek bayangan pada elemen tertentu pada sebuah web.

Nilai Properti

*nilai negatif pada value diizinkan

Nilai	Deskripsi
None	Nilai awal, tidak ada bayangan yang ditampilkan
h-shadow	Penting, Berfungsi untuk mengatur bayangan secara horizontal*
v-shadow	Penting, Berfungsi untuk mengatur bayangan secara vertikal*
blur	Opsional, untuk mengatur jarak blur
spread	Opsional, untuk mengatur ukuran bayangan
color	Opsional, untuk mengatur warna bayangan
inset	Opsional, untuk membuat bayangan berada didalam elemen
initial	Set, untuk membuat setingan secara standar
inherit	Set, untuk membuat bayangan sama seperti elemen pertama

berikut ini adalah contoh dasar penggunaan CSS Box Shadow pada elemen:

Bayangan Diluar

div {
  -webkit-box-shadow:15px 10px 8px #666; /* Khusus untuk Safari & Chrome */
  -moz-box-shadow:15px 10px 8px #666;    /* Khusus untuk Firefox */
  box-shadow:15px 10px 8px #666;         /* Standar W3C */
}

Bayangan Didalam

div {
  -webkit-box-shadow:inset 15px 10px 8px #666; /* Khusus untuk Safari & Chrome */
  -moz-box-shadow:inset 15px 10px 8px #666;    /* Khusus untuk Firefox */
  box-shadow:inset 15px 10px 8px #666;         /* Standar W3C */
}

pada bagian 15 adalah offset untuk mengatur bayangan horizontal, sedangkan pada bagian 10 adalah offset untuk mengatur bayangan vertikal, 8 adalah tingkat blur, dan #666 adalah warna bayangan. pada bagian 15, 10, dan 8 anda bisa membuat value tersebut menjadi negatif terkecuali pada bagian warna.
Anda bisa mengatur penempatan css tidak langsung (top down) atau secara secara langsung (inline) seperti dibawah ini:

Top Down

<style>
#elemen1 {
  -webkit-box-shadow:inset 15px 10px 8px #666; /* Khusus untuk Safari & Chrome */
  -moz-box-shadow:inset 15px 10px 8px #666;    /* Khusus untuk Firefox */
  box-shadow:inset 15px 10px 8px #666;         /* Standar W3C */
}
</style>
<div id='elemen1'>Elemen 1</div>

Inline

<div id='elemen2' style='-webkit-box-shadow:15px 10px 8px #666;-moz-box-shadow:15px 10px 8px #666;box-shadow:15px 10px 8px #666;'>Elemen 2</div>

dan saya telah membuat beberapa contoh penerapan box shadow ini secara mendetail, sudah diberi warna oranye dan biru untuk memberitahukan kepada anda yang mana harus diubah:

-webkit-box-shadow: 10px5px 7px #222;
-moz-box-shadow: 10px5px 7px #222;
box-shadow: 10px5px 7px #222;

-webkit-box-shadow: 0 10px 7px #222;
-moz-box-shadow: 0 10px 7px #222;
box-shadow: 0 10px 7px #222;

-webkit-box-shadow: 10px 0 7px #222;
-moz-box-shadow: 10px 0 7px #222;
box-shadow: 10px 0 7px #222;

-webkit-box-shadow: 0 0 7px #222;
-moz-box-shadow: 0 0 7px #222;
box-shadow: 0 0 7px #222;

-webkit-box-shadow: 0 0 20px #222;
-moz-box-shadow: 0 0 20px #222;
box-shadow: 0 0 20px #222;

-webkit-box-shadow: 0 0 20px #f10c0c;
-moz-box-shadow: 0 0 20px #f10c0c;
box-shadow: 0 0 20px #f10c0c;

-webkit-box-shadow: 10px 5px 0 #222;
-moz-box-shadow: 10px 5px 0 #222;
box-shadow: 10px 5px 0 #222;

-webkit-box-shadow: -10px -5px 0 #222;
-moz-box-shadow: -10px -5px 0 #222;
box-shadow: -10px -5px 0 #222;

-webkit-box-shadow:inset 10px 5px 7px #222;
-moz-box-shadow: inset 10px 5px 7px #222;
box-shadow: inset 10px 5px 7px #222;

-webkit-box-shadow: inset 0 10px 7px #222;
-moz-box-shadow: inset 0 10px 7px #222;
box-shadow: inset 0 10px 7px #222;

-webkit-box-shadow: inset 10px 0 7px #222;
-moz-box-shadow: inset 10px 0 7px #222;
box-shadow: inset 10px 0 7px #222;

-webkit-box-shadow: inset 0 0 7px #222;
-moz-box-shadow: inset 0 0 7px #222;
box-shadow: inset 0 0 7px #222;

-webkit-box-shadow: inset 0 0 20px #222;
-moz-box-shadow: inset 0 0 20px #222;
box-shadow: inset 0 0 20px #222;

-webkit-box-shadow: inset 0 0 20px #f10c0c;
-moz-box-shadow: inset 0 0 20px #f10c0c;
box-shadow: inset 0 0 20px #f10c0c;

-webkit-box-shadow: inset 10px 5px 0 #222;
-moz-box-shadow: inset 10px 5px 0 #222;
box-shadow: inset 10px 5px 0 #222;

-webkit-box-shadow: inset -10px -5px 0 #222;
-moz-box-shadow: inset -10px -5px 0 #222;
box-shadow: inset -10px -5px 0 #222;