Los filtros CSS aún no son ampliamente soportados por los principales navegadores, pero son realmente impresionantes y, la verdad, una necesidad moderna dentro de las imágenes que se muestran en la web. Los filtros CSS permiten modificar la visualización de imágenes en una gran variedad de maneras. Una de estas maneras para modificar imágenes es la creación de la escala de grises en una imagen.
Hacer esto requiere una mínima codificación de CSS:
img.bw {
filter: grayscale(1);
}
Incluso puede animar una imagen para que se muestre o con escala de grises, o sin escala de grises también, utilizando exclusivamente CSS con este código:
img.bw {
filter: grayscale(0);
}
img.bw.grey {
filter: grayscale(1);
transition-property: filter;
transition-duration: 1s;
}
Los filtros CSS permiten mucho más que simples ajustes en la escala de grises de una imagen, así que si aún no has experimentado con ellos, por favor, tómate un tiempecito en jugar con ellos, pasarás un rato muy divertido, te lo aseguro. Recuerda que si el usuario decide descargar la imagen, se descargará en sus ordenador con los colores originales, ya que la transformación se hace del lado del cliente con filtros CSS, es decir, solo es una mera máscara encima de la imagen. Si quisieramos que el usuario se descargue la imagen ya en blanco y negro, tendríamos que utilizar un lenguaje del lado del servidor como ASP o PHP, pero eso ya es otra historia.
Y este ha sido el tutorial sobre mostrar imágenes en escala de grises con los filtros CSS, esperamos que te haya gustado y sepas aplicarlo en tus futuros proyectos. Ya sabes que si nos quieres proponer un tema que quieres ver reflejado como un tutorial, solo tienes que hacer uso del área de comentarios de un poco más abajo. Por el contrario, si quieres enviarnos tus propios tutoriales, puedes hacerlo a través de la intranet de usuarios que está habilitada para ello, a través del menú Enviar Tutorial. Ya sabes, ayúdanos a crecer con tus conocimientos. ¡Un saludo y feliz código!