1. Objetivo
Queremos obtener el aspecto de una sombra debajo de una fotografía con los bordes ligeramente inclinados. La técnica está "chupada" (¡solamente había que tener la idea!). Vamos a usar una sombra, a la que le vamos a aplicar una rotación. Este es el sitio web que presenta dicha técnica: http://nimbupani.com/drop-shadows-with-css3.html
2. La fotografía
La imagen de la fotografía se encuentra dentro de una caja <div> con un código de identificación:
<div id="foto">
<img src="caminata.jpg" alt="Panorama" />
</div>
Vamos a aplicar ahora un estilo muy sencillo, por diversión... Pero, sobre todo, porque tenemos que posicionar la caja <div>.
#foto {
position: relative;
margin: 20px auto;
width: 500px;
height: 140px;
padding: 10px;
border: 1px solid #ccc;
background-color: #eee;
}
El resultado visual obtenido inicialmente:
3. La sombra bajo la fotografía
Para "insertar" una sombra debajo de la foto, vamos a usar las dos pseudo-clases :before y :after. Estas permiten añadir contenido delante y detrás del elemento al cual estén asociadas. ¡Aunque nosotros no vamos a añadir nada! Pero para los navegadores el elemento existe, aunque no lo podamos ver.
Estos elementos estarán colocados en posición absoluta respecto a su elemento padre, la caja <div> que contiene la fotografía.
Indicaremos un ancho (width) y una altura (height) para obtener una sombra en proporción a la foto.
Vamos a aplicarle una sombra a esos elemento vacíos y luego los rotaremos.
Añadamos el contenido "vacío" delante de nuestra caja:
#foto:before {
/* contenido vacío*/
content: "";
}
Ahora lo posicionaremos en relación a su elemento padre, la caja <div>, que ya habíamos posicionado. Usted puede decidir la posición (left y bottom) de ese elemento, lo que determinará la posición de la sombra:
#foto:before {
/* contenido vacío*/
content: "";
/* posicionamiento*/
position: absolute;
z-index: -1;
left: 10px;
bottom: 15px;
}
A continuación indique el tamaño de la sombra:
#foto:before {
/* contenido vacío*/
content: "";
/* posicionamiento*/
position: absolute;
z-index: -1;
left: 10px;
bottom: 15px;
/* La caja */
width: 50%;
height: 20%;
}
Por último, configure la sombra y aplíquele la rotación. Una vez más, usted podrá elegir los parámetros que prefiera:
#foto:before {
/* contenido vacío*/
content: "";
/* posicionamiento*/
position: absolute;
z-index: -1;
left: 10px;
bottom: 15px;
/* La caja */
width: 50%;
height: 20%;
/* La sombra */
-webkit-box-shadow: 0 15px 10px rgba(0,0,0, .7);
-moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
/* La rotación */
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
transform: rotate(-3deg);
}
El resultado obtenido:
A continuación, siga el mismo procedimiento para añadir otra sombra en la parte derecha, con otros parámetros si así lo desea, con la pseudo-clase :after.
#foto:after {
/* contenido vacío*/
content: "";
/* posicionamiento*/
position: absolute;
z-index: -2;
right: 10px;
bottom: 17px;
/* La caja */
width: 30%;
height: 20%;
/* La sombra */
-webkit-box-shadow: 0 15px 10px rgba(0,0,0, .8);
-moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.8);
box-shadow: 0 15px 10px rgba(0, 0, 0, 0.8);
/* La rotación */
-webkit-transform: rotate(1deg);
-moz-transform: rotate(1deg);
-o-transform: rotate(1deg);
transform: rotate(1deg);
}
Así se visualizará con las dos sombras diferentes:
Espero haber ayudado en algo. Hasta la próxima oportunidad!
Twittear
No hay comentarios:
Publicar un comentario