Los Filtros, Crear Efectos en CSS

Los filtros en CSS son una manera muy buena de aplicar efectos a las imágenes de nuestro sitio web, logrando efectos que antes solo era posible con alguna herramienta de edición de imágenes.
filtros-en-CSS3
Los filtros en CSS son experimentales en estos momentos (fecha del tutorial), se encuentran en lo que se conoce como working draft o estado en estado borrador de trabajo en el modulo Filter Effects Module en su 1er nivel, lo que significa que el soporte en los navegadores es un poco reservado. Para ver el soporte actual de los diferentes navegadores podemos ir a Caniuse CSS Filter Effects

soporte-navegadores-filtros-CSS

Este modulo incluye los siguientes filtros o propiedades: blur, brightness, contrast, saturate, drop-shadow, grayscale, hue-rotate, invert, opacity, sepia y uno que esta en preparación que es el efecto custom. Así que vamos a ver como funcionan estos filtros.

Blur

La propiedad blur() aplicara un efecto de desenfoque a la imagen, al establecer el valor definimos la cantidad de pixeles que se mezclaran entre si para dar este efecto.

Brightness

Esta propiedad aplicara un brillo a la imagen don el valor mas bajo 0% dejará la imagen completamente oscura y el valor 100% dejará la imagen sin cambios.

Contrast

esta propiedad permite ajustar el contraste de la imagen, su valor es en porcentaje donde el valor mas bajo 0% deja la imagen totalmente oscura el valor 100% no hace cambios en la imagen y el valor mayor a 100% quitara contraste a la imagen.

Grayscale

Esta propiedad nos permite ajustar la imagen a escala de grises, el valor en en porcentajes o de 0 a 1,  y el mayor valor 100% convierte la imagen a escala de grises y el valor mas bajo 0% no hace cambios en la imagen.

Hue-rotate

Esta propiedad aplica una rotación de tonalidad en la imagen, el valor se define en medidas angulares por ejemplo deg “grados”,  y definimos los grados alrededor del circulo de colores como el que se utiliza cuando utilizamos el método HSLA para definir colores en CSS. Los valores van desde 0deg hasta 360deg.

Invert

Lo que hace esta propiedad es invertir la imagen como lo hace por ejemplo photoshop, el valor mayor 100% deja la imagen totalmente invertida y el valor menor 0% no hace cambios en ella.

saturate

Como su nombre lo indica, esta propiedad y su valor nos permiten saturar la imagen de acuerdo a sus colores, los valores van desde 0% hasta un 1000%, donde el 0% es una imagen totalmente desaturada, y 1000% es una imagen saturada.

Sepia

Esta propiedad transforma los colores de la imagen a tono sepia, el valor mayor 100% la deja totalmente sepia y el valor menor 0% no hace cambios en ella, también podemos aplicar valores de 0 a 1.

Opacity

Esta propiedad aplica transparencia a nuestra imagen, su valor es porcentual, donde el valor 0% es totalmente transparente y 100% es totalmente visible.

Drop-shadow

Esta propiedad funciona similarmente a la propiedad box-shadow de CSS3, y la única diferencia entre ambos es que con los filtros algunos navegadores ofrecen aceleración de hadware para mayor rendimiento, en CSS3 no.

Como dije anteriormente, este modulo de efectos en CSS esta en borrador, pueden haber cambios o pueden adicionar otros, estaremos atentos.
http://www.w3.org/TR/filter-effects 

About the author

Johan Ricardo Niebles. Administrador y creador de este blog, Front-end (HTML + CSS + JS).con mas de 4 años de experiencia en el magico mundo web. Johan Ricardo