Filtros para imágenes

Añádele fantásticos filtros a tus imágenes con -webkit-.

Una de las cosas muy útiles y que no se podían hacer (sin contar IE que si que podía) es añadir filtros a las imágenes, y esta vez es de mano de WebKit, que es el único que cuenta con soporte para filtros, pero seguramente se sumen en próximas ediciones FireFox y Opera, por ese motivo añadiré "provisionalmente" como se usaría con esos navegadores.
Nota: los ejemplos los haré con la propiedad -webkit- y solo funcionaran con Chrome, Safari y iOS (Safari). Estos filtros nos ayudarán a crear efectos que solo se podían conseguir con editores de imágenes, como desenfoque, invertir colores, blanco y negro...

1. /* Parámetros según navegador (solo el de WebKit esta en uso, los demás son suposiciones) */
   
2. -webkit-filter:/* Chrome y Safari */
   
3. -moz-filter:/* Mozilla */
   
4. -ms-filter:/* Internet Explorer */
   
5. -o-filter:/* Opera */
   

Como funciona

Esta propiedad afecta a cualquier elemento, ya sea texto, imagen o video, por lo tanto añadiéndolo en el CSS afecta a cualquier elemento.
Voy ha hacer unos ejemplos con la propiedad blur (desenfoque) y grayscale (blanco y negro):

Parámetros de filter

Dentro de filter podemos añadir uno o varios filtros de los que existen para esta propiedad, sin un máximo, simplemente separándolo por espacios.

1. -webkit-filter: [Filtro] [Filtro];

Filtros

Estos son los distintos tipos de filtro que podemos usar con nuestras imágenes o con cualquier elemento de nuestra página y también recordar que podemos dar todo tipo de valores intermedios (menos cuando se indique), por ejemplo 0 / 0.5 / 1.

Blur (desenfoque)

1. -webkit-filter: blur(0px); /* Sin desenfoque */
2. -webkit-filter: blur(5px); /* 5px de desenfoque */

Grayscale (escala de grises)

1. -webkit-filter: grayscale(0); /* Color */
2. -webkit-filter: grayscale(0.5); /* 50% color */
3. -webkit-filter: grayscale(1); /* Blanco y negro */

Sepia (sepia)

1. -webkit-filter: sepia(0); /* Normal */
2. -webkit-filter: sepia(0.5); /* 50% sepia */
3. -webkit-filter: sepia(1); /* Sepia */

Brightness (brillo)

1. -webkit-filter: brightness(0); /* Normal */
2. -webkit-filter: brightness(0.5); /* Imagen clara */
3. -webkit-filter: brightness(1); /* Blanco */

Contrast (contraste)

1. -webkit-filter: contrast(0); /* Bajo contraste (gris) */
2. -webkit-filter: contrast(1); /* Normal */
3. -webkit-filter: contrast(10); /* Alto contraste */

Hue-rotate (rotar matriz de color)

1. -webkit-filter: hue-rotate(0deg); /* Normal */
2. -webkit-filter: hue-rotate(180deg); /* Rotar la matriz 180 grados */
3. -webkit-filter: hue-rotate(270deg); /* Rotar la matriz 270 grados */

Invert (invertir)

1. -webkit-filter: invert(0); /* Normal */
2. -webkit-filter: invert(0.5); /* Gris */
3. -webkit-filter: invert(1); /* Color invertido */

Saturate (saturación)

1. -webkit-filter: saturate(0); /* Sin color */
2. -webkit-filter: saturate(1); /* Normal */
3. -webkit-filter: saturate(10); /* Alta saturación */

Opacity (opacidad)

1. -webkit-filter: opacity(0); /* Transparente */
2. -webkit-filter: opacity(0.5); /* 50% transparente */
3. -webkit-filter: opacity(1); /* Normal */

Comentarios