domingo, 8 de junio de 2014

Ejemplo de una imagen con relieve



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!







No hay comentarios:

Publicar un comentario en la entrada