Transformar imagen a escala de grises con CSS

Por Noticias0

escalas-de-grises.jpg

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:

[php] img.bw {
filter: grayscale(1);
}
[/php]

También podemos hacer que la imagen realice una transición de color a escala de grises.
Para ello utilizamos el siguiente código.
[php] img.bw {
filter: grayscale(0);
}

img.bw.grey {
filter: grayscale(1);
transition-property: filter;
transition-duration: 1s; /*tiempo de transición del efecto*/
}
[/php]

The images below are full-color images but display as grayscale (black and white) using only CSS!

Imagen Original

 

Imagen con Filtro

 

Comenta

Tu Email no será publicado. Campos requeridos *