CSS
HTML
COMPONENTS
CODE HUB
Generador de Inversión CSS
Configuración
Invert
Clase
Vista previa
Código
ReadyTools Academy
Lerne HTML, CSS und JavaScript kostenlos mit der ReadyTools Academy.
Verfolge deinen Fortschritt, lerne in deinem eigenen Tempo und habe Spaß dabei! 🎯
ComenzarGenerador 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.