Drop Shadow com CSS

Recentemente elaborei um container para dashboards. Enquanto estava no photoshop tudo bem. Drop shadow nos dashboards, tudo bem, tudo feliz.

Quando fui levar para o html, procurei por drop shadow com CSS ou jQuery. Achei alguns exemplos, mas nenhum deles fez um drop shadow com transparência, isto é, preciso ter uma cor solida de fundo. Fiquei frustrado. Talvez eu tenha reinventado a roda, mas consegui com pouco código fazer um efeito drop shadow simples e com transparência ;).

A única limitação que consigo ver (até agora) é que a caixa deve ter no mínimo 234x222px, que no meu caso atende a necessidade.

Então vamos lá.

No html, digitamos:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="pt-br"> <head profile="http://gmpg.org/xfn/11"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title></title> <link rel="stylesheet" href="arquivo-css.css" type="text/css" media="screen" /> </head> <body> <ul class="dashwin" style="top:200px;left:50px;width:370px;height:250px;"> <li> <div class="content"> hello! </div> </li> <li class="rightcorner1"></li> <li class="rightback"></li> <li class="bottom"> <ul> <li class="leftcorner"></li> <li class="centerback"></li> <li class="rightcorner2"></li> </ul> </li> </ul> </body> </html>

No CSS, digitamos:
.dashwin, .dashwin > li.bottom > ul { margin:0; padding:0; list-style:none; } .dashwin { min-width:234px; min-height:222px; position:absolute; } .dashwin > li > div.content { width:100%; height:99%; position:absolute; left:-7px; top:-2px; border:1px solid #666; background:#ccc; } .dashwin > li.rightcorner1 { width:100%; min-width:5px; height:6%; min-height:14px; background:url(corpo-win-d-1.png) no-repeat top right; } .dashwin > li.rightback { width:100%; min-width:5px; height:93%; min-height:50px; background:url(corpo-win-d-2.png) repeat-y right; } .dashwin > li.bottom { width:100%; min-width:5px; height:1%; min-height:14px; } .dashwin > li.bottom ul { width:100%; background:#f4f4f4; } .dashwin > li.bottom li.leftcorner { width:6%; min-width:14px; height:8px; float:left; background:url(corpo-win-b-1.png); } .dashwin > li.bottom li.centerback { width:88%; min-width:50px; height:8px; float:left; background:url(corpo-win-b-2.png); } .dashwin > li.bottom li.rightcorner2 { width:6%; min-width:14px; height:8px; float:left; background:url(corpo-win-b-3.png) right; }