CSS para decolorar imágenes a escala de grises

Aplicar filtros dinámicamente mediante CSS a las imágenes de una web, es una de esas cosas que todavía no funcionan igual en todos los navegadores. Ni que decir tiene que la tarea se complica aún más cuando tenemos que contar con todas las versiones que de cada uno de ellos siguen operativas. De hecho en algunos ni funciona, pero vamos a intentar al menos que lo haga en el mayor porcentaje posible.

En este ejemplo veremos cómo cambiar imágenes a todo color por sus equivalentes en escala de grises. Esto puede servir para un efecto hover en el que la imagen pase de gris a color o viceversa, pero también puede ser útil si alguien quiere mostrar por defecto todas las imágenes de su sitio en blanco y negro, evitando estar pasando siempre de manera previa por un editor.

Para este último caso, el uso de CSS permite además revertir fácilmente el estilo y volver a color de una manera muy fácil, esto es, borrando el código que veremos.

---

Por la diversidad de navegadores comentada, hay mucha literatura sobre cúal es el mejor código para hacer esto, así que el que publico a continuación es sólo uno más y no pretende ser el óptimo, pero sí que es el que personalmente me ha dado mejor resultado.

En un principio se trata como siempre de crear una clase nueva con ciertas propiedades, para luego aplicarla al HTML del elemento a modificar, en este caso la imagen.

.grises img {
filter: url('#grayscale'); /* Versión SVG para IE10, Chrome 17, FF3.5, Safari 5.2 and Opera 11.6 */
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%); /* Para cuando es estándar funcione en todos */
filter: Gray(); /* IE4-8 and 9 */

-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.grises img:hover {
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-ms-filter: grayscale(0%);
-o-filter: grayscale(0%);
filter: none;

-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}

Para hacer más corto el código, la segunda parte de cada estado -las líneas con transition- son prescindibles, ya que sólo hacen que el efecto sea gradual y que la transformación no sea tan brusca.

Con lo anterior en nuestra hoja de estilo, sólo tendremos que meter la imagen dentro de una capa con class="grises" para que adopte el efecto que podréis ver posteriormente. Probad a pasar el puntero por encima del coche.

<div class="grises">
<img src="URL_IMAGEN" />
</div>

Una vez más, en Blogger podemos aprovecharnos de ese código extra que el editor de entradas nos inserta vilmente de forma automática y usar la clase separator para que todas las imágenes tengan este efecto.

Traducción: Si en el anterior código sustituimos los dos grises por separator, todas las imágenes de nuestras entradas se verán en blanco y negro y cambiarán a color al hacer hover. No tendremos que añadir entonces nada extra en el HTML que genera cada imagen.

Lo mismo podremos conseguir si atacamos directamente la clase .post-body img y la correspondiente con :hover.

---

Bueno, realmente si hay que añadir algo más para obtener la máxima compatibilidad. Si os fijáis en el CSS, se ha incluido un filtro SVG, por lo que se hace necesario en todos los casos (Blogger/No Blogger) añadir en nuestro HTML el siguiente código extra que genera el efecto.

En Blogger me funcionó tanto en una entrada como tras la apertura del body -siempre tras el CSS- aunque lo tuve que meter dentro de una capa de tamaño cero para que no me generara líneas en blanco indeseadas. Sin esta parte, en Firefox no me funcionaba, así que recomiendo su incorporación.

<div style="width:0;height:0;"><svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg"><filter id="grayscale"><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></div>

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter