Efecto sombra con CSS

Una forma de darle sombra a un contenedor div es mediante el método background-color. Supongamos que nuestros contenedor 'contenido-texto' debe tener una sombra, podemos hacerlo incluyédolo dentro de dos contenedor mas cuyo background-color sea de color gris lo cual dará la apariencia de sombra. Veamos como nos quedó y también veamos el código para entenderlo mejor:

HTML

<div class="penumbra">
 <div class="sombra">
  <div class="contenido-texto">
   <p>Cualquier contenido aqui</p>
  </div>
 </div>
</div>

CSS

.penumbra{
	background-color: #ccc; /*color de sombra*/
}

.sombra,
.contenido-texto{
	position: relative;
	bottom: 2px;
	right: 2px;
}

.sombra{
	background-color: #666; /*color de sombra*/
}

.contenido-texto{
	background-color: #ffffcc; /*color de fondo del contenido*/
	color: #000; /*color del texto*/
	border: 1px solid #000; /*color del borde*/
	padding: .5em 2ex;
}

Lo que hemos hecho es colocar uno sobre otro los contenedores de tal manera que penumbra y sombra tenga colores grises (#666 y #ccc) y estén debajo de contenido-texto, además hicimos que sombra y contenido-texto se corran 2px hacia abajo y derecha, y de esta manera se forma la sombra. Esta forma tiene su desventaja: ¿qué pasaría su el color de fondo es rojo? Entonces tendríamos el cambiar los colore de sombra y penumbra a un rojo intenso u oscuro para crear el efecto sombra. Más adelante veremos otras formas de trabajar las sombras.