Efecto Polaroid con CSS3

 Buenas, ahora con un nuevo tutorial en el cual emplearemos con Hover utilizando el CSS3, este efecto tipo polaroid se empleara al pasar sobre un imagen, este cuenta con propiedades de transiciones las cuales le dará un aspecto muy llamativo e interesante. La visualización plena de la magia por así decirlo, se vera en Ghrome. Comencemos.

 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>
 La clave de la mágia. El CSS:

<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>

 VÍDEO TUTORIAL [VER] COMO PONERLO YA EN TU BLOG:

Demo:

• 
• 
• 
• 
• 
• 
• 

¡Compártelo!

Tweet