CSS: Farben von klassisch bis neu 11.01.2022, 09:17 Uhr

Die Farbe macht‘s

In CSS gibt es viele Arten, mit Farben zu arbeiten. Der Artikel zeigt klassische und neue Methoden.
(Quelle: Foto: GagoDesign / Shutterstock)
Textfarbe, Hintergrundfarbe, Rahmenfarbe, Schattenfarbe, Farben im Farbverlauf, Outline-Farben und vieles mehr: Farbangaben benötigen Sie an vielen Stellen in CSS. Inzwischen gibt es eine Menge verschiedener Wege, Farben anzugeben – und besonders vielversprechend sind die neuen Farbfunktionen wie lch() oder die relativen Farbangaben. Bevor wir dazu kommen, aber erst einmal ein kurzer Blick auf die klassischen Möglichkeiten, denn auch hier gibt es etliche Neuerungen einschließlich neuer Syntax-Variationen.
Farben braucht man bei klassischen und neueren Eigenschaften wie color (Vordergrundfarbe, vor allem Textfarbe), background-color (Hintergrundfarbe), border-color (Rahmenfarbe – wenn nicht angegeben, wird der color-Wert genommen), outline-color (Farbe des outline), text-decoration-color (Farbe der Textunterstreichung u.Ä.), text-emphasis-color (Farbe der Hervorhebungszeichen) oder bei Schatten (text-shadow, box-shadow). Außerdem kann man die Farbe des Cursors in Input-Feldern mit caret-color festlegen und die Farbe des Trennzeichens beim Multicolumn-Layoutmodul über column-rule-color. Farben sind auch wichtig bei allen Funktionen für Farbverläufe, also bei linear-gradient(), radial-gradient() und conic-gradient() und den wiederholten Verläufen repeating-linear-gradient() etc. In den W3C-Dokumentationen wird der Datentyp als <color> gekennzeichnet.

web & mobile DEVELOPER

Sie wollen zukünftig auch von den Vorteilen eines plus-Abos profitieren? Werden Sie jetzt web&mobile Developer plus Kunde.
  • 2 Monate Gratis testen
  • Über 4.000 qualifizierte Fachartikel
  • Diverse DevBooks thematisch für Sie zusammen gestellt
  • Webcasts von 30 - 90 Min.
  • Aufzeichnungen von ausgewählten Fortbildungen und Konferenzen
  • Auf jedem Gerät verfügbar