Imágenes en blanco y negro con CSS3 (grayscale filter)


       Uno de los trabajos más nuevos de CSS3 son los filtros de imagen. Ya venían funcionando para imágenes SVG, pero ahora se amplia para todo tipo de imágenes.

       Con estos filtros podremos poner una foto en blanco y negro, sepia, cambiar colores, desaturar, etc. Casi como tener un pequeño Photoshop en nuestro CSS. Es interesante para poder hacer ciertos efectos gráficos, aunque no hay que abusar, si siempre vamos a utilizar un cierto filtro sobre una imagen deberíamos dejar el filtro aplicado sobre la imagen fuente y no hacer trabajar al navegador del cliente en cada carga.

       Por ahora estos filtros solo funcionan en las últimas versiones de Chrome (en teoría a partir de la 18, a mi me funciona desde la 19). Vamos a hacer que la siguiente imagen pase a escala de grises cuando pasemos el ratón por encima:

#img1:hover{
-webkit-filter: grayscale(1);
filter:gray;
}

logo
       
       Se ha puesto gama de grises completa, pero podríamos haber puesto un 0.5 y todavía conservaría algo de color. No se sabe cuando lo van a implementar el resto de navegadores, aunque estoy seguro que no pasarán muchos meses. Eso sí, en Internet Explorer nos podemos aprovechar de sus filtros propietarios, que han sido abandonados, pero hasta que implementen los nuevos y para navegadores IE (6 al 9) nos sirven. Es la segunda línea del código CSS “filter:gray;”, como vemos aquí no hay posibilidad de elegir el valor de escala de grises, es o todo o nada.