CSS Sombras

NOTA: Para adaptarlo un poco a los nuevos cánones de CSS, he hecho una especie de "compendio" entre el sistema original y Éste

---------------------------------------------------

No ermnina de gustarme por las inevitables cajas, pero... tengo que reconocer que no queda demasiado mal en imágenes; y en textos puede ser muy útil (casi como una pullquote):

Una imagen en el primer ejemplo. Un texto en este segundo. En ambos casos la "sombra" es una imagen y un CSS, como explicaré a continuación

.- CSS:

/* CSS for all browsers */
.baseBlock{
width:180px;
box-shadow:10px 10px 5px #444;
-moz-box-shadow:10px 10px 5px #444;
-webkit-box-shadow:10px 10px 5px #444;
}

.baseBlockIn{/* Content part specially separated for fixing problems with z-index in IE7 */
padding:10px 15px;
background:#f9f;
}

.ieShadow{
display:none;
}
/* CSS for IE versions 8 and below through conditional comments */
.baseBlock{
position:relative;
z-index:3;
}

.baseBlockIn{
position:relative;
z-index:4;/* z-index for content must be bigger then z-index for shadow */
}

.ieShadow{
display:block;
position:absolute;
z-index:2;
top:5px;
left:5px;
right:-5px;
bottom:-5px;
filter:progid:DXImageTransform.Microsoft.Blur(pixelradius=5);
-ms-filter:"progid:DXImageTransform.Microsoft.Blur(pixelradius=5)";
background-color:#444;
}

.- HTML:

IMAGEN:
<div class="shade">

<img src="http://phoenity.com/newtedge/drop_shadow/shadow.png" width="0" height="0" alt="" class="shade" /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhihXzhtb7inHLsEL-GXpFtsMwAAzIrHu6MHhyphenhyphen7HXn2n3Xluda-bUnBHJPmuEcxuHrRrP7AVHnm2EZoOnhh0LAGj1EqCxrANTdq8QCPcSJNNz5M9A_-UE5rR1kjhOqro-hiiNJv1Pcx89A/s400/clipping.png" width="250" height="90" alt="" />

</div>



TEXTO:
<div class="shade">

<img src="http://phoenity.com/newtedge/drop_shadow/shadow.png" width="0" height="0" alt="" class="shade" />Una imagen en el primer ejemplo. Un texto en este segundo. En ambos casos la "sombra" es una imagen y un CSS, como explicaré a continuación</div>

Facilito...