CSS
HTML
COMPONENTS
CODE HUB
CSS Sepia-Generator
Konfiguration
Sepia
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 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.