Página con sombras simulando profundidad | Oloblogger Un truco fácil. Se trata simplemente de añadir una sombra en la parte superior del blog, de manera q...

24 de junio de 2012

Página con sombras simulando profundidad

Un truco fácil. Se trata simplemente de añadir una sombra en la parte superior del blog, de manera que parezca que la página visitada se encuentra hundida en el marco que deja libre el navegador para su visualización.

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;
}

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;
}

¿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.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

14 comentarios :

  1. MUY BUENO GRACIAS OLOMAN!

    ResponderEliminar
  2. SI, 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.

    ResponderEliminar
  3. Me lo guardo para otro rato ;)
    Un efecto muy guapo, gracias Oloman.
    Un saludo.

    ResponderEliminar
  4. Me gusta es una quedada bien guapa ;)
    Salud!!

    ResponderEliminar
  5. Buenísimo, gracias. Le da un toque sutil.

    ResponderEliminar
  6. Excelente, ahora necesito otro fondo xD

    Saludos gente!

    ResponderEliminar
  7. Mis saludos.Como puedo poner en mi blog los titulos de los post como los tuyos
    Saludos
    pedroa

    ResponderEliminar
    Respuestas
    1. 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... :(

      Eliminar
  8. http://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

    ResponderEliminar
    Respuestas
    1. Gracias Jo.Ta. Esa y otras similares nos hacen la vida más fácil ;)

      Eliminar
  9. Me Gusta !!! Gracias... un saludito

    ResponderEliminar
  10. Buenas Oloblogger,
    me 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.

    ResponderEliminar
    Respuestas
    1. 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í:
      box-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.

      Eliminar