CSS
HTML
COMPONENTS
CODE HUB
Generador de Escala de Grises CSS
Configuración
Grayscale
Clase
Vista previa
Código
Aprende a programar con Lara
Domina los conceptos de programación paso a paso con tu tutora de IA interactiva. Lara explica lógicas complejas, revisa tus ejercicios prácticos y te ayuda a construir una base sólida en el desarrollo de software.
Lecciones de programación interactivas adaptadas a tu propio ritmo.
Empezar a aprender con LaraGenerador de Escala de Grises CSS
En CSS, puedes aplicar el efecto de escala de grises a elementos, como imágenes o texto, utilizando la propiedad filter. El efecto de escala de grises convierte los colores de un elemento en tonos de gris, dándole una apariencia en blanco y negro.
Aquí te mostramos cómo aplicar el efecto de escala de grises en CSS:
.grayscale-element {
filter: grayscale(100%);
}
En este ejemplo:
- La clase .grayscale-element aplica el efecto de escala de grises al elemento que tiene como objetivo.
- grayscale(100%) especifica que el elemento debe ser completamente en escala de grises, lo que significa que todos los colores se convierten en tonos de gris.
Aquí tienes otro ejemplo con escala de grises parcial:
.partial-grayscale-element {
filter: grayscale(50%);
}
En este caso, la clase .partial-grayscale-element aplica un efecto de escala de grises al 50%, permitiendo que parte del color se muestre.
La propiedad filter también puede usarse para aplicar varios otros efectos visuales, y es una herramienta versátil para mejorar la apariencia de los elementos en tu página web. Ten en cuenta que el soporte para la propiedad filter puede variar entre navegadores, así que es importante probar el efecto en diferentes navegadores para asegurar la compatibilidad.