Efecto para fotos con CSS3, crea tus Polaroid sin utilizar Photoshop

Volviste de un viaje por el mundo y te sientas en la mesa de tu casa a observar todas las fotografías que tomaste. Las Polaroid son un clásico, fotos instantáneas que reflejan momentos únicos. En este tutorial aprenderás a recrear una fotografía Polaroid utilizando CSS3 y a animar la foto cuando te posicionas sobre ella con el mouse con animaciones CSS3. Este efecto es compatible con Google Chrome, Mozilla Firefox, Safari, Opera e Internet Explorer 10.

EL RESULTADO FINAL

El fondo en este caso es una mesa de madera donde se apoyan desordenadas las fotos que tomaste en tu último viaje, una fiesta de cumpleaños, comida deliciosa o una salida con amigos. Para hacer más interesante el efecto agregamos movimiento, simulando que alguien levanta o corre de lugar las Polaroid.

Seguir el tutorial es sencillo y si no quieres cambiar nada más que las fotos y el texto tienes libertad de hacerlo siguiendo la licencia.

Cambiar el estilo de la foto para que parezca ser Polaroid

El objetivo de este tutorial es alcanzar un efecto similar a las instantáneas Polaroid para lograr esto vamos a valernos de CSS3. Lo mejor es tomar el ejemplo de Polaroids verdaderas para analizar cuáles serán los efectos a aplicar.

Foto por Miss Oh la lá

PAPEL BLANCO

Primero que nada tendremos que elegir una textura adecuada para simular el marco de papel blanco de la fotografía (pensando en HTML sería el fondo de la div). Hay algunas fotografías con una textura sutil de red y otras con una textura de papel con fibras.

La textura que utilicé fue obtenida en Subtle Patterns, de donde bajé varias diferentes. Encontrarán texturas específicas de Polaroid, que yo decidí no emplear. Podrán acceder a la textura en el fichero.

Ya podemos imitar el papel del borde, añadiendo esta imagen como background-image.

Máscara con efectos sobre la foto

Sobre la foto tenemos tres cuestiones que atacar: la foto queda en bajorrelieve respecto del marco de papel, los bordes de la foto presentan un tinte más oscuro y la imagen en sí misma presenta un tinte amarillo o azul (dependiendo de la foto).

Ya que no podemos aplicar box-shadow o background-color sobre el elemento img directamente, podemos crear una div con position: absolute donde aplicar nuestros efectos que actuará como una máscara.

En esta div tenemos que añadir:

  1. una borde negro transparente a modo de sombra,
  2. un tinte oscuro en bordes y esquinas y
  3. un tinte sobre toda la foto que modifique sutilmente su color.

BORDE A MODO DE SOMBRA

Mis imágenes van a medir 300 pixeles de ancho y 230 pixeles de alto. Para que el borde oscuro que añadiremos en esta máscara luzca como una sombra tendremos que disminuir 2 pixeles de alto y 2 pixeles de ancho; así el borde quedará dentro de la imagen. Utilizamos color rgba para dar un 80% de transparencia al borde ya que no necesitamos un borde totalmente negro sino una sombra pequeña.

TINTE OSCURO EN LOS BORDES

A continuación aplicaremos el tinte azulado en los bordes y esquinas con una sombra interna. Alcanzamos este efecto utilizando box-shadow configurada para situarse en el interior del elemento caja. Necesitamos que se vea igual en todos los bordes y por eso marcamos el offset vertical y horizontal como cero. Con un difuminado de 20 pixeles nos encargamos de extender la sombra, logrando que el color disminuya a medida que se acerca al centro de la foto.

TINTE SOBRE TODA LA FOTOGRAFÍA

Para el color de fondo que dará el tinte a toda la foto empleé en este ejemplo un color amarillo con transparencia de 10%, pero en la imagen a continuación les muestro filtros azul, violeta y verde que también probé. En el archivo se incluyen como comentarios los colores que se ven a continuación y pueden utilizarlos simplemente quitando los /* */ en el fondo deseado.

Para el filtro los colores tienen transparencia de 10%

¿Cómo rotar las fotos con CSS3?

Para poder rotar las imágenes es necesario utilizar la transformación rotate(grados). No todas las fotografías tendrán el mismo ángulo de rotación, para poder minimizar mi trabajo trabajé con LESS. Utilizando un mixin pude evitarme el tedioso trabajo de escribir muchas veces lo mismo. La definí en el comienzo del documento para poder reutilizarla tantas veces como fuera necesario. Más adelante definiremos otros mixin similares.

¿Qué es Less CSS? Aprende a usarlo

Ir al artículo

La mixin .rotation que creé se comporta como una función ya que admite argumentos, este comportamiento es justo el que necesitaba para poder personalizar la rotación de las fotos.

CLASES DIFERENTES PARA ORIENTACIONES DIFERENTES

Creé varias clases — que serán compartidas por más de una foto — y cada una de ellas tendría una rotación diferente especificada con ayuda de .rotation(@degrees). Este pequeño snippet se añade dentro de la clase de la siguiente manera.

Debemos cambiar @degrees por el número de grados que queremos rotar la foto. Podemos reutilizar .rotation(@degrees) tantas veces como sea necesario, redefiniendo el ángulo de rotación para cada clase donde sea inluido el mixin. Puedes ver el CSS resultante para el código LESS anterior a continuación.

Utilizando la transformación rotate ya tenemos un paso completado: nuestras fotos están sobre la mesa “desordenadas”. En el demo creé cinco clases para rotar las fotos.

Sombreados diferentes para orientaciones diferentes

Para añadir más dinamismo — e intentar que se vea lo más cercano a la realidad posible — las sombras no podían ser todas iguales. Si todas las fotos estuvieran con la misma orientación, tal vez podríamos emplear el mismo valor de sombras para todas, pero en este caso se hubiera visto poco creíble.

Utilizando LESS nuevamente creé seis clases de sombras con valores diferentes. ¿Por qué tantas sombras? Cuando animemos la foto necesitaremos mover un poco la sombra, así que en realidad serían tres pares de sombras ya que se usarán de a dos: en el estado normal y el estado animado.

  • dropshadow_rightnormal y dropshadow_right
  • dropshadow_midnormal y dropshadow_mid
  • dropshadow_leftnormal y dropshadow_left

Usé LESS porque me permite crear clases e incluirlas dentro de otras reglas CSS.

Regresamos con la clase del ejemplo anterior, ahora le apliqué la class que creé con LESS que posee valores de sombra.

Animación cuando hacemos :hover

Hemos llegado al punto más importante, crear la animación cuando nos posicionamos sobre la imagen.

Crearemos una animación de tres pasos para cada una de las cinco clases que describimos anteriormente. Para poder lograr que nuestra foto se mueva necesitamos hacer dos cosas: crear el efecto de animación propiamente dicho y añadir sus configuraciones. Comenzamos con las configuraciones que serán reutilizadas en todas las clases.

CONFIGURAR LA DURACIÓN DE LA ANIMACIÓN

Con LESS creamos una clase reutilizable con nombre .animation, que añadiremos en el estado :hover de la Polaroid donde colocaremos las siguientes cuatro reglas:

La duración de la animación en este caso son tres segundos, abarca los tres pasos de los que les hablé anteriormente. En ese tiempo todos los datos que yo incluya en la animación deberán reproducirse una vez. Definí que la animación se reprodujera una sola vez, pero podemos emplearnúmeros decimales positivos (0.5 reproducirá media animación), números enteros positivos (5 veces) o incluso infinito (la animación no dejará de repetirse).

Podemos además configurar la dirección de la animación, en este caso yo necesito que sea en la dirección normal. La función de timing que voy a utilizar es ease pero podemos elegir entre una variedad más de funciones: ease-in, ease-out, linear, entre otras.

En este caso coloqué las propiedades sin prefijo para no extender el código aquí pero deben incluir los prefijos: -webkit- y -moz  además del atributo sin prefijo. No es necesario que incluyan -ms-porque el soporte comienza en IE10 sin uso de prefijo.

Creando el paso a paso de la animación con fotogramas clave

La animación de cada foto consistirá de tres pasos: salida desde la posición inicial, una acción intermedia utilizando transform y regreso a  la posición inicial suavemente.

Para lograr la animación utilizaremos @keyframes donde definiremos los cambios que necesitamos que ocurran en nuestras fotos.

@keyframes es una at-rule de CSS que le permite a los autores controlar los pasos intermedios de una secuencia de animación con CSS, estableciento fotogramas clave o puntos de referencia a lo largo de la secuencia. Esto permite animaciones mucho más específicas que las realizadas automáticamente por el navegador.

Se crea una regla @keyframe con un nombre específico, utilizado más adelante por animation-name(propiedad que se agrupa con las anteriormente explicadas) para poder emparejar la animación con su lista de fotogramas clave. Cada @keyframe presenta dentro una lista de puntos de referencia identificados con un porcentaje a lo largo de la animación donde el fotograma deberá entrar en acción.

@keyframes es compatible con Webkit (Chrome y Safari), Firefox, Opera e IE10 así que incluiremos los prefijos -webkit--moz- además de una propiedad sin prefijo para la última versión de Opera e IE10.

El nombre de esta animación será animate_right_large y será la que presenten aquellas imágenes que tenían la class .right_large. Para cada animación diferente (en este caso hay cinco diferentes) tenemos que emplear un nombre diferente.

Definimos tres estados: inicial, medio y final. En el 0% llamamos a la clase .right_large con LESS. Hacemos lo mismo en el paso final (100%).

En el 50% introduciremos dos cambios: la sombra cambiará su aspecto y la foto se moverá de lugar, rotará o se agrandará. Para cambiar la sombra llamamos con LESS el estilo de sombra .dropshadow_right que mencioné anteriormente, será un cambio sutil de .dropshadow_right_normal a .dropshadow_right.

Para poder elegir el movimiento de la Polaroid creamos dos mixin más de LESS para poder cambiar de lugar y escalar. Además reutilizaremos el que creamos para la rotación.

Con .scaling(@size) podremos definir un cambio en el tamaño de la imagen colocando entre paréntesis un número. En las fotos que utilicé este efecto, escalé la foto a 1.2 su tamaño inicial.

Para mover la foto empleé translate(X,Y), que mueve la fotografía a las coordenadas especificadas. Con @xaxis e @yaxis podré definir estos valores en pixeles. Un ejemplo sería .move(100px, 50px).

Estructura HTML

La estructura HTML será la siguiente: una div que contiene a la Polaroid y define su posición vertical con las clases .top.mid o .bottom (sólo una de ellas por foto). Está marcado el lugar donde deben colocar la clase que define la altura a la que se ve la foto con letras celestes.

Con la tag <figure>, introducida en HTML 5, podemos asociar una figura, ilustración, diagrama o foto — como en nuestro caso — con su caption. La etiqueta figure tendrá el estilo de la Polaroid y podremos añadirle una clase para modificar su rotación. La siguiente lista contiene las clases que están siendo utilizadas en la demostración.

  • .right_large 45 grados a la derecha
  • .right_short 10 grados a la derecha
  • .left_large 55 grados a la izquierda
  • .left_medium 25 grados a la izquierda
  • .left_short 10 grados a la izquierda

Dentro de figure tenemos que colocar la imagen, la div que oficiará de máscara y la figcaption (ésta última es otra etiqueta HTML5 que funciona en conjunto con figure).

Podemos añadir todos los elementos figure que deseemos, en la demostración hay siete fotografías diferentes. En cada una de ellas añadí un título en letra cursive (simulando una anotación manuscrita) acerca de la foto. Además coloqué la localización de esa fotografía con un enlace del fotógrafo que tomó la foto. Este texto es a modo de ejemplo y puede ser omitido.

Las hermosas fotos fueron elegidas de Flickr, tienen licencia Creative Commons y pertenecen a sus respectivos autores.

DENTRO DE LOS ARCHIVOS ENCONTRARÁN LOS SIGUIENTES ARCHIVOS

  • Página principal
  • Hoja de estilos CSS
  • Hoja de estilos en LESS (fue compilada con Sublime Text 2 y no con el .js, pueden incluirlo y trabajar así)
  • Fotografías con licencia Creative Commons de ATRIBUCIÓN — los links están colocados en la figcaption —
  • Textura de papel de Subtle Patterns
  • Textura de madera del fondo realizada por Matthew Skiles

Esta demostración de Polaroids con CSS3 tiene licencia Reconocimiento-CompartirIgual 3.0 Unported (CC BY-SA 3.0)

Usted es libre de:

  • Copiar, distribuir y comunicar públicamente la obra
  • Remezclar — transformar la obra
  • Hacer un uso comercial de esta obra

Bajo las condiciones siguientes:

Reconocimiento — Debe reconocer los créditos de la obra de la manera especificada por el autor o el licenciador (pero no de una manera que sugiera que tiene su apoyo o apoyan el uso que hace de su obra).

Compartir bajo la misma licencia — Si altera o transforma esta obra, o genera una obra derivada, sólo puede distribuir la obra generada bajo una licencia idéntica a ésta.

DemoDescarga

Modificado por última vez el día 26 de diciembre de 2012 a las 07:35
Scroll to top