Proyecto ASIR

Las transformaciones en CSS3

Ejemplo de una imagen con relieve

Partimos de la siguiente imagen:

Aplicamos un primer estilo:

	#foto { 
		position: relative; 
		margin: 20px auto; 
		width: 600px; 
		height: 225px; 
		padding: 10px; 
		border: 1px solid #ccc; 
		background-color: #eee; 
	}			
				

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.

Añadimos un contenido "vacío" delante de nuestra caja, lo posicionaremos en relación a su elemento padre, indicamos el tamaño de la sombra y aplicamos una rotación:

	#foto:before { 
		/* contenido vacío*/ 
		content: ""; 
		/* posicionamiento*/ 
		position: absolute; 
		z-index: -1; 
		left: 10px; 
		bottom: 15px; 
		/* La caja */ 
		width: 50%; 
		height: 20%; 
		/* La sombra */ 
		box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7); 
		/* La rotación */ 
		-webkit-transform: rotate(-3deg); 
		-o-transform: rotate(-3deg); 
		transform: rotate(-3deg); 
	}			
				

Para añadir otra sombra en la parte derecha utilizaremos 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 */ 
		box-shadow: 0 15px 10px rgba(0, 0, 0, 0.8); 
		/* La rotación */ 
		-webkit-transform: rotate(1deg); 
		-o-transform: rotate(1deg); 
		transform: rotate(1deg); 
	}