Farbverläufe

The CSS Podcast – 021: Gradients

Stellen Sie sich vor, Sie müssen eine Website erstellen und oben auf der Seite befindet sich eine Einführung mit einer Überschrift, einer Zusammenfassung und einer Schaltfläche. Der Designer hat ein Design mit einem lilafarbenen Hintergrund für diese Einführung übergeben. Das einzige Problem ist, dass der Hintergrund zwei Lilatöne als Farbverlauf aufweist. Wie gehen Sie vor?

Ein dunkler bis hellvioletter Farbverlauf mit Überschrift, Absatz und Link.

Sie könnten annehmen, dass Sie dazu ein Bild aus Ihrem Designtool exportieren müssen. Sie können stattdessen aber auch eine linear-gradient verwenden.

Ein Farbverlauf ist ein Bild und kann überall dort verwendet werden, wo Bilder verwendet werden können. Er wird jedoch mit CSS erstellt und besteht aus Farben, Zahlen und Winkeln. Mit CSS-Verläufen können Sie alles erstellen, von einem weichen Farbverlauf zwischen zwei Farben bis hin zu beeindruckenden Grafiken, indem Sie mehrere Verläufe mischen und wiederholen.

Linearer Farbverlauf

Die Funktion linear-gradient() generiert schrittweise ein Bild mit zwei oder mehr Farben. Es nimmt mehrere Argumente entgegen, aber in der einfachsten Konfiguration können Sie einige Farben so übergeben, dass sie automatisch gleichmäßig aufgeteilt und gemischt werden.

.my-element {
    background: linear-gradient(black, white);
}

Sie können auch einen Winkel oder Keywords übergeben, die einen Winkel darstellen. Wenn Sie Keywords verwenden, geben Sie nach dem to-Keyword eine Richtung an. Wenn Sie also einen Schwarz-Weiß-Farbverlauf von links (Schwarz) nach rechts (Weiß) haben möchten, geben Sie als erstes Argument den Winkel to right an.

.my-element {
    background: linear-gradient(to right, black, white);
}

Ein Farbstoppwert, der definiert, wo eine Farbe endet und mit den benachbarten Farben vermischt wird. Ein Farbverlauf, der mit einem dunklen Rotton beginnt, in einem Winkel von 45 Grad verläuft und bei 30% der Größe des Farbverlaufs in ein helleres Rot übergeht, sieht so aus:

.my-element {
    background: linear-gradient(45deg, darkred 30%, crimson);
}

Sie können einer linear-gradient() beliebig viele Farben und Farbstopps hinzufügen. Außerdem können Sie Farbverläufe übereinander legen, indem Sie die einzelnen Verläufe durch Kommas trennen.

Radialer Farbverlauf

Mit der Funktion radial-gradient() können Sie einen kreisförmigen Farbverlauf erstellen. Es ähnelt linear-gradient(), aber anstelle eines Winkels können Sie optional eine Position und eine Endform angeben. Wenn Sie nur Farben angeben, wird die Position automatisch als center und je nach Größe des Felds ein Kreis oder Ellipse ausgewählt.radial-gradient()

.my-element {
    background: radial-gradient(white, black);
}

Die Position des Farbverlaufs ähnelt der von background-position mithilfe von Keywords und/oder Zahlenwerten. Die Größe des radialen Farbverlaufs bestimmt die Größe der Endform des Farbverlaufs (Kreis oder Ellipse). Standardmäßig ist das farthest-corner, was bedeutet, dass die Endform genau die am weitesten vom Mittelpunkt entfernte Ecke des Felds erreicht. Sie können auch die folgenden Keywords verwenden:

  • closest-corner trifft auf die Ecke, die dem Zentrum des Farbverlaufs am nächsten ist.
  • closest-side trifft auf die Seite des Felds, die dem Zentrum des Farbverlaufs am nächsten ist.
  • farthest-side bewirkt das Gegenteil von closest-side.

Sie können beliebig viele Farbstopps hinzufügen, genau wie bei der linear-gradient. Ebenso können Sie beliebig viele radial-gradients hinzufügen.

Konischer Farbverlauf

Ein konischer Farbverlauf hat einen Mittelpunkt im Feld und beginnt standardmäßig oben und verläuft in einem 360-Grad-Kreis.

.my-element {
    background: conic-gradient(white, black);
}

Die Funktion conic-gradient() akzeptiert Argumente für Position und Winkel.

Standardmäßig ist der Winkel 0 Grad, was bedeutet, dass die Kamera oben in der Mitte ausgerichtet ist. Wenn Sie den Winkel auf 45deg festlegen, wird die rechte obere Ecke verwendet. Das Argument „angle“ akzeptiert jeden beliebigen Winkelwert, z. B. für lineare und radiale Farbverläufe.

Die Position ist standardmäßig „Mitte“. Wie bei radialen und linearen Farbverläufen kann die Positionierung auf Keywords basieren oder mit numerischen Werten definiert werden.

Wie bei anderen Farbverläufen können Sie beliebig viele Farbstopps hinzufügen. Ein guter Anwendungsfall für diese Funktion mit konischen Farbverläufen ist das Rendern von Kreisdiagrammen mit CSS.

Wiederholen und Mischen

Jeder Farbverlauf hat auch einen sich wiederholenden Typ. Das sind repeating-linear-gradient(), repeating-radial-gradient() und repeating-conic-gradient(). Sie ähneln den nicht wiederholbaren Funktionen und nehmen dieselben Argumente an. Der Unterschied besteht darin, dass der definierte Farbverlauf wiederholt wird, um das Feld basierend auf beiden Größen zu füllen.

Wenn sich der Farbverlauf nicht wiederholt, haben Sie wahrscheinlich für einen der Farbstopps keine Länge festgelegt. So können Sie beispielsweise mit einem repeating-linear-gradient einen gestreiften Hintergrund erstellen, indem Sie die Längen der Farbstopps festlegen.

.my-element {
  background: repeating-linear-gradient(
    45deg,
    red,
    red 30px,
    white 30px,
    white 60px
  );
}

Sie können auch Farbverlaufsfunktionen für background-Properties kombinieren und beliebig viele Farbverläufe definieren, genau wie bei einem Hintergrundbild. Sie können beispielsweise mehrere lineare Farbverläufe oder zwei lineare Farbverläufe mit einem radialen Farbverlauf kombinieren.

Ressourcen

Wissen testen

Ihr Wissen über Farbverläufe testen

Wie viele Farben sind mindestens erforderlich, um einen Farbverlauf zu erstellen?

1
Versuch es noch einmal.
2
Sie können dieselbe Farbe haben und einfarbig erscheinen, aber ja, es sind mindestens zwei Farben erforderlich.
3
Versuch es noch einmal.
4
Versuch es noch einmal.

Können Elemente mehrere Farbverläufe als Hintergrund haben?

Richtig
Für die Property background-image sind mehrere Farbverläufe zulässig. Trennen Sie sie einfach durch ein Komma.
Falsch
Oh, das ist aber möglich.