CSS
HTML
COMPONENTS
CODE HUB
Generador de Escala de Grises CSS BETA
Configuración
Grayscale
Clase
Vista previa
Código
Generador 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.
Herramientas destacadas
Hub de CódigoSeleccionar idioma
Establecer tema
© 2024 ReadyTools. Todos los derechos reservados.