Los filtros CSS3 para imágenes son efectos muy interesantes, que normalmente realizábamos con Photoshop , como agregarle manchas, brillo, opacidad y otros mucho efectos que dependerá de tu creatividad. En este sencillo tutorial vamos a repasar exactamente cómo de como aplicarlo a nuestro proyecto.

¿Cómo funciona?

Utilizando sólo CSS podemos lograr algunos efectos bastante complejos (parecidos a los filtros de Photoshop). Estos deben ser aplicables tanto a imágenes y elementos HTML, pero recuerdes que actualmente los efectos no son soportados por todo los navegadores,  pero si por los principales que es Chrome y Mozilla.
La propiedad utilizada para controlar todos estos filtros es:

filter: filter(valor);

Como es de esperar, se usarán los prefijos para los navegadores. Por el momento,  -webkit- (Chrome y Safari) que es el motor del navegador que soporta solamente estas propiedades .

-webkit-filter: filter(valor);
-moz-filter: filter(valor);
-o-filter: filter(valor);
-ms-filter: filter(valor);

Filtración

Hay un buen filtro pocos, así que para obtener una mejor idea vamos a echar un vistazo a ellos individualmente. Múltiples filtros pueden ser aplicados con un espacio, por ejemplo, el brillo y la falta de definición:

filter: blur(5px) brightness(0.5);

Hay algunos  filtros que voy a explicar a continuación, estos se puede lograr fácilmente con CSS ya existentes (las sombras, opacidad, alfa,etc).
Así es la imagen original que se va a filtrar a continuación:

Desenfoque Gaussiano

Acá el famoso desenfoque gaussiano de Photoshop, pero esta ves echa de una forma sencilla con CSS3!

filter: blur ( 5px );
/*Asignamos los Prefijos de los Navegadores específicos*/
-Webkit-filter: blur ( 5px );
-Moz-filter: blur ( 5px );
-O-filter: blur ( 5px );
-Ms-filter: blur ( 5px );

Brillo

El brillo se mide de cero a uno, siendo 1 el brillo completo (blanco) y 0, siendo el resplandor original.

filter: brightness(0.2);
/*Asignamos los Prefijos de los Navegadores específicos*/
-webkit-filter: brightness(0.2);
-moz-filter: brightness(0.2);
-o-filter: brightness(0.2);
-ms-filter: brightness(0.2);

Saturación

La propiedad de Sturacion  se mide en porcentaje mediante la saturate(%) .

filter: saturate(50%);
/*Asignamos los Prefijos de los Navegadores específicos*/
-webkit-filter: saturate(50%);
-moz-filter: saturate(50%);
-o-filter: saturate(50%);
-ms-filter: saturate(50%);

Girar en Torno de Rueda de Colores

Este efecto es muy interesante, le permite modificar el tono girándolo (imaginar una rueda de colores que luego se giran). Se mide en grados.

filter: hue-rotate(20deg);
/*Asignamos los Prefijos de los Navegadores específicos*/
-webkit-filter: hue-rotate(20deg);
-moz-filter: hue-rotate(20deg);
-o-filter: hue-rotate(20deg);
-ms-filter: hue-rotate(20deg);

Contraste

La propiedad de Contraste se  mide en porcentajes siendo 100% que es el valor predeterminado, 0% va a crear una imagen completamente negro. Algo más de un 100% añade contraste!

filter: contrast(150%);
/*Asignamos los Prefijos de los Navegadores específicos*/
-webkit-filter: contrast(150%);
-moz-filter: contrast(150%);
-o-filter: contrast(150%);
-ms-filter: contrast(150%);

Invertir

Invertir la imagen. El rango va de 0% a 100%. Ahora extrañamente, por el momento, webkit no es compatible con inversiones si son menos de 100%.

filter: invert(100%);
/*Asignamos los Prefijos de los Navegadores específicos*/
-webkit-filter: invert(100%);
-moz-filter: invert(100%);
-o-filter: invert(100%);
-ms-filter: invert(100%);

Escala de grises

Una vez más, la medida de la cantidad que desea a escala de grises de la imagen. El rango va de 0% a 100%.

filter: grayscale(100%);
/*Asignamos los Prefijos de los Navegadores específicos*/
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-o-filter: grayscale(100%);
-ms-filter: grayscale(100%);

Sepia

Sepia! Supongo que bastante útil si deseas publicar algo en Instagram. Aunque supongo que no se usará CSS para eso. De todos modos, similar a escala de grises e invertir, es la cantidad que desea añadir la sepia a la imagen. 100% será completa sepia, 0% será la imagen inicial.

filter: sepia(100%);
/*signamos los Prefijos de los Navegadores específicos*/
-webkit-filter: sepia(100%);
-moz-filter: sepia(100%);
-o-filter: sepia(100%);
-ms-filter: sepia(100%);

Por Ahora tenemos estos efectos en CSS3, esperamos se estandaricen para que puedan funcionar en todos los navegadores de una buena vez!

*Gracias InsertHtml por este Articulo.