Efectos con CSS filter

En el pasado, para poder lograr una presentación adecuada del contenido, teníamos que recurrir en varias ocasiones al uso de herramientas y programas de edición como Corel Draw o Photoshop. Ahora, gracias a la implementación de CSS3 muchas de estas ediciones se pueden realizar directamente en el código, simplemente utilizando hojas de estilo.

Desgraciadamente, la falta de compatibilidad con CSS3 que aún existe en algunos navegadores, hace que muchos de estos efectos no reciban la promoción necesaria, provocando que sean pocos los diseñadores que tengan noción de su existencia y por lo tanto su capacidad.

En esta ocasión, haremos uso de una de estas grandiosas propiedades, la cual lleva por nombre “filter”. Esta propiedad nos permite agregar efectos de color parecidos a los que podemos elaborar con un editor de imágenes, de tal manera que podemos convertir una imagen a escala de grises, agregar contraste o bajar la definición.

Vale aclarar, que no debemos confundir esta propiedad con la del mismo nombre utilizada por Internet Explorer.

Introducción a la propiedad

En un inicio, los filtros fueron creados como una característica de SVG (Scalable Vector Graphics) para aplicar dichos efectos a los vectores. Para 2008, el proyecto Mozilla consideró que los filtros no tenían el potencial suficiente, por lo que se debía buscar una manera de lograr aplicar dichos filtros al contenido HTML a través de CSS, sin embargo no vio la luz en sus navegadores Firefox.

Tiempo después, dicho proyecto fue retomado con el apoyo de la W3C, Adobe, Apple y Opera, para que finalmente se creara una especificación que fue implementada en los navegadores Webkit en el año 2011.

Gracias a este esfuerzo, la propiedad actualmente funciona sin problema alguno en los navegadores Chrome, iOS Safari y Safari, permitiendo que la brecha existente entre el diseñar y codificar cada día sea más pequeña. Debido a la limitación de compatibiliadad que aún existe, es necesario incluir el prefijo “-webkit-“ al definir la propiedad en nuestro CSS.

¿Cómo podemos utilizarla?

La propiedad filter puede ser aplicada a distintos elementos del DOM, los tipos permitidos son imagen, video, canvas y texto. Además de esto, podemos regular la intensidad con la que dichos filtros se muestran, ya que la propiedad acepta parámetros, los cuales se encargan de definir la cantidad de filtro que se aplica a la imagen.

Su funcionamiento se basa en tomar un snapshot de la página y conservarlo como un bitmap, después basándose en los parámetros que mandamos, aplica el efecto sobre la imagen original, todo esto antes de que se muestre en el documento.

Aplicación

Debes tener en mente que esta especificación aún esta en desarrollo, así que el código que es muestra en este artículo puede variar con el tiempo. Para mostrar como funciona utilizaremos el logo del blog La Webera.

Escala de grises

Este efecto se encargará de convertir nuestro contenido en una imagen blanco y negro.

img.lawebera {
  -webkit-filter: grayscale(100%);
}

Utilizamos un valor de 100%, lo cual aplico dicho efecto en su totalidad, pero de ser necesario podemos variar dicho valor del 0 al 100 para indicar la intensidad.

Hue rotate

Este filtro ajusta los colores originales de la imagen en base a los ángulos de tono que existen en la rueda de color. Cambia todos los colores de la imagen, tomando como referencia los grados que ofrecemos como parámetro.

img.lawebera {
  -webkit-filter: hue-rotate(150deg);
}

Esta sentencia mueve 150 grados la posición de cada color de la imagen.

Sepia

Como su nombre lo dice, aplica un efecto sepia para que la imagen luzca antigua.

img.lawebera {
  -webkit-filter: sepia(100%);
}

Contraste

Podemos utilizar el valor “contrast” para modificar el contraste de nuestra imagen. Su valor puede ir desde el 0%, lo que nos daría una imagen totalmente negra, hasta el 100% que nos da como resultado los colores originales.

img.lawebera {
  -webkit-filter: contrast(300%);
}

Nosotros agregamos un contraste mayor al 100%, lo que produce una imagen con alto contraste.

Desenfoque

El valor que le demos a este efecto, indicará cuanto se deben de mezclar los píxeles entre sí. Cuanto mayor sea el valor, menos definición tendrá y se verá más borrosa.

img.lawebera {
  -webkit-filter: blur(4px);
}

Combinación de filtros

La propiedad filter, también nos da la oportunidad de combinar varios efectos en una sola sentencia, y para lograrlo basta con agregar un espacio entre cada uno de los efectos.

img.lawebera {
  -webkit-filter: grayscale(100%) brightness(-25%) contrast(250%);
}

Con la sentencia anterior, convertimos nuestra imagen a escala de grises y agregamos contraste a la vez que disminuimos su brillo.