Box Shadow CSS

Membuat Efek Bayangan Dengan CSS.

Pengenalan tentang box shadow adalah membuat efek bayangan pada box yang terbentuk.

1. Box Shadow 3D Effect
Box shadow ini menghasilkan effect 3d pada object yang telah dibuat.

Contoh : 
#box-shadow-3d{
width:200px;
height:200px;
background:lime;
box-shadow:10px 10px 15px 0px #000;
}


maka hasilnya : 




2. Box Shadow Inner Shadow


Box shadow yang membuat bayangan yang terbentuk masuk ke dalam box.

Contoh :

#box-shadow-3d{
width:200px;
height:200px;
background:lime;
box-shadow:inset 0px 0px 45px  red;
}

maka hasilnya : 

3. Box Shadow Outer Shadow

Box shadow yang membuat bayangan yang terbentuk keluar dari box.

Contoh :

#box-shadow-3d{
width:200px;
height:200px;
background:lime;
box-shadow:0px 0px 25px   red;
}

maka hasilnya : 

4. Box Shadow One Side

Box shadow yang membuat bayangan yang terbentuk masuk pada box.

Contoh :

#box-shadow-3d{
width:200px;
height:200px;
background:lime;
box-shadow:0px 15px 10px -10px #000;
}

maka hasilnya : 

4. Box Shadow Multitiple

Box shadow yang dapat membuat lebih dari satu bayangan object. pada box shadow ini jika dikembangkan dengan cermat maka akan menghasilkan bayangan maksimal seperti Effect 3D yang maksimal dll bisa anda kembangkan sendiri dengan kreatifitas masing-masing.

Contoh :

#box-shadow-3d{
width:200px;
height:200px;
background:lime;
box-shadow:0px 15px 10px -10px #000;
}

maka hasilnya :