box-shadow

by Jens Grochtdreis

HTML

<div class="shadow">
    <p>Green arrow sentry venom cyclops; aztar hawkeye ahab captain atom corsair urich, karnak. Impossible man agent 13 wonder girl thing bolt asp adam monroe green arrow. Batgirl blacklash, montana genesis cannonball ancient one dl hawkins, moira mactaggert magician kenny "king kong" mcfarlane. Red tornado shang-chi spawn light lass; northstar banshee mole man beak big daddy! Power man electro vertigo captain atlas, phoebe mcallister whiz kid bolivar trask mister golog amphibian clay quartermain, light lass hawkman dash namora wonder woman? Nerd hulk silk spectre alpha dog steel, "heimdall master menace.".</p>
</div>    

<div class="shadow2"></div>

<div class="shadow3"></div>

<div class="shadow4"></div>

CSS

.shadow {
    width: 75%;
    padding: 10px;

-webkit-box-shadow: 2px 2px 2px #666; /* only for mobile webkit */
         box-shadow: 2px 2px 2px #666;

    /* box-shadow-simulation for IE*/  
    background: #fff; /* needed for IE */
    zoom: 1; /* maybe hasLayout is necesseray */
    filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=2px, OffY=2px, Color='#102102102');
}

.shadow2 {
    width: 400px;
    height: 160px;
    background: #a20000;
    margin: 30px 0;
   
 -webkit-box-shadow: 10px 5px 15px rgba(0,0,0,0.5);
         box-shadow: 10px 5px 15px rgba(0,0,0,0.5);
  
   /* box-shadow-simulation for IE*/  
   zoom: 1; /* maybe hasLayout is necesseray */
   filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=10px, OffY=5px, Color='#80000000');
    
}

.shadow3 {
    width: 400px;
    height: 160px;
    background: rgb(0,100,150);
    margin: 30px 0;

 -webkit-box-shadow: 20px 20px 15px -15px #333;
         box-shadow: 20px 20px 15px -15px #333;
}

.shadow4 {
    width: 400px;
    height: 160px;
    background: #fd8700;
    margin: 30px 0;

 -webkit-box-shadow: 0 20px 45px -15px #000;
         box-shadow: 0 20px 45px -15px #000;
}


body {padding: 40px;}

JavaScript

// prefixed version only necessary for mobile webkits