Este es un truco muy sencillo que le permitirá aportar profundidad a sus páginas web: http://playground.genelocklin.com/depth/
La técnica consiste en aplicar la pseudo-clase :before a body.
El estilo CSS:
body:before {
/* Contenido vacío*/
content: "";
/* Posición*/
position: fixed;
z-index: 100;
top: -10px;
left: -10px;
/* Ancho y alto */
width: 110%;
height: 10px;
/* Sombra */
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
-moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
-ms-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
-o-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
box-shadow: 0px 0px 10px rgba(0,0,0,.8);
}
No hay ningún contenido: content: "", pero para el navegador, sí que hay un elemento, aunque esté vacío. Por lo tanto, no hay nada que mostrar.
Ese contenido vacío está colado en una posición fija, para que no sea desplazado cuando se use la barra de desplazamiento. Se ha colocado a -10 píxeles, que será el tamaño del difuminado.
position: fixed;
z-index: 100;
top: -10px;
left: -10px;
El ancho es mayor que el de la página y la altura es de 10 píxeles.
width: 110%;
height: 10px;
La sombra se ha colocado a 0 píxeles horizontal y verticalmente, el tamaño del difuminado es de 10 píxeles y se ha usado el color negro, con una ligera transparencia:
box-shadow: 0px 10px rgba(0,0,0,.8);
Así se visualizará sobre el fondo blanco de la página:
Espero haber ayudado en algo. Hasta la próxima oportunidad!
No hay comentarios:
Publicar un comentario