Efecto Polaroid con CSS

Efecto Polaroid con CSS

Buenas, ahora con un nuevo tutorial el cual utiliza CSS para mostrar imágenes con un efecto tipo Polaroid y emplea transiciones que son propiedades que, por ahora, sólo son animadas en Safari y Chrome. En Firefox, veremos el efecto como una transición estática y me he tomado el atrevimiento de agregar algún filtro para que en Internet Explorer veamos algo aunque sea incompleto. Empleando propiedades css3.

Ponemos las imágenes en una lista ordenada con una clase llamada polaroids y cada una en un enlace donde el atributo title, será el texto que agregaremos debajo de ellas:

<ul class="polaroids"> <li> <a href="javascript:void(0);" title="imagen 1"><img src="URL_imagen1" /></a> </li> <li> <a href="javascript:void(0);" title="imagen 2"><img src="URL_imagen2" /></a> </li> ....... <li class="messy"> <a href="javascript:void(0);" title="imagen especial"><img src="URL_imagenespecial" /></a> </li> ....... </ul>

Ahora el CSS que es el punto clave de todo esto:

<style> /* a la lista le damos una dimensión y le colocamos los márgenes necesarios */ ul.polaroids { list-style-type: none; margin: 0 0 0 50px; width: 600px; } ul.polaroids li { display:inline; list-style-type: none; padding: 0; margin: 0; } /* cada enlace contiene una imagen y es donde definimos los colores y las propeidades de los textos */ ul.polaroids a { display: inline; float: left; margin: 10px 30px; padding: 10px; width: auto; /* las propiedades gráficas */ background-color: #FFF; /* las propiedades de los textos */ font-family: Tahoma; font-size: 18px; text-align: center; text-decoration: none; text-shadow: 1px 1px 1px #123; /* por defecto, rotamos las imágenes */ -moz-transform: rotate(-2deg); -webkit-transform: rotate(-2deg); filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.9993908270190958, M12=0.03489949670250097, M21=-0.03489949670250097, M22=0.9993908270190958); /* y la transición */ -webkit-transition: -webkit-transform .15s linear; } /* cada imagen (en este caso las dimensiono todas iguales pero, pueden ser diferentes) */ ul.polaroids img {display: block; margin-bottom: 5px; height: 150px; width: 200px; } /* esto es lo que agregará el texto contenido en el atributo title */ ul.polaroids a:after{ content: attr(title); } /* utilizando la pseudo-clase nth-child hacemos que algunas imágenes se muestren diferentes */ /* no usamos filtros para IE porque esta pseudo-clase no es reconocida */ ul.polaroids li:nth-child(even) a { -moz-transform: rotate(2deg); -webkit-transform: rotate(2deg); } ul.polaroids li:nth-child(3n) a { background-color: #AAA; color: #589; position: relative; top: -5px; -moz-transform: none; -webkit-transform: none; } ul.polaroids li:nth-child(5n) a { background-color:#DDD; color:#BEF; position: relative; right: 5px; -moz-transform: rotate(5deg); -webkit-transform: rotate(5deg); } ul.polaroids li:nth-child(8n) a { position: relative; right: 5px; top: 8px; } /* una opción es definir una clase con una característica especial, diferenciada del resto */ ul.polaroids li.messy a { background-color: #FEA; margin: 20px 150px; -moz-transform: rotate(-10deg); -webkit-transform: rotate(-10deg); filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.984807753012208, M12=0.17364817766693033, M21=-0.17364817766693033, M22=0.984807753012208); } /* por último, el efecto hover es el que lanza las transiciones */ ul.polaroids li a:hover { position: relative; z-index: 5; -moz-box-shadow: 0px 0px 20px #000 inset,10px 15px 10px #000; -webkit-box-shadow:0px 0px 20px #000 inset,10px 15px 10px #000; -moz-transform: scale(1.25); -webkit-transform: scale(1.25); filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=1, M12=0, M21=0, M22=1); } </style>

1.  Y Listo! → ¿Asombroso? Síguenos en nuestras redes sociales para más!. 
2. Si tienes dudas, comenta todas serán respondidas.

Ve el resultado! Síguenos para más.

• 
• 
• 
• 
• 
• 
• 

¡Compártelo!

Tweet