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