Web BizarroWeb Bizarro

Suscríbete a nuestro Newsletter

X

Únete a nuestra lista de correos para recibir semanalmente actualizaciones de nuestro contenido.

Mostrar imágenes en escala de grises con CSS

Mostrar imágenes en escala de grises con CSS 12.JUN.14

Gianfranco Lemmo
Fundador WebBizarro

Los filtros con CSS no son soportados de una manera realmente amplia pero aún así, son realmente impresionantes y un moderno recurso para la imagen en la web. Estos filtros te permiten modificar la manera en que se muestran las imágenes de muchas formas, una de las mismas es mostrar las imágenes en escala de grises.

Hacerlo requiere de un mínimo de CSS:

img.bw {
    filter:  grayscale(1);
}

También puedes animar una imagen para que se convierta gradualmente en escala de grises:

img.bw {
    filter:  grayscale(0);
}

img.bw.grey {
    filter:  grayscale(1);
    transition-property: filter;
    transition-duration: 1s;
}

Aquí pueden ver un ejemplo.