w3.unpo<code>todo

El módulo de filtros

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

La chuleta

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);
}

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.

La buena noticia es que en este momento esto funciona en Chrome, Firefox, Edge Safari y Opera. No funciona en IE, y no funcionará nunca ya que IE es un navegador muerto. También hay un pequeño problema con Edge donde falla la función url().

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>

imagen original
filter: url(#hueRotate180)


SVG

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

imagen original

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 */

filter:grayscale(0)

filter:grayscale(.5)

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.

filter:saturate(0)

filter:saturate(1)

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.

filter:brightness(1)

filter:brightness(.5)

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

filter:contrast(1)

filter:contrast(.5)

filter:contrast(2)

Imagenes en sepia()

Convertir una imagen a 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.

filter:sepia(1)

filter:sepia(.5)

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().

filter:opacity(1)

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

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.

filter:invert(0)

filter:invert(1)

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.

filter:hue-rotate(0deg)

filter:hue-rotate(180deg)

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.

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

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

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

Para aplicar una doble sombra podemos concatenar los filtros de esta manera:

filter:drop-shadow(3px 3px 5px #000000) drop-shadow(2px 2px 2px #ffcc00);

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.

filter:blur(0px)

filter:blur(3px)

filter:blur(5px)

La propiedad backdrop-filter

La propiedad backdrop-filter aplica un filtro CSS ( grayscale, contrast, blur, etc...  ) al fondo ( backdrop ) de un elemento y solo detrás del elemento seleccionado.
Un ejemplo clásico es crear un efecto de vidrio mate como en el siguiente ejemplo tomado de MDN: https://developer.mozilla.org/es/docs/Web/CSS/backdrop-filter

See the Pen CSS backdrop-filter*** by Gabi (@enxaneta) on CodePen.