Farbverläufe

Teil des Abschnitts CSS Mastery der HTML-Journey von Coddy — Lektion 21 von 43.

Verläufe in CSS ermöglichen es Ihnen, fließende Übergänge zwischen zwei oder mehr Farben zu erstellen.

Beginnen wir mit einem einfachen linearen Farbverlauf:

/* Erstelle einen linearen Farbverlauf von oben nach unten */
.gradient-box {
  background: linear-gradient(to bottom, #ff9966, #ff5e62);
}

Dies erzeugt einen Farbverlauf, der von Orange (#ff9966) oben zu einer rötlichen Farbe (#ff5e62) unten übergeht.

Sie können auch die Richtung angeben und mehrere Farben verwenden, wie im folgenden Beispiel:

/* Erstellen Sie einen linearen Farbverlauf von links nach rechts */
.gradient-box {
  background: linear-gradient(to right, red, orange, yellow, green);
}

Teste dich selbst

Diese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.

Teste dich selbst

Diese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.

Aufgabe

Einfach

Erstelle eine CSS-Regel für eine Klasse namens sunset-gradient, die einen linearen Gradienten-Hintergrund anwendet. Der Gradient soll:

Von oben nach unten verlaufen
Mit der Farbe #FFD700 (gold) beginnen
Zu #FF4500 (orangered) übergehen

Spickzettel

CSS-Gradienten erzeugen fließende Übergänge zwischen Farben mit der linear-gradient()-Funktion:

/* Einfacher linearer Gradient von oben nach unten */
.gradient-box {
  background: linear-gradient(to bottom, #ff9966, #ff5e62);
}

/* Linearer Gradient mit Richtung und mehreren Farben */
.gradient-box {
  background: linear-gradient(to right, red, orange, yellow, green);
}

Häufige Richtungen sind to bottom, to right, to left und to top.

Probier es selbst

<!DOCTYPE html>
<html>
<head>
  <style>
    .sunset-gradient {
      border: 3px solid black;
      height: 300px;
      width: 100%;
       /* Write your CSS rule here */
       
       
    }
  </style>
</head>
<body>
  <div class="sunset-gradient"></div>
</body>
</html>

Teste dich selbst

Diese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.