CSS Box Shadow Tingkat Lanjut

by Taufik Nurrohman

HTML

<div class="box" id="dasar">1</div>
<div class="box" id="multiple">2</div>
<div class="box" id="ketebalan">3</div>
<div class="box" id="inset">4</div>

CSS

.box {
 width:120px;
 height:120px;
 background-color:#66A807;
 margin:100px auto;
 padding:10px;  
 font:bold 14px Arial,Sans-Serif;
 color:black;    
}

#dasar {
 -webkit-box-shadow:5px 5px 7px black;
 -moz-box-shadow:5px 5px 7px black;
 box-shadow:5px 5px 7px black;
}

#multiple {
 -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;
}

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

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