CSS

Farben

Farben transportieren Stimmung und Hierarchie. CSS bietet mehrere Schreibweisen und mächtige Verläufe.

Text- und Hintergrundfarbe

color legt die Textfarbe fest.

background beziehungsweise background-color füllen die Flaeche eines Elements.

Farben setzen

.hinweis {
  color: #0f766e;
  background-color: #f0fdfa;
}

Hex (#ff6600), rgb(255, 102, 0) und hsl(24, 100%, 50%) beschreiben dieselbe Farbe unterschiedlich.

HSL ist praktisch zum Ableiten von Varianten: gleicher Farbton, andere Helligkeit.

Mit rgba() oder hsla() kommt ein Alpha-Kanal für Transparenz dazu.

linear-gradient() erzeugt Farbverläufe entlang einer Richtung.

radial-gradient() laeuft kreisförmig von einem Zentrum nach aussen.

<linear-gradient()><radial-gradient()>

Verlauf

.hero {
  background: linear-gradient(135deg, #0f766e, #0ea5e9);
}

Markiere die Lektion als abgeschlossen, um XP und Streak zu erhalten.