La propiedad filter de CSS3 aún no está implementada en todos los navegadores, hasta el momento podremos implementarla únicamente en los navegadores basados en WebKit.
Para que puedan ver ejemplos en acción podemos ver esta página con fotografías alteradas utilizando este método. Recomendado el uso de Google Chrome.
¿Cómo transformar una imagen a tonos grices?
Para aplicar el efecto de tonos grices a una imagen tendremos que emplear el siguiente código.
-webkit-filter: grayscale(porcentaje);
El porcentaje de conversión puede abarcar desde el 0% (imagen normal, sin efecto) al 100%.
¿Cómo transformar una imagen a tonos sepia?
Los tonos sepia generan la ilusión de antigüedad, ya que las identificamos con las fotografías viejas.
-webkit-filter: sepia(porcentaje);
Al igual que el filtro anterior el porcentaje puede ir desde el 0% al 100%.
Aplicar desenfoque gaussiano o blur
El desenfoque gaussiano imita el efecto que causaría una cámara desenfocada, valga la redundancia. Los detalles más pequeños se desdibujan haciendo que la fotografía se vea más suave, pero se pierde nitidez.
-webkit-filter: blur(radio);
El radio de este filtro se especifica en pixeles, siendo 10px un radio más que suficiente ya que el efecto se logra y el rendimiento no se ve afectado.
SOBRE EL RENDIMIENTO
Alex Danilo, de HTML5 Rocks explica que, cuando configuramos el radio de blur en 2, el filtro debe trabajar con 2 pixeles en cada dirección alrededor de cada pixel de salida (output pixel) para generar el efecto. Esto ocurre en cada pixel de la imagen, generando una cantidad enorme de cálculos (ya que el efecto se logra gracias a un algoritmo matemático), que incrementan a medida que el radio aumenta.
Aumentar o disminuir la saturación
La saturación máxima se obtiene si la luminosidad del canal rojo es de 100% y la de los otros canales (azul y verde) es 0% (hablando desde el sistema RGB. Si la luminosidad de todos los canales es igual, el color no estará saturado en absoluto: el negro es 25, 25, 25 y el blanco 255, 255, 255, encontrándose todos los tonos grices en medio.
-webkit-filter: saturate(número);
Utilizaremos un número mayor a 0. Cuando la saturación es cero, la foto se convierte a tonos grices. Cuando la saturación se halla entre 0 y 1 -utilizando por ejemplo 0.5- la foto está poco saturada y gana color a medida que se acerca al 1 (foto normal). A partir de allí se puede emplear cualquier número para transformar la foto.
¿Cómo aplicar un filtro de color?
Se puede cambiar el matiz de la fotografía utilizando el filtro hue-rotate.
-webkit-filter: hue-rotate(ángulo);
Este filtro trabaja con la rueda de color hsl -rojo 0º, verde 120º y azul 240º-, pero hay que tener en cuenta que en caso del filtro hue-rotate el grado 0 estará en el color actual de la imagen y no en rojo. Los colores sí se sucederán en el orden que lo hacen en la rueda.
Si nuestra fotografía tiene un elemento principal de color azul y deseamos que cambie a tonos rojos, podemos girar la rueda 90 grados. Si queremos que sea verde, giraremos la rueda -90 grados. No sólo este elemento de color azul cambiará su tonalidad, también lo hará todo el resto de los colores en la misma cantidad de grados.
Aumentar o disminuir la luminosidad
Este filtro funciona del mismo modo que lo hace en un monitor o televisión, ajustando entre blanco y negro el color original.
-webkit-filter: brightness(porcentaje);
El porcentaje puede ser negativo o positivo, siendo -100% completamente negra, 100% completamente blanca y 0 la imagen sin modificar.
Aumentar o disminuir el contraste
El contraste funciona de manera similar a la luminosidad
-webkit-filter: contrast(porcentaje);
Para que la fotografía adquiera contraste debemos utilizar un porcentaje mayor a 100%, siendo 100% la imagen sin alterar y 0 una imagen sin colores.
¿Cómo invertir los colores?
Invierte el matiz, la saturación y la luminosidad.
-webkit-filter: invert(porcentaje);
Utilizando el valor 100% tendremos el “negativo” de la foto, como en las cámaras fotográficas no digitales.
DEMO
SOBRE LA DISPONIBILIDAD
En este momento la mayoría de los efectos sólo se encuentra disponible para los navegadores basados en WebKit, y una minoría para Mozilla Firefox. Para que se adecúen a todos los navegadores, en caso de que en un futuro cercano sean implementados lo más conveniente es incluir los vendor prefixes en nuestro CSS. Los efectos que explicaremos en este post solamente funcionan en los browser basados en WebKit.