El módulo de filtros

facebook-svg gplus-svg twitter-svg

Nota: Los filtros CSS son una tecnología experimental. Por favor consulte el soporte en los navegadores de esta propiedad.

Pongamos que buscamos conseguir un efecto especial: al pasar con el ratón por encima de una imagen en blanco y negro, queremos que se transforme, mediante una animación, en una imagen en colores.
Para lograr este efecto necesitamos dos imágenes: una en blanco y negro y otra en colores.  Esto se traduce en un doble número de solicitudes HTTP y por lo tanto una página más lenta. También necesitaremos que un <script>; compruebe que las dos imágenes estén cargadas antes de permitir que la animación empiece. De lo contrario al pasar por encima con el ratón, la imagen puede desaparecer.

En CSS3, el módulo de filtros ( Filter Effects Module Level 1 ) nos permite conseguir todo esto utilizando una sola imagen.

.filtros-demo{
	-webkit-filter:grayscale(1);
	filter:grayscale(1);
    -webkit-transition : -webkit-filter 1s ease-out;
	transition : -webkit-filter 1s ease-out;
}
.filtros-demo:hover{
	-webkit-filter:grayscale(0);
	filter:grayscale(0);
}
enfeinada
enfeinada

La mala noticia es que por ahora esto funciona solo en Chrome, en Safari  y en Opera. Firefox 33 tiene parcial soporte para los filtros CSS, mientras que Firefox 34 carece de soporte. Empezando con Firefox 35 el soporte es completo sin necesidad de prefijos.

En lo que concierne Internet Explorer todavía no soporta filtros pero dicen que están en ello ( Current IE status: In Development )

Seamos optimistas

Si un filtro CSS no funciona, no es una catástrofe. Si, es verdad, el usuario de Firefox 34 – por ejemplo - no tendrá la misma experiencia que los demás usuarios, pero, por lo general, esto no debería interferir con la funcionalidad de la pagina.
Además los filtros CSS3 son muy fácil de utilizar, y la sintaxis básica es muy sencilla.

URL - los primeros filtros CSS

Los filtros en CSS3 tienen su origen en SVG. En 2008 Robert O'Callahan ( Mozilla ) vio un gran potencial en aplicar filtros SVG a los elementos HTML mediante CSS. Para aplicar un filtro SVG a una imagen utilizamos esta sintaxis:

.imagen{ filter: url(#hueRotate180);}

donde #hueRotate180 representa el id del filtro SVG aplicado.

<svg id="filtro-svg">
    <filter id="hueRotate180">
    	<feColorMatrix type="hueRotate" in="SourceGraphic" values="180"/>
    </filter>
</svg>
<svg id="filtro-svg">
<filter id="hueRotate180">
<feColorMatrix type="hueRotate" in="SourceGraphic" values="180"/>
</filter>
</svg>

enfeinada

imagen original

enfeinada

filter: url(#hueRotate180)

SVG


svg#filtro-svg{ visibility: hidden; height:1px; width:1px;}
.url{
	-webkit-filter: url(#hueRotate180);
	filter: url(#hueRotate180);
} 
enfeinada

imagen original

enfeinada

filter: url(#hueRotate180)

SVG

Escala de grises ( grayscale )

Para que una imagen aparezca en blanco y negro, el código CSS es:

.imagen{ filter:grayscale(1);}

Y sí, tenemos que utilizar prefijos.

.imagen{ -webkit-filter:grayscale(1);
         filter:grayscale(1);}

La función grayscale() toma como único parámetro un número de 0 a 1 o un porcentaje. Si el parámetro es 1 o 100% la imagen aparece en blanco y negro.  De hecho este es el valor por defecto y si no proporcionamos ningún parámetro el CSS entenderá que queremos una imagen en blanco y negro. Si el valor del parámetro es 0 o 0%, la  imagen queda sin cambiar.

.imagen{ filter:grayscale(0);} /* la imagen original  */
.imagen{ filter:grayscale(.5);} /* genera una imagen en escala de grises de 50%  */
.imagen{ filter:grayscale(1);} /* genera una imagen en blanco y negro */
.imagen{ filter:grayscale();} /* genera una imagen en blanco y negro */
enfeinada

filter:grayscale(0)

enfeinada

filter:grayscale(.5)

enfeinada

filter:grayscale(1)

La saturación ( saturate )

La función saturate() hace lo mismo que la función grayscale(), solo que al revés. Exactamente como en el caso de grayscale(), la función saturate() toma como único parámerto un número o un porcentaje.
A diferencia de grayscale(), si el valor de este parámetro es 0 ( filter:saturate(0) ) conseguimos colores completamente desaturados: o sea: una escala de grises. Si por lo contrario el valor de este parámetro es 1, los colores quedan sin cambiar. Pero también podemos aplicar valores más grandes que 1 ( o 100% ). En este caso el resultado es una imagen de colores intensos, saturados.
El valor por defecto de del parámetro de saturate() es 1, y por tanto filter:saturate() deja la imagen sin cambiar.

enfeinada

filter:saturate(0)

enfeinada

filter:saturate(1)

enfeinada

filter:saturate(3)

El brillo con brightness( )

También podemos modificar el brillo de una imagen utilizando la función brightness(), que toma como único parámetro un número o un porcentaje. Si el valor de este parámetro es 1 ( o 100% ) la imagen queda sin cambiar. Si el valor es más pequeño que 1 la imagen aparece oscurecida.
El valor por defecto de del parámetro de brightness() es 0, y por tanto filter:brightness() produce una imagen completamente negra.

enfeinada

filter:brightness(1)

enfeinada

filter:brightness(.5)

enfeinada

filter:brightness(1.5)

El contraste con contrast( )

El contraste representa la diferencia de luminosidad y/o color entre las áreas más claras y más oscuras de una imagen. Podemos manipular el contraste de una imagen utilizando la función contrast(). Esta función toma como único parámetro un número o un porcentaje. Si el valor de este parámetro es 1 la imagen queda sin cambiar. Si el valor es más pequeño que 1 el contraste baja, produciendo una imagen completamente gris para filter:contrast(0).
El valor por defecto de contrast() es 1 – deja la imagen sin cambiar

enfeinada

filter:contrast(1)

enfeinada

filter:contrast(.5)

enfeinada

filter:contrast(2)

Imagenes en sepia

Convertir una imagen tonos de sepia, es muy parecido a lo que acabamos de hacer para convertir una imagen a blanco y negro. En este caso utilizamos la función sepia().
La función sepia() toma como único parámetro un número de 0 a 1 o un porcentaje. Si el parámetro es 1 o 100% la imagen aparece en sepia. De hecho este es el valor por defecto y si no proporcionamos ningún parámetro el CSS entenderá que queremos una imagen en sepia. Si el valor del parámetro es 0 o 0%, la  imagen queda sin cambiar. Valores intermediares tendrán este aspecto de fotografía antigua que, parece, se puso de moda.
El valor por defecto de sepia() es 1 y por tanto, si no proporcionamos un valor, la imagen aparece virada a sepia.

enfeinada

filter:sepia(1)

enfeinada

filter:sepia(.5)

enfeinada

filter:sepia(0)

Opacidad con opacity

Podemos manipular la opacidad de los elementos HTML utilizando la propiedad opacity. Esto ya lo sabemos. También podemos utilizar un filtro CSS con este propósito.

img{
  filter:opacity(.5);
  }

La function opacity() toma un solo parámetro, un número de 0 a 1 o un porcentaje. Si el valor de este parámetro es 1 o 100%, la imagen es 100% opaca. Para valores  mas pequeños que 1, la imagen se vuelve transparente. Pero estas son banalidades. Las cosas se ponen interesantes cuando combinamos este filtro con otros.
Abajo, a la segunda imagen le hemos aplicado una sombra con box-shadow. A la tercera imagen le hemos aplicado la misma sombra, pero esta vez utilizando un filtro: drop-shadow().

enfeinada

filter:opacity(1)

enfeinada

filter:opacity(.5);
box-shadow:5px 5px 5px #000;

enfeinada

filter:opacity(.5)
drop-shadow(5px 5px 5px #000);

Invert

También podemos conseguir la "inversa" o la "negativa" de una imagen, utilizando filtros CSS.

.negativo{
  filter:invert(1);
  }

Como la mayoría de los filtros que hemos visto hasta ahora, toma como único parámetro un número de 0 a 1 o un porcentaje. Si el parámetro es 1 o 100% conseguimos el negativo de la imagen. De hecho este es el valor por defecto y si no proporcionamos ningún parámetro el CSS entenderá que queremos una imagen en negativo. Si el valor de este parámetro es 0, la imagen quedará sin cambiar. Para un valor de 0.5 o 50%, tal como es de esperar,  conseguimos un bloque gris sólido.

También podemos combinar este filtro con otros. Si lo combinamos con grayscale, podemos conseguir el negativo de la imagen en blanco y negro.

.negativo{
  filter: grayscale(1) invert(1);
  }

Por favor note que los dos filtros están separados solo por un espacio en blanco.

enfeinada

filter:invert(0)

enfeinada

filter:invert(1)

enfeinada

filter:grayscale(1) invert(1);

Manipular el color con hue-rotate

Antes de hablar de hue-rotate, pensemos un momento en los colores HSL.

div {
   background-color : hsl(180,100%,50%); /* hsl( hue, saturation%, lightness% )*/
   }

El primer parámetro hue ( hsl(180,100%,50%) ) puede tomar valores de 0 a 359 ya que se trata de un ángulo en la rueda de los colores: un azul en este caso.

Selector de Colores Una herramienta que te ayudara a seleccionar los colores para tu proyecto.

Podemos conseguir varios tonos de este color, modificando la saturación ( hsl(180, 100%, 50%) ) o podemos crear colores más claros o más oscuros modificando la luminosidad ( ( hsl(180, 100%, 50%) ), pero en este momento, lo que realmente nos interesa es el primer parámetro: hue.

La función hue-rotate() toma como único parámetro el ángulo en grados hexadecimales y lo añade, sistemáticamente, al valor existente de hue para cada pixel. Por ejemplo:

div {
  background-color : hsl(180,100%,50%);
  filter: hue-rotate(120deg);
  }
es equivalente a:
div {
   background-color : hsl(300,100%,50%); /*180 + 120 = 300*/
  }

En el caso de una imagen el el filtro CSS accederá uno por uno sus pixeles, y modificará el color de cada pixel según lo explicado arriba.

enfeinada

filter:hue-rotate(0deg)

enfeinada

filter:hue-rotate(180deg)

enfeinada

filter:hue-rotate(270deg)

Ponle una sombra con drop-shadow

Aunque la sintaxis se le parece, filter:drop-shadow() no es lo mismo que box-shadow.

filter:drop-shadow( desplazamiento horizontal desplazamiento vertical desenfoque color )

Mientras que box-shadow aplica la sombra al contorno del elemento, filter:drop-shadow() toma en cuenta las transparencias.

Ya hemos visto un ejemplo de lo que pasa cuando aplicamos filter:drop-shadow() a una imagen semitransparente. Si una imagen tiene zonas totalmente transparentes, la diferencia entre box-shadow y filter:drop-shadow() es dramática.

enfeinada

filter:drop-shadow(1px 1px 3px #000)

enfeinada

box-shadow :1px 1px 3px #000

enfeinada

filter:drop-shadow(1px 1px 3px #000)

Ajustar el desenfoque con blur

La función blur() aplica un desenfoque gaussiano a la imagen, y toma como único parámetro el radio del blur en pixeles.
El valor por defecto es de 0px, o sea sin desenfoque.

enfeinada

filter:blur(0px)

enfeinada

filter:blur(3px)

enfeinada

filter:blur(5px)

La chuleta

Filtro Defecto Descripción
blur 0px Aplica un desenfoque gaussiano a la imagen
blur(0px) - la imagen original
brightness 0 brightness(0) - produce una imagen completanente negra
brightness(1) - la imagen original
contrast 1 contrast(0) - produce una imagen completanente gris
contrast(1) - la imagen original
drop-shadow   filter: drop-shadow( desplazamiento horizontal desplazamiento vertical desenfoque color )
grayscale 1 exactamente como saturate pero al revés
grayscale(0) - la imagen original
grayscale(1) - imagen en blanco y negro
hue-rotate 0deg hue-rotate(0deg) - la imagen original
hue-rotate(180deg) - la imagen en colores complementarios
invert 1 invert(0) - la imagen original
invert(1) - el negativo de la imagen
opacity 1 opacity(0) - opacidad 0% (totalmente transparente)
opacity(1) - opacidad 100% (la imagen original)
saturate 1 exactamente como grayscale() pero al revés
saturate(1) - la imagen original
saturate(0) - imagen en blanco y negro
sepia 1 sepia(0) - la imagen original
sepia(1) - imagen en sepia
url   url(#idDelFiltroSVGaplicado)