Convertir imágenes en color a blanco y negro con CSS

Los filtros nos permiten procesar visualmente imagenes en el navegador sin necesidad de pasar previamente por Photoshop o usar intensivamente JavaScript o PHP. Los filtros en CSS3 son ampliamente compatibles con las versiones más recientes de Firefox y Chrome, y ademas podremos adaptar su compatibilidad para las versiones anteriores y navegadores alternativos – incluso IE 🙂 – mediante la combinación de distintas técnicas en la hoja de estilo.

En este artículo vamos a convertir una imagen en color a blanco y negro solamente con CSS, para ello usaremos la imagen de arriba que llamaremos «bg.gif». Con esta técnica es también posible alcanzar un tono sepia, desenfoque, brillo, contraste y otros muchos efectos.

Desaturar una imagen de color no puede ser más sencillo con CSS3. Crearemos la hoja de estilo y añadiremos el filtro como una clase dentro de «img», así la podremos usar masivamente en nuestras paginas:

img.desaturada { filter: grayscale(100%); }

Los navegadores actuales permiten aplicar filtros a través de prefijos CSS3, por lo que nuestro primer trabajo solo consiste en insertar el código escrito que aun no existe en CSS con el fin de asegurar su funcionamiento en un futuro:

img.desaturada { filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
}

Ahora utilizaremos nuestra nueva clase en nuestro codigo HTML de la siguiente manera:

<img src=bg.gif alt=»Background» style=»width:512px;height:512px» class=desaturada >

Bien, hasta ahora este ejemplo solo es compatible con Chrome 18 o superior, asi que, mientras esperamos que los demas empiecen a ser compatibles con esta nueva carasteristica de CSS3 podremos usar filtro SVG, para ello crearemos un archivo de que llamaremos «filter.svg» lo guardaremos en la misma ubicación que nuestro HTML y escribiremos en su interior:

<svg version=»1.1″ xmlns=»http://www.w3.org/2000/svg»>
<filter id=»gris»>
<feColorMatrix type=»matrix» values=»0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0 0 0 1 0″/>
</filter>
</svg>

Este nuevo archivo lo tendremos que referenciar ahora en nuestro CSS de tal modo que quedaria entonces asi:

img.desaturada {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: url(filter.svg#gris);

}

Por ultimo nos queda dar soporte a IE, para eso nos queda añadir una ultima linea al CSS:

img.desaturada{
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: url(filter.svg#gris);

filter: gray;

}

 

Solamente nos queda esperar a que todos los navegadores soporten el estandar CSS3… no entiendo como no se ponen de acuerdo…