Loading...


CSS Invertierungsgenerator

Konfiguration

Invert

Klasse

Vorschau

Parliament of Hungary, Budapest

Code

ReadyTools Academy

Kommt bald

Lerne HTML, CSS und JavaScript kostenlos mit der ReadyTools Academy.

Verfolge deinen Lernfortschritt, wachse in deinem Tempo und habe Spaß dabei! 🎯

CSS 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.


Top-Werkzeuge

CodeHubBoardly NEULinksy NEUChromo NEU

Sprache wählen

Thema wählen

© 2025 ReadyTools. Alle Rechte vorbehalten.