La sombra estará por tanto debajo de las barras de herramientas del navegador con un resultado similar a este. Hay que tener en cuenta que el efecto sólo se podrá apreciar bien en sitios con fondos claros o al menos no muy oscuros.
La sombra la ubicaremos con un posicionamiento fijo, así que cuando nos desplacemos por la página, esta siempre permanecerá visible en la parte de arriba.
La forma de añadirla es mediante la pseudoclase :before asociada al contenedor principal de todas las páginas web, esto es, body. Ahí añadiremos un pequeño desplazamiento vertical, una altura limitada y un ancho igual al total de la ventana. El resto lo hacen un box-shadow y un z-index con valor alto para que ningún elemento se superponga a la sombra.
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;
}
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;
}
Este código es simple CSS, que en Blogger habrá que insertar entre las etiquetas skin para que funcione.
Se puede añadir otra sombra adicional (o en lugar de la anterior) en el lado derecho, realzando más el efecto. Para ello habría que añadir unas propiedades y valores muy parecidos pero en el :after.
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;
}
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;
}
¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.
Y muchos más artículos interesantes si nos sigues en...
MUY BUENO GRACIAS OLOMAN!
ResponderEliminarSI, le da un toque guapo y elegante. Yo hace tiempo que lo hice en mi blog REDEANDO, aunque no se aprecia mucho por tener la imagen de la cabecera en tonos oscuros.
ResponderEliminarMe lo guardo para otro rato ;)
ResponderEliminarUn efecto muy guapo, gracias Oloman.
Un saludo.
Me gusta es una quedada bien guapa ;)
ResponderEliminarSalud!!
Buenísimo, gracias. Le da un toque sutil.
ResponderEliminarExcelente, ahora necesito otro fondo xD
ResponderEliminarSaludos gente!
Mis saludos.Como puedo poner en mi blog los titulos de los post como los tuyos
ResponderEliminarSaludos
pedroa
Es una de las múltiples cosas que tengo pendientes de publicar, pero si te es urgente más vale que no te crees expectativas de rapidez... :(
Eliminarhttp://css3generator.com/ esta es muy util para obtener codigos de sombras, aunqie ya oloman dio en el clavo, pero me vino muy bien esa pagina
ResponderEliminarGracias Jo.Ta. Esa y otras similares nos hacen la vida más fácil ;)
EliminarMe Gusta !!! Gracias... un saludito
ResponderEliminarBuenas Oloblogger,
ResponderEliminarme gusta este efecto, pero a mí me interesa que esté en todo el contorno del blog. Imagino que habría que poner algún codigo en Main-wrapper u Outer-wrapper, no lo sé. No obstante estas tags no están en mi plantilla. ¿Sabes cómo poner sombra a todo el blog?
Gracias.
Buenas. Para poner una sombra en los cuatro bordes tendrías que aplicar la sombra sin after ni before, directamente sobre la caja principal (yo tampoco se cual es en concreto porque depende del blog y tienes varios) con un inset. Algo así:
Eliminarbox-shadow: 0 0 30px #333 inset;
Dependiendo de la estructura del blog puede que no sea en el body dónde la tengas que poner, sino por ejemplo en el outer y además en el header... o lo que sea que use tu plantilla.