Loading...


CSS Sepia-Generator

Konfiguration

Sepia

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 Sepia-Generator

In CSS können Sie den Sepia-Effekt auf Elemente mit der Filter-Eigenschaft anwenden. Der Sepia-Effekt verleiht einem Element ein bräunliches, Vintage- oder altmodisches Aussehen, indem er seine Farben in Brauntöne umwandelt.

So können Sie den Sepia-Effekt in CSS verwenden:

.sepia-element { filter: sepia(100%); }

In diesem Beispiel:

  • Die Klasse '.sepia-element' wendet den Sepia-Effekt auf das Element an, auf das sie abzielt.
  • sepia(100%) gibt einen 100%igen Sepia-Effekt an, was bedeutet, dass das Element vollständig in Brauntönen erscheint.

Sie können den Prozentwert anpassen, um die Intensität des Sepia-Effekts zu steuern. Beispielsweise würde sepia(50%) zu einem teilweise sepiafarbenen Aussehen führen, wobei einige der ursprünglichen Farben erhalten bleiben.

Hier ist ein weiteres Beispiel mit teilweisem Sepia:

.partial-sepia-element { filter: sepia(30%); }

In diesem Fall wendet die Klasse '.partial-sepia-element' einen 30%igen Sepia-Effekt an, was zu einer teilweisen Umwandlung in Brauntöne führt.

Der Sepia-Effekt wird oft verwendet, um ein Vintage- oder nostalgisches Aussehen für Bilder oder Elemente zu erzeugen, das an alte Fotografien erinnert. Es ist ein kreatives Werkzeug, um bestimmte visuelle Stile zu erzielen und Ihren Webdesigns Charakter zu verleihen.


Top-Werkzeuge

CodeHubBoardly NEULinksy NEUChromo NEU

Sprache wählen

Thema wählen

© 2025 ReadyTools. Alle Rechte vorbehalten.