CSS para decolorar imágenes a escala de grises | Oloblogger 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 naveg...

12 de septiembre de 2012

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
Copy URL

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

follow us in feedly

30 comentarios :

  1. here my version ;))
    http://beben-koben.blogspot.com/2012/02/make-image-to-grayscale-use-svg-for.html

    ResponderEliminar
  2. Oloman disculpa q te haga la consulta por aqui ya q es off-topic, sabes algo sobre los dominios personalizados??, hace unos dias puse uno en uno de mis blogs y nunca aparecio el diseño final. Ayer veo q hay un aviso interno en la pestaña configuración q dice "Maintenance in progress - Domain switching disabled". Ahora el problema es serio ya q puse el dominio propio y no se veia nada, esperé unos dias y nada, decidí regresar a la url de Blogger y veo el aviso, osea no veo nada y ni siquiera puedo regresar a Blogger, osea ese dominio como no lo puedo sacar lo tengo inhabilitado para usar en otro blog, esta es la url: http://www.awapublicitario.com/. Agradezco tu respuesta =)

    ResponderEliminar
    Respuestas
    1. Por fin llegué a tu comentario y efectivamente estaba en el spam. Seguramente esa dirección con la palabra "publicitario" no la digirió bien Blogger :)

      Como ya comentamos por FB, desde hace unos días los dominios nuevos están teniendo problemas.

      Eliminar
  3. Buen día amigo... no he logrado el efecto en Firefox... No se dime que tengo que hacer con ese DIV que me contiene el SVG? importarlo dentro de un XML o que¿? o pegarlo en mi index.. he intentado de todo y pues no he podido atinarle... Gracias

    ResponderEliminar
    Respuestas
    1. No sé qué plataforma usas, pero en un principio lo tendrías que meter a continuación del la apertura del BODY.

      Eliminar
  4. Hola que tal, muy genial el código.. pero creo que no funciona para dispositivos móviles, :s o sí?

    ResponderEliminar
    Respuestas
    1. Pues efectivamente... no funciona. Como habrás visto no hay un estándar para este tipo de filtros y hay que poner varias opciones con distintos prefijos para que funcione en la mayoría, así que supongo que es porque los navegadores de algunos dispositivos no entienden siquiera esos que puse.

      Eliminar
  5. Respuestas
    1. Para Firefox hay que incluir lo que se explica al final de la entrada.

      Eliminar
  6. puse ese codigo despues de la etiqueta body, la he puesto al final donde cierra e incluso en la div que contiene mis imagenes, y el codigo es muy bueno y lo que se puede lograr excelente pero en firefox no me da resultado la escala de grises espero puedas ayudarme mas, espero estes bien

    ResponderEliminar
    Respuestas
    1. Mira la última parte del post, tras la barra de separación. Ahí se explica un truco para que funcione en Firefox.

      Eliminar
  7. Oloman en mi caso si me sale bien en todos los navegadores, pero en Firefox veo la foto q pongo de ejemplo un poco borrosa en escala de grises y al pasar el cursor parece q se mueve como un pixel a la izquierda y para arriba, igual lo noto en otros blogs, pero en tu ejemplo no sucede asi en mousse over, esta quieta, no tiene ese efecto q parece q se desplazara una nada. ¿Qué le has hecho para q no se mueva en FF??

    ResponderEliminar
    Respuestas
    1. Es un efecto casual en este post, porque a mí también me sucede eso de que se mueva. Debe ser por el TRANSITION, pero no sé arreglarlo. En esta plantilla que hice el otro día sí me pasa. Puede que tenga que ver con esto, pero ciertamente no me merece la pena investigar ;)

      Eliminar
  8. Si en el css en lugar de "filter: url('#grayscale');" ponemos directamente "filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000..." no hace falta la capa falsa.

    ResponderEliminar
    Respuestas
    1. ¿Te importaría transcribir el código completo que lo pruebe?

      Eliminar
  9. Hay alguna forma de conseguir el mismo efecto, pero en lugar de gris, sea dorado el color?

    ResponderEliminar
    Respuestas
    1. Hay un filtro que se usa exactamente igual que el GRAYSCALE que se usa aquí y que se llama SEPIA, pero no sé si será exactamente lo que buscas.

      Eliminar
  10. Muchas gracias Oloman, me ha servido este código.

    ResponderEliminar
  11. woooo muy bueno muchas gracias, justo lo que estaba buscando

    ResponderEliminar
  12. Hola, me ha gustado mucho el efecto. Hay alguna manera de hacerlo en Dreamweaver? No sé casi nada de codigos.

    ResponderEliminar
  13. porque no explicas donde agregar los codigos ?
    paso por paso, probablemente no sean mas 3.

    ResponderEliminar
    Respuestas
    1. Si lo hice Amovi. Tras el primer código indiqué que "Con lo anterior en nuestra hoja de estilos...". Es decir, que esa parte de código debe ir en la hoja de estilo.

      La hoja de estilos es dónde va el código CSS y en cada plataforma se implanta de diferente manera. Cuando algo es específico de Blogger suelo indicar en qué parte de la plantilla, pero lo que explico en este post es válido para cualquier plataforma.

      De todas formas si ves estas otras dos entradas seguro que ya sabrás manejar este tema para siempre:
      Blogger para torpes. HTML y CSS
      CSS básico. Ejemplo con imágenes redondas

      Eliminar
  14. Ok el paso a paso tipico se elimina (ej: pega esto antes de < / body > y despues ve a y cambia estos paramentros en el css antes de ]] > < / b :skin > ) , y se reemplaza por la deducción (ej: Incluye el codigo en tu blog despues este otro donde todos los demas lo hacen y listo guarda ).
    ...
    interesante, supongo que tendre que ir a blogger para torpes y volver despues de un tiempo.

    ResponderEliminar
    Respuestas
    1. No se elimina siempre, pero sí, a veces me salto el paso a paso. Como dije, sobre todo cuando el truco no es sólo para Blogger, pues las referencias no son ni parecidas dependiendo de la plataforma que uses.

      Eliminar
  15. excelente, el efecto es muy bonito ;-)

    ResponderEliminar
  16. pero que mierda donde se pone cada cosa

    ResponderEliminar
    Respuestas
    1. ¿Realmente te interesa o esa forma de expresarte es sólo por hacerte notar?

      Eliminar