Efecto sombra

El efecto sombra ha sido uno de mis favoritos, suelo aplicarlos a las imágenes pero esta vez se trata de añadir el efecto sombra a las entradas y en su interior podemos añadir cualquier contenido.
Este efecto se crea con tres cajas, y las sombras se añaden con la clase "blur" y "shadow" para el ejemplo se va a añadir las sombras en color gris pero si utilizáis un color de fondo para el blog es recomendable que la sombra sea del mismo color pero en tono más oscuro.
Nos situamos antes de ]]></b:skin> y añadimos lo siguiente:

.blur{
background-color: #ccc; /*color de sombra 1ª*/
color: inherit;
margin-left: 4px; /*borde izquierdo*/
margin-top: 4px; /*borde superior*/
}

.shadow,
.content{
position: relative;
bottom: 2px;/*borde inferior*/
right: 2px; /*borde derecho*/
}
.shadow{
background-color: #666; /*color de sombra 2ª*/
color: inherit;
}
.content{
background-color: #fff; /*color de fondo de la caja*/
color: #000; /*color de texto*/
border: 1px solid #000; /*borde de la caja*/
padding: .5em 2ex;
}

Guardamos los cambios y nos dirigimos al editor de entradas donde añadiremos lo siguiente:

<div class="blur">
<div class="shadow">
<div class="content">aquí el contenido de la caja</div>
</div>
</div>

En nuestro blog veríamos algo así:

Podemos cambiar el color de borde y de las dos sombra, color de fondo, de texto y añadir una imagen de fondo en .content sustituyendo donde dice background-color: #fff; por background:url('aquí la url de tu imagen de fondo');

Visto en Desarrolloweb