Transformar imagen a escala de grises con CSS
Mostrar imágenes en escala de grises con CSS
Para realizar este pequeño desarrollo vamos a tener que recurrir a filtros en CSS. El problema de los mismos es que no son soportados de una manera realmente amplia. Igualmente el resultado es realmente excelente y de acuerdo al desarrollo que estamos realizando puede ser de suma utilidad.
Los filtros css permiten modificar las imágenes de diferentes formas, entre ellas en escala de grises.
Para realizarlo debemos hacer lo siguiente:
filter: grayscale(1);
}
También podemos hacer que la imagen realice una transición de color a escala de grises.
Para ello utilizamos el siguiente código.
filter: grayscale(0);
}
img.bw.grey {
filter: grayscale(1);
transition-property: filter;
transition-duration: 1s; /*tiempo de transición del efecto*/
}
The images below are full-color images but display as grayscale (black and white) using only CSS!
Imagen Original
Imagen con Filtro