Modifica imágenes en tu web sin utilizar Photoshop

30/04/2014

XPinyol

Ya no es necesario ser un experto en Photoshop u otros programas de edición para añadir filtros y efectos a tus imágenes, pues ya es posible modificarlas utilizando códigos HTML.

Dichas modificaciones deben realizar cuidadosamente, o sea, no hay que cargar las imágenes de efectos para que estos sean útiles y no resulten incómodos a la vista. De momento estos efectos solo funcionan a la perfección en Google Chrome, pero se espera que en los próximos meses también funcione en el resto de navegadores.

Aplicar filtros a las imágenes con CSS

La primera (segunda en realidad, después de las transiciones) propiedad que quiero mostrarte es filter, que nos permite aplicar diferentes filtros a las imágenes sin necesidad de pasar por Instagram 😉

Ahí van algunos (hay más) con su correspondiente código, ve pasando el ratón por encima para apreciarlos:

Desenfoque

1	.imagen:hover {filter: blur(5px);}

Escala de grises

1	.imagen:hover {filter: grayscale(80%);}

El valor .grayscale puede tomar cualquier cantidad entre 0 y 100%, estableciendo diferentes niveles de color.

Sepia

1	.imagen:hover {filter: sepia(60%);}

Al igual que con el filtro anterior, puedes darle más o menos intensidad ajustando el porcentaje.

Saturación

1	.imagen:hover {filter: saturate(180%);}

Esta vez es diferente: 100% es la saturación original de la imagen. Los valores por encima conseguirán una imagen sobresaturada, y por debajo de ese valor la imagen muestra menos saturación de la habitual.

Transparencia

1	.imagen:hover {filter: opacity(.5);}

Aunque he puesto transparencia es en realidad al revés, ya que lo que se especifica es la opacidad: 1 es totalmente opaco (valor por defecto) y 0 es totalmente transparente.

Transformaciones y animaciones

Hay muchos más filtros, pero vamos a pasar a algo con más… animación. 🙂

CSS3 provee también de una serie de efectos que imprimen movimiento a las imágenes, transformándolas y animándolas. Combinándolas además se pueden conseguir efectos espectaculares. Algunos de ellos implican usar un contenedor, un div que contiene la imagen, y que definiré con la clase .contenedor.

Zoom y cambios de tamaño

1 2	.contenedor:hover .imagen {-webkit-transform:scale(1.3);transform:scale(1.3);} .contenedor {overflow:hidden;}

En realidad, como ves, es escalar la imagen a un tamaño mayor (multiplicarlo por 1.3 en este ejemplo) pero estableciendo un contenedor que oculta todo lo que sale del tamaño original (gracias al overflow:hidden). Con un escalado de este tipo sin contenedor conseguimos una imagen que se agranda:

y, si usamos un valor para scale menor que 1, una imagen que se contrae:

Giros y rotaciones

Este es bastante llamativo:

Como ves, he utilizado esta vez una imagen cuadrada. Es importante cuando este tipo de efecto se dispara con un hover, ya que si pones el puntero en el borde y al girar la imagen sale de debajo del puntero, volverá a su sitio, encontrando ahí de nuevo al puntero y… en fin, entra en un bucle muy poco agradable visualmente.

1	.imagen:hover {-webkit-transform: rotate(360deg);transform: rotate(360deg);}

Ya imaginarás que puedes utilizar cualquier valor que quieras en grados para rotate, entre 0 e infinito. Valores por encima de 360 darán como resultado más de una vuelta. Pero no te pases, si pones por ejemplo 3600 la imagen dará diez vueltas completas cada vez que le pongan el ratón encima. ¡Qué mareo!

Y, para terminar con los giros, a ver qué te parece éste:

.imagen:hover {

-webkit-transform: rotateY(180deg);

-webkit-transform-style: preserve-3d;

transform: rotateY(180deg);

transform-style: preserve-3d;}