CSS: The Definitive Guide, 5. Auflage

Kapitel 9. Farbverläufe

Diese Arbeit wurde mithilfe von KI übersetzt. Wir freuen uns über dein Feedback und deine Kommentare: [e-mail]

Drei von CSS definierte Bildtypen werden vollständig mit CSS beschrieben: lineare Verläufe, radiale Verläufe und konische Verläufe. Jeder Typ hat zwei Untertypen: sich wiederholende und nicht wiederholende Verläufe. Verläufe werden am häufigsten in Hintergründen verwendet, obwohl sie in jedem Kontext eingesetzt werden können, in dem ein Bild zulässig ist - wie zum Beispiel in list-style-image und border-image.

Ein Farbverlauf ist ein visueller Übergang von einer Farbe zur anderen. Ein Farbverlauf von Gelb nach Rot beginnt mit Gelb, verläuft über weniger Gelb, rötlichere Orangetöne und endet schließlich bei einem vollen Rot. Wie allmählich oder abrupt der Übergang ist, hängt davon ab, wie viel Platz der Farbverlauf hat und wie du die Farbstopps und Farbverlaufshinweise definierst. Wenn du über 100 Pixel von Weiß zu Schwarz übergehst, ist jedes Pixel entlang des Standardverlaufs des Farbverlaufs ein weiteres 1% dunkleres Grau, wie in Abbildung 9-1 gezeigt.

Abbildung 9-1. Der Verlauf eines einfachen Gefälles

Bei der Erkundung von Farbverläufen solltest du immer daran denken: Farbverläufe sind Bilder. Es spielt keine Rolle, dass du sie mit CSS beschreibst - sie sind genauso Bilder wie SVGs, PNGs, JPEGs und so weiter. Aber Farbverläufe ...