Efecto polaroid con CSS

¡Comparte nuestro contenido!

Vamos a crear un sencillo efecto tipo Polaroid ideal para galerías de fotos o resaltar imágenes dentro de un artículo, portafolio de trabajo o enmarcar un elemento importante dentro de una web; para ellos nos valdremos del selector after y algunas transiciones CSS3.

Paso 1: Lista de imágenes

Coloquemos una sencilla lista no ordenada con imágenes y elementos <a> que únicamente tengan el atributo title. Al atributo class de la lista, le llamamos polaroid (Puede llevar el nombre que se desees)

<ul class="polaroid">
    	<li><a title="Efecto Polaroid con CSS3"><img src="polaroid1.jpg" alt="Efecto Polaroid con CSS3 en CableNaranja" /></a></li>
        <li><a title="Efecto Polaroid con CSS3"><img src="polaroid2.jpg" alt="Efecto Polaroid con CSS3 en CableNaranja" /></a></li>
        <li><a title="Efecto Polaroid con CSS3"><img src="polaroid3.jpg" alt="Efecto Polaroid con CSS3 en CableNaranja" /></a></li>
        <li><a title="Efecto Polaroid con CSS3"><img src="polaroid4.jpg" alt="Efecto Polaroid con CSS3 en CableNaranja" /></a></li>
        <li><a title="Efecto Polaroid con CSS3"><img src="polaroid5.jpg" alt="Efecto Polaroid con CSS3 en CableNaranja" /></a></li>
    </ul>
Efecto Polaroid con CSS3 en CableNaranja

Efecto Polaroid CSS3 CableNaranja, Paso 1

Paso 2: Estilos básicos

Añadimos los estilos, ya sea en etiquetas <style> o en un archivo separado – Preferentemente lo último – Eliminemos las viñetas de la lista, para después alinear todo a la izquierda.

ul.polaroid{ list-style: none; }
ul.polaroid li{
  float: left;
  display: inline;
}
Efecto Polaroid CSS3 CableNaranja, Paso 2

Efecto Polaroid CSS3 CableNaranja, Paso 2

Paso 3: Modificando enlaces

Modificamos los elementos <a> asignando su propiedad display a block, luego le asignamos las medidas de cada imagen y las separamos con un margen cuadrado de 5 píxeles a la vez que centramos el texto y, eliminamos la decoración inferior y los bordes que pudieran aparecer por enlazar imágenes, también aplicamos un color blanco de fondo a cada elemento.

ul.polaroid a{
  display: block;
  width: 320px;
  height: 213px;	
  margin: 5px;
  text-align: center;
  border: none;
  background-color: #FFF;
  text-decoration: none;
}
Efecto Polaroid CSS3 en CableNaranja, Parte 3

Efecto Polaroid CSS3 en CableNaranja, Parte 3

Paso 4: Padding y sombra

Trabajemos un poco con el padding para dejar un borde interior de 10 píxeles. En el caso del borde inferior nos interesa que quede más grande para dejar espacio al texto que vamos a colocar ahí, así que le dejaremos 25 píxeles. Adicionalmente coloquemos una sombra negra de 3 píxeles de sombra vertical y 6 píxeles de difuminado usando la propiedad box-shadow.

padding: 10px 10px 25px 10px;
box-shadow: 0 3px 6px #666;
Efecto Polaroid CSS3 en CableNaranja, Parte 4

Efecto Polaroid CSS3 en CableNaranja, Parte 4

Paso 5: Añadimos los efectos

Primero, apliquemos un efecto de transición de entrada / salida (ease-in-out) sobre cada elemento interno del enlace, tendrá una duración de 0.5 segundos.

transition: all 0.5s ease-in-out;

Después, por medio del selector hoover escalemos la imagen a 1.5x de tamaño y, empujemos hacia arriba el eje Z para que al paso del ratón la imagen quede por encima.

ul.polaroid a:hover{
  z-index: 5;
  transform: scale(1.5);
}
Efecto Polaroid CSS3 en CableNaranja, Parte 5

Efecto Polaroid CSS3 en CableNaranja, Parte 5

Paso 6: Colocar el texto en su lugar

Para mostrar texto debajo de cada imagen, usaremos el atributo title del elemento <a> y el selector after que coloca texto justo después de un elemento.

ul.polaroid a:after { content: attr(title); }
Efecto Polaroid CSS3 en CableNaranja, Parte 6

Efecto Polaroid CSS3 en CableNaranja, Parte 6

Por supuesto se pueden hacer muchos otros ajustes, pero eso queda a críterio de cada quien. Las imágenes por cierto, las pueden encontrar para su uso libre en Unsplash.

¡Comparte nuestro contenido!

Israel García

Docente, IT Manager, Blogger & Developer. Escribo por diversión, educo por pasión. | Grandstanding is not my thing.

Podría también gustarte...

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

shares