CSS
HTML
COMPONENTS
CODE HUB
Generador de Inversión CSS
Configuración
Invert
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 Inversión CSS
En CSS, puedes aplicar el efecto de inversión a los elementos utilizando la propiedad filter. El efecto de inversión esencialmente invierte los colores de un elemento, creando una apariencia negativa o invertida.
Aquí te mostramos cómo usar el efecto de inversión en CSS:
.invert-element {
filter: invert(100%);
}
En este ejemplo:
- La clase .invert-element aplica el efecto de inversión al elemento que tiene como objetivo.
- invert(100%) especifica una inversión del 100%, lo que significa que los colores del elemento serán completamente invertidos.
Puedes ajustar el valor del porcentaje para controlar la intensidad de la inversión. Por ejemplo, invert(50%) resultaría en una inversión parcial, preservando algunos de los colores originales.
Aquí tienes otro ejemplo con inversión parcial:
.partial-invert-element {
filter: invert(30%);
}
En este caso, la clase .partial-invert-element aplica un efecto de inversión al 30%, resultando en una reversión parcial de los colores.
El efecto de inversión se puede utilizar para crear efectos visuales únicos y transformaciones de color en tus diseños web. Es una herramienta creativa para experimentar y lograr estilos visuales específicos o agregar variedad a tu contenido.