Sombras con CSS

Bueno, he revisado varios tutoriales acerca de sombras con CSS y ninguno me ha resultado sencillo. Es decir, soy principiante en esto del CSS y veía muchos atributos raros y esas cosas. Ninguno me resultaba fácil de asimilar.
Ya cansado, decidí hacerlo a mi manera. Es muy simple y no está nada mal. Sé que puede mejorarse y mucho. La idea es que puedan hacerlo los principiantes como yo. Vamos al grano:

La idea es tener un recuadro con texto y la sombra del mismo. Para ello, utilicé tres etiquetas DIV.

Como verán, dentro del contenedor tenemos la div del texto y la sombra. La div del texto se encuentra dentro de la div sombra. Ahora, al darle márgenes negativos al texto, se logra "desfazarlo" y lograr el efecto.

Veamos el código:

Código :

<style type="text/css">
body{
   margin:0;
   padding:0;
   text-align:center;
   font-family:"Trebuchet MS", Arial, Verdana;
   font-size:12px;
}
/* Aquí modificamos el Contenedor*/
#cont{
   text-align:center;
   padding: 5px;
   margin: 0 auto;
   width:500px; 
}
/* Ahora la sombra */
#sombra{
   margin:10px;
   background:#CCCCCC; /* Color de la sombra */
   border: solid 1px #CCCCCC; /* Color del borde */
   width: 500px;
}
/* Veamos el texto */
#text{
   border:solid 1px #CCCCCC;
   margin:-10px 2px 2px -10px; /* Aqui están los famosos márgenes negativos*/
   padding:2px;
   background:#FFFFFF; /* Le damos un color de fondo */
}
</style>

¿Cómo lo aplicamos?

Código :

<div id="cont">
   <div id="sombra">
      <div id="text">Aquí colocas tu texto.</div>
   </div>
</div>

El resultado.



¿Y que hay de las imágenes?

Pues, es lo mismo. Sólo cambio un atributo en el contenedor:

Código :

#cont{
   text-align:center;
   padding: 5px;
   margin: 0 auto;
   /* width:500px; */ float: left; 
}

Ahora lo aplicamos:

Código :

<div id="cont">
   <div id="sombra">
      <div id="text"><img src="imagen.jpg" /></div>
   </div>
</div>

El resultado.



¿Qué les parece?

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.