Post original en JASoft.org: http://www.jasoft.org/Blog/post/Efecto-Polaroid-y-giros-en-fotografias-con-CSS.aspx

En mi anterior post contaba cómo podíamos utilizar efectos CSS3 para conseguir una mejora sustancial en el aspecto de fotografías (sobre todo de personas), convirtiéndolas en círculos y utilizando efectos auxiliares como bordes y sombras para darles un toque estético adicional.

En esta ocasión voy a seguir en la misma línea y mostraré algunos efectos CSS3 adicionales que nos permitirán obtener un aspecto muy diferente: Efecto «Polaroid».

Las cámaras de foto instantáneas de tipo «Land» (en honor a su inventor) se empezaron a producir a partir de 1948, pero fue en los años ’70 y hasta mediados de los ’80 cuando su popularidad alcanzó el máximo apogeo. Históricamente se han producido cientos de modelos diferentes, pero sin duda la empresa que las popularizó fue Polaroid, hasta tal punto que el nombre de esta marca se ha convertido en un genérico para denominar a este tipo de fotografía (como Kleenex para los pañuelos de papel). En la actualidad Polaroid todavía sigue fabricando este tipo de cámaras .

La principal característica de este tipo de cámaras es que las fotografías que haces con ellas se revelan de manera automática a temperatura ambiente en poco menos de un minuto. Como el papel fotográfico instantáneo hay que agitarlo para acelerar el revelado, tienen un característico borde por el que agarrar la película, que les da ese toque tan especial y reconocible (mira la figura lateral). Además, generalmente, ese borde se utiliza para escribir en él con tinta indeleble mensajes cortos que hagan de la foto un recuerdo imborrable.

Dada su gran popularidad y el todavía factor «cool» que poseen, es un montaje estético que se suele utilizar en muchas páginas web para decorar las fotografías.

¿Cómo podemos conseguir un efecto como el de la fotografía lateral usando solamente CSS?

Bien, lo primero es definir los bordes del papel fotográfico instantáneo. Para ello nada más fácil que añadir unos márgenes simétricos a la fotografía a excepción del margen inferior, más amplio para simular la zona de agarre de la película, usando además un color de fondo blanco, así:

.polaroid {

    background-color:white;

    padding:10px 10px 50px 10px;

    border:1px solid #BFBFBF;

    box-shadow:10px 10px 30px rgba(0, 0, 0, 0.8);

}

Además le hemos añadido una pequeña sombra como ya vimos en el post anterior.

Con esto obtenemos el siguiente efecto sobre nuestra fotografía al aplicarle el nuevo estilo:

Esto ya se parece mucho a lo que estamos buscando.

Además, podemos darle un toque más realista imitando la sensación de que la fotografía se ha dejado caer de manera descuidada encima de una mesa, para lo cual vamos a rotarla.  Definiremos dos estilos, uno con rotación a la derecha y el otro hacia la izquierda, así:

.RotarIzq {

    transform:rotate(10deg);

    -ms-transform:rotate(10deg); /* IE9 */

    -webkit-transform:rotate(10deg); /* Safari y Chrome */

    -moz-transform:rotate(10deg); 

}

.RotarDer {

    transform:rotate(-10deg);

    -ms-transform:rotate(-10deg); /* IE9 */

    -webkit-transform:rotate(-10deg); /* Safari y Chrome */

    -moz-transform:rotate(-10deg); 

}

En este caso utilizamos el atributo CSS3 transform y sus variantes específicas de cada navegador. Este atributo nos permite realizar transformaciones 2D y 3D sobre los elementos de una página, con operaciones como rotar, desplazar, girar respecto a un punto, etc…

Nota: Las transformaciones en dos dimensiones están soportadas por todos los navegadores modernos (a partir de Internet Explorer 10, Chrome 26, Firefox 20 y safari 5.1 además de los móviles), pero las transformaciones 3D y para SVG no tienen un soporte tan amplio (las 3D no las soporta IE, y las de SVG solamente Firefox de manera total). Internet Explorer 9 las soporta si empleamos el prefijo -ms- delante del nombre del atributo, y Google Chrome, en todas sus versiones (al menos hasta la actual 27) y Safari solamente usando el prefijo específico -webkit-. Finalmente el prefijo -moz- nos sirve para que lo soporten versiones antiguas de Firefox también.

Si aplicamos por tanto la clase «polaroid» y la clase «RotarDer» a nuestra imagen:

<img class="polaroid RotarDer" src="Cam_Polaroid.jpg" alt="Imagen Polaroid con CSS">

obtenemos el siguiente efecto aún más realista:

Incluir texto en la solapa inferior

Si queremos además incluir texto en la parte inferior, como en una foto de verdad, tenemos que usar una estrategia ligeramente diferente. En este caso deberemos meter tanto la imagen como el texto dentro de un contenedor que simule el marco, y aplicar los estilos a este contenedor en lugar de la imagen para que se apliquen a todo el conjunto y todo éste gire a la vez. Así, podemos redefinir ligeramente el estilo de la siguiente manera:

.polaroidContenedor {

      width:300px;

      padding:10px 10px 10px 10px;

      border:1px solid #BFBFBF;

      background-color:white;

      box-shadow:10px 10px 30px rgba(0, 0, 0, 0.8);

  }

He hecho dos cambios:

• Por un lado he especificado para el contendor un tamaño igual al de la imagen. Esto evita que éste se adapte a su contenedor y se quede pegado por lo tanto a los bordes de la fotografía, aplicando además «wrapping» (cambio de línea) al texto que vamos a poner en la base.
• He quitado el padding adicional del borde inferior. Dado que vamos a introducir texto ahí ya no nos hace falta añadir ese espacio artificialmente, pues será el texto el encargado de dar «aire» a la parte de abajo. Hay que tener en cuenta que si no podemos texto entonces deberíamos dejárselo, pero estaríamos por tanto en el caso anterior.

Además he definido un estilo para el texto para que tenga una letra bonita (podríamos usar una fuente manuscrita embebida en el CSS o descargada desde la web), alineación centrada, y un pequeño margen de 1 em por la parte superior para que no se pegue a la imagen:

.textoPolaroid {

    display:block;

    margin-top:1em;

    text-align:center;

    font-style:italic;

    font-family:"Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;

}

Si ahora escribo este código HTML:

<div class="polaroidContenedor RotarIzq">

    <img src="Cam_Polaroid.jpg" alt="Imagen Polaroid con CSS">

    <span class="textoPolaroid">¡Este es el texto que aparecerá debajo de la imagen!</span>

</div>

Obtengo una fotografía estilo Polaroid con texto debajo también rotado, como la segunda de esta imagen:

De esta forma además consigo que las imágenes se puedan montar unas encima de otras, como en la figura, dando mayor sensación aún de realismo. Podría haberlas metido juntas dentro de un DIV de un determinado tamaño, desplazarlas un poco desde el origen a cada una y dándoles una rotación diferente, para conseguir que parezca un grupo de fotografías Polaroid dejadas descuidadamente encima de la mesa, unas encima de otras.

Como vemos el efecto es muy llamativo, fácil de conseguir y sin necesidad de programar.

Este post está basado en material extraído de mi curso online de HTML(5) y CSS(3) en campusMVP. Si quieres aprender de verdad este tema y tenerme como tutor para contestar tus dudas empieza hoy mismo.

He dejado un archivo ZIP (13 Kb) con el ejemplo completo para que puedas examinarlo.

¡Espero que te sea útil!