Tictac Soluciones Informáticas > Diseño web > Imágenes en blanco y negro con CSS3 (grayscale filter)

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;
}

#img1{

margin-left: auto;

margin-right: auto;

display:block;

}

#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.

2018-08-29T10:36:58+00:0007/06/2012|Diseño web, HTML5|

2 Comments

  1. Ismael Guzman 10/04/2014 en 14:59 - Responder

    Gracias amigos, me ayudó en mucho

  2. gregpoulsen 04/04/2019 en 18:04 - Responder

    Muy bonito blog. Muchas gracias al autor.
    Hice hincapié en varios detalles y espero usarlo en mi trabajo.
    Buena suerte

Deje su comentario

Centro de preferencias de privacidad

Estrictamente necesarias

Cookies necesarias para el correcto funcionamiento de nuestra web. Por ejemplo, necesitamos que unas cookies estrictamente necesarias estén habilitadas con el objetivo de guardar tus preferencias sobre el uso de cookies. Si deshabilitas esta cookie, no podremos guardar tus preferencias. Esto quiere decir que cada vez que visites nuestra web, tendrás que volver a habilitar o deshabilitar las cookies otra vez.

wordpress_test_cookie, Wp-settings-time-1, wp-settings-1, gdpr, 1P_JAR

AdvertisingEstadísticas y análisis

Cookies de análisis de terceros. Estas cookies son generadas por Google Analytics. Google almacena la informacion recogida por las cookies en servidores ubicados en Estados Unidos, cumpliendo con la legislación Europea en cuanto a protección de datos personales y se compromete a no compartirla con terceros, excepto cuando la ley le obligue a ello o sea necesario para el funcionamiento del sistema. Google no asocia su direccion IP con ninguna otra información que tenga.

_ga, _gid, _gat

Analytics

Other