CSS
HTML
COMPONENTS
CODE HUB
CSS Invertierungsgenerator
Konfiguration
Invert
Klasse
Vorschau
Code
Coden lernen mit Lara
Meistere Programmierkonzepte Schritt für Schritt mit deinem interaktiven KI-Tutor. Lara erklärt komplexe Logik, überprüft deine Praxisübungen und hilft dir, ein solides Fundament in der Softwareentwicklung aufzubauen.
Interaktive Programmierlektionen, angepasst an dein eigenes Tempo.
Jetzt lernen mit Lara startenCSS Invertierungsgenerator
In CSS können Sie den Invertierungseffekt auf Elemente mit der Filter-Eigenschaft anwenden. Der Invertierungseffekt kehrt im Wesentlichen die Farben eines Elements um und erzeugt ein negatives oder invertiertes Erscheinungsbild.
So können Sie den Invertierungseffekt in CSS verwenden:
.invert-element {
filter: invert(100%);
}
In diesem Beispiel:
- Die Klasse '.invert-element' wendet den Invertierungseffekt auf das Element an, auf das sie abzielt.
- invert(100%) gibt eine 100%ige Invertierung an, was bedeutet, dass die Farben des Elements vollständig umgekehrt werden.
Sie können den Prozentwert anpassen, um die Intensität der Invertierung zu steuern. Beispielsweise würde invert(50%) zu einer teilweisen Invertierung führen, wobei einige der ursprünglichen Farben erhalten bleiben.
Hier ist ein weiteres Beispiel mit teilweiser Invertierung:
.partial-invert-element {
filter: invert(30%);
}
In diesem Fall wendet die Klasse '.partial-invert-element' einen 30%igen Invertierungseffekt an, was zu einer teilweisen Umkehrung der Farben führt.
Der Invertierungseffekt kann verwendet werden, um einzigartige visuelle Effekte und Farbtransformationen in Ihren Webdesigns zu erzeugen. Es ist ein kreatives Werkzeug, mit dem Sie experimentieren können, um bestimmte visuelle Stile zu erzielen oder Ihren Inhalten Abwechslung zu verleihen.