Añadir sombras fingiendo profundidad en tu blog

Hoy me gustaría cautivaros con un truco fácil de implantar en la plantilla, de vuestro blog de Blogger, el truco trata de añadir una sombra en la parte superior del blog, de modo qué la página a visitar, tenga un aspecto de profundidad y parezca que este hundida, en el marco de debajo de la barra de búsqueda, del navegador. Tal efecto, se podrá apreciar bien en tonalidades de fondo claro o no muy lóbregos. Este truco lo he extraído del gran blog de recursos de Blogger: Oloblogger, así que la autoría es de Oloman, el autor de dicho blog. Para más detalles sobre este truco dirigiros al enlace anterior o al enlace de más abajo, que veréis. Comparto éste tip, porqué, justamente hoy he añadido en mi plantilla, éste truco, y me ha parecido interesante hacer mención de tal mencionado truco. Bueno vayamos a implantar este efecto tan bueno y maravilloso en nuestro blog, para empezar pueden ver una captura del efecto en modo de imagen a continuación o seguidamente, o también lo pueden comprobar mirando debajo de el navegador, verán la sombra y también al bajar el scroll:

Para añadirlo en tu blog de Blogger, sigue la instrucciones!

1. Entra en Blogger.
2. Y ahora ves a Plantilla & Editar HTML.
3. Copia y pega los siguientes CSS.
4. Una vez copiado el CSS, busca con Ctrl+F la etiqueta ]]></b:skin>:
5. Y antes de dicha etiqueta añade los siguientes estilos.

body:before {
content: "";
position: fixed;
top: -10px;
left: 0;
width: 100%;
height: 10px;
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
-moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
-o-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
-ms-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
box-shadow: 0px 0px 10px rgba(0,0,0,.8);
z-index: 100;
}

Si deseas añadir este efecto en el lateral, es de éste modo!

body:after {
content: "";
position: fixed;
top: 0;
right: 0;
width: 1px;
height: 100%;
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
-moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
-o-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
-ms-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
box-shadow: 0px 0px 10px rgba(0,0,0,.8);
z-index: 100;
}

Oloblogger
Get free premium widgets for your blog and website.