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

bg color

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”&gt;
<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…

Anuncios

20 thoughts on “Convertir imágenes en color a blanco y negro con CSS

    • Hola, gracias por el comentario.
      El caso es que yo lo he probado hasta FF v.18.0.1 y va correctamente, en los otros dos casos no tenia constancia puesto que ni en Safari ni en Opera lo he probado.

      Donde ya no me funciona es en IE10 (aunque en modo compatibilidad si…), el caso es que la entrada ya tiene su “antigüedad” quizás seria conveniente darle un repaso. 🙂

      De nuevo gracias por tomarte tu tiempo.

      Me gusta

    • Este es un efecto/filtro que se aplica en el Hover (en este caso), y con el que evitamos tener que disponer de la misma foto en escala de grises en todas las imágenes del sitio, por lo tanto, la que se almacena en el servidor es siempre la original en color.
      Un saludo! y gracias por tu comentario

      Le gusta a 1 persona

  1. Pingback: Despidiendo el año 2013 | Lumilued Blog

  2. Buenos días,

    creo que a lo mejor me podrías ayudar. Me gustaría que en mi dispositivo Firefox con motor Gecko pudiera visualizar imágenes con efectos de este tipo. De hecho el de escala de grises me funciona, pero me gustaría realizar lo mismo para el brillo, contraste, redondear bordes y el color sepia.

    ¿Sabrías indicarme algún código SVG para estos efectos?

    Me gusta

    • Hola, que tal Verónica?,
      Echando un ojo a esta pagina (http://docs.webplatform.org/wiki/svg/tutorials/smarter_svg_filters) puedes resolver tu duda, como podras ver, es necesario formatear una matriz de colores para conseguir el efecto deseado, por ejemplo el sepia en SVG, algo así:

      filter id=”css_sepia”
      feColorMatrix
      type=”matrix”
      values=”.343 .669 .119 0 0
      .249 .626 .130 0 0
      .172 .334 .111 0 0
      .000 .000 .000 1 0
      /filter

      (he quitado los símbolos mayor y menor por el tema de que mi WordPress no lo admite en los coments)

      Me gusta

      • Hola de nuevo,

        tengo un problemilla con el tema de estos efectos, y es que estoy intentando hacer en mi app Firefox OS (motor Gecko) que funcionen.

        No sé si me podrás ayudar en esto, pero es que no entiendo porqué en el simulador que viene como complemento en el navegador de Firefox sí que me funcionan todos perfectamente y, en cambio, en mi dispositivo y en App Manager no…Cuando el de escala de grises y el de opacidad me funcionaban antes.

        ¿Sabrías decirme el motivo? Porque entiendo que si en el simulador funcionan, y es que antes dos de ellos lo hacían, ¿por qué ahora no?

        Tengo el código de la app actualizado en github por si me pudieras echar una mano: https://github.com/vero1988/CamAppImages

        Un saludo y gracias.

        Me gusta

      • Si miras la documentación oficial para desarrolladores de Firefox podemos ver que lo que quieres hacer parece que no esta soportado por Gecko:

        https://developer.mozilla.org/en-US/docs/Web/CSS/filter?redirectlocale=en-US&redirectslug=CSS%2Ffilter#Specifications

        No he mirado el código de tu app porque no tengo demasiado tiempo en estos momentos, pero a veces un breve repaso por el developer network de Mozilla puede enseñarnos que podemos hacer y que no.. de todos modos si encuentras una alternativa me gustaría conocerla.

        Me gusta

      • Antes de nada quería agradecerte el interés que me estás mostrando al intentar solucionarme todo lo antes posible.

        Pero sobre el link que me comentas, ese ya le tenía presente y, de hecho, si lees en la nota de Gecko pone que sólamente se puede implementar por url(). Tal como yo lo tengo.

        Gecko notes

        Gecko currently only implements the url() form of the filter property.

        De hecho, escala de grises sí que me funcionaba antes y opacidad, y ahora que he puesto todos no funciona ninguno :$ … Así que no sé a qué puede deberse, por eso te escribía, por si sabías algo de esto.

        De todos modos, gracias por tu interés, de verdad.

        Un saludo.

        Me gusta

      • Hola de nuevo, efectivamente la nota no la hice demasiado caso, evidencia de q no tengo demasiado tiempo para investigación y evidencia de que no desarrollo para Firefox OS, suerte. 😉

        Me gusta

  3. buenos días amigo disculpa la molestia y bueno el tiempo que a pasado con respecto al tema pero tengo un problema me funciona todo muy bien pero para el caso de internet explorer funciona solo hasta el nueve si me pueden dar un soporte, ayuda con respecto a este tema para que este función trabaje en el 10 y 11 muchas gracias de antemano

    Me gusta

  4. Pingback: Despidiendo el año 2014 | Lumilued Blog

Los comentarios están cerrados.