Editar imágenes en tu web sin Instagram.

¿Y si te digo que ya no vas a necesitar los filtros de instagram ni los de Picmonkey ni los de Picsart para editar las fotos de tu web y que queden todas igual?

Claramente tu respuesta sería No me lo creo, si se pudiese hacer ya lo sabría, ¿o crees que me gusta estar horas en una silla editando fotos?. Pues existe una manera de ahorrarte todas esas horas en la silla, no te culpes si no la sabías, todavía es muy nueva. Se trata de una declaración de CSS3 cuya sintaxis es:

filter: <filter-function>[<filter-function] | none;

Traducida esa sintaxis sería algo así como esto:

CSS: Hey, imagen! Me gustaría que tuvieses un filtro sepia. (filter: sepia[<filter-function>])

Imagen: Hum Vale, ¿pero de cuanto sepia estaríamos hablando?

CSS: Pues un término medio. (filter: sepia(.5);)

Volviendo a la ecuación anterior (filter: <filter-function>[<filter-function] | none;) y comparándola con esta podemos ver que sepia es un filtro y corresponde al primer <filter-function> de la ecuación, por otro lado el .5 es la cantidad de filtro que le damos a  la imagen.

Para la cantidad de filtro contamos con varios valores, al igual que sepia no es el único filtro que existe, tenemos 9 más que podemos usar por separado o combinándolos con el resto de filtros. Para aplicar el filtro o el conjunto de filtros a todas las imágenes podemos hacerlo poniendo en nuestro css:  img{ filter: <filter-function>[<filter-function];}, si queremos que una imagen, o varias, no tenga ningún filtro tendremos que darle una class (<img src=enlace-a-la-imagen class=ninguno>) y luego llamar a esta class desde el css (.ninguno{filter: none;}) y con ese none ya no tendrá ningún filtro; y, si lo que queremos es darle un estilo a unas pocas imágenes tendremos que ponerle una misma class a las que queramos que lleven el mismo filtro (<img src=enlace-a-la-imagen class=sepia>) y luego llamar a esta class desde el css (.sepia{ filter: <filter-function>[<filter-function];}) y añadir donde corresponde el filtro o filtros que deseemos:  

Blur

Este filtro sirve para aplicar un filtro de desenfoque a la imagen. El valor que le das corresponden a los píxeles de la imagen que se mezclan entre sí, por lo que a mayor cantidad mayor desenfoque de la imagen.

See the Pen EZZqzR by Patricia González González (@PatriGonza) on CodePen.


Brightness

Hace la imagen más brillante o más oscura. El valor que le das equivale al brillo de imagen que deseas, puede ser o bien un decimal o bien un porcentaje, en el que el 0 o 0% equivale a oscuro, 1 o 100% equivale a la imagen original,más de uno o de 100% equivale a dar brillo a la imagen.

See the Pen BpWBNz by Patricia González González (@PatriGonza) on CodePen.


Contrast

Contrast es un filtro que funciona añadiendo contraste a la imagen. El valor se le da en porcentajes o decimales siendo el 0% o 0 totalmente negra la imagen y 1 o 100% la imagen original.

See the Pen zNZOrJ by Patricia González González (@PatriGonza) on CodePen.

Saturate

Este filtro incrementa el color de las imágenes, el valor también se expresa en decimales o porcentajes, donde 0% o 0 es la imagen original y 1 o 100% sería la imagen con los colores en su máximo esplendor.

See the Pen vgxBKY by Patricia González González (@PatriGonza) on CodePen.

Hue-rotate

Este filtro es un poco complicado de explicar, pero a pesar de ello voy intentarlo, aunque el ejemplo te dejará todo más claro. Imagina que tu imagen se encuentra bajo un rueda de colores, pues bien el valor en grados que le des a la imagen equivale a los grados que el color de esta va a girar en la rueda, siendo 0deg la imagen original y 360deg el máximo valor.

See the Pen NdpKRp by Patricia González González (@PatriGonza) on CodePen.

Grayscale

Este filtro elimina totalmente el color de tus imágenes, el valor, al igual que en los casos anteriores, se le otorga en decimales o porcentajes, donde el 0 o 0% es totalmente gris y 1 o 100% es la imagen original.

See the Pen dNvbOx by Patricia González González (@PatriGonza) on CodePen.


Opacity

Este filtro aplica transparencia a la imagen y su valor se expresa o en decimales o porcentajes, aunque es más común encontrarse en decimales, si se le aplica un valor de 0 o 0% la imagen será totalmente transparente y 100% o 1 es la imagen original.

See the Pen EZWYZO by Patricia González González (@PatriGonza) on CodePen.

Sepia

Creo que todos conocemos ya el tan famoso sepia,  el valor que se le da a este filtro se expresa en decimales o porcentajes, donde 0 o 0% corresponde a la imagen sin cambios y 1 o 100% es totalmente sepia.

See the Pen RKpbVW by Patricia González González (@PatriGonza) on CodePen.


Invert

Como explica el propio nombre del filtro su objetivo es invertir la imagen, por lo que el blanco pasaría a negro, el  negro a blanco, el rojo a azul… El valor se le da en porcentajes o en decimales, siendo 0 o 0% la imagen original y 1 o 100% sería la imagen con los colores totalmente invertidos.

See the Pen pRezwa by Patricia González González (@PatriGonza) on CodePen.


Drop-shadow

Este filtro aplica una sombra a la imagen y tiene cinco valores, aunque el cuarto y el quinto algunos navegadores no los aceptan, por lo que nos centraremos en los tres que el navegador si que traduce y podemos manipular.

El primer valor es la distancia horizontal de la sombra, si se le da un valor negativo la sombra se situará a la izquierda. El segundo valor, que al igual que el primero se establece en píxeles y es obligatorio, corresponde a la distancia vertical de la sombra,  El tercer valor es opcional y establece el desenfoque de la sombra y se expresa en píxeles al igual que los dos anteriores, a mayor cantidad de píxeles, más grande  y menos oscura se hace la sombra.

See the Pen JEWPyq by Patricia González González (@PatriGonza) on CodePen.


Como te he dicho, con estos filtros ya no tendrás que preocuparte porqué aplicación utilizas para editar las fotos de tu sitio, las marcas de agua que te generan esas aplicaciones, el tiempo que tarda en descargarse la imagen… Y encima que todas las imágenes queden iguales. Si te ha servido este artículo, ¿por qué no solucionas la vida de alguien más compartiéndolo?