The CSS Podcast – 021: Gradients
Angenommen, Sie möchten eine Website erstellen. Ganz oben ist ein Intro mit einer Überschrift, einer Zusammenfassung und einer Schaltfläche zu sehen. Die Designerin hat ein Design mit lila Hintergrund für diese Einführung übergeben. Das einzige Problem ist, dass der Hintergrund zwei Violettschattierungen als Farbverlauf aufweist. Wie gehen Sie vor?
Sie könnten anfangs denken, dass Sie dazu ein Bild aus Ihrem Designtool exportieren müssen. Sie können aber stattdessen ein linear-gradient verwenden.
Ein Farbverlauf ist ein Bild und kann überall verwendet werden, wo Bilder verwendet werden können. Er wird jedoch mit CSS erstellt und besteht aus Farben, Zahlen und Winkeln. Mit CSS-Farbverläufen können Sie alles erstellen, von einem weichen Farbverlauf zwischen zwei Farben bis hin zu beeindruckenden Grafiken, indem mehrere Farbverläufe kombiniert und wiederholt werden.
Linearer Farbverlauf
Die Funktion linear-gradient() generiert nach und nach ein Bild in zwei oder mehr Farben.
Es sind mehrere Argumente erforderlich, aber in der einfachsten Konfiguration können Sie einige Farben wie diese übergeben. Sie werden dann automatisch gleichmäßig aufgeteilt, während sie zusammengeführt 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 möchten, geben Sie nach dem Keyword to eine Richtung an.
Wenn Sie also einen schwarz-weißen Farbverlauf verwenden möchten, der von links (Schwarz) nach rechts (Weiß) verläuft, geben Sie den Winkel als to right als erstes Argument an.
.my-element {
background: linear-gradient(to right, black, white);
}
Ein Farbstoppwert, der definiert ist, wo eine Farbe anhält und sich mit ihren Nachbarn vermischt. Für einen Farbverlauf, der mit einem dunklen Rotton in einem 45-Grad-Winkel beginnt und 30% der Größe des Farbverlaufs in ein helleres Rot übergehen, sieht er so aus:
.my-element {
background: linear-gradient(45deg, darkred 30%, crimson);
}
Sie können in einem linear-gradient() beliebig viele Farben und Farbstopps hinzufügen und Farbverläufe durch Kommas voneinander trennen.
Radialer Farbverlauf
Um einen kreisförmigen Farbverlauf zu erstellen, kommt die Funktion radial-gradient() ins Spiel.
Es ähnelt linear-gradient(), allerdings können Sie anstelle eines Winkels optional eine Positions- und Endform angeben.
Wenn Sie nur Farben angeben, wählt radial-gradient() die Position automatisch als center aus und wählt je nach Größe des Felds entweder einen Kreis oder eine Ellipse aus.
.my-element {
background: radial-gradient(white, black);
}
Die Position des Farbverlaufs ähnelt background-position unter Verwendung von Keywords und/oder Zahlenwerten.
Die Größe des radialen Farbverlaufs bestimmt die Größe der Endform des Farbverlaufs (Kreis oder Ellipse) und ist standardmäßig farthest-corner, was bedeutet, dass er genau mit der am weitesten von der Mitte entfernten Ecke des Farbverlaufs übereinstimmt.
Sie können auch die folgenden Keywords verwenden:
closest-cornertrifft auf die Ecke, die der Mitte des Farbverlaufs am nächsten ist.closest-sidebefindet sich auf der Seite der Box, die der Mitte des Farbverlaufs am nächsten ist.farthest-sidemacht das Gegenteil vonclosest-side.
Wie bei linear-gradient können Sie beliebig viele Farbstopps hinzufügen.
Sie können ebenfalls beliebig viele radial-gradients hinzufügen.
Kegelförmiger Farbverlauf
Ein kegelförmiger Farbverlauf hat einen Mittelpunkt in der Box, beginnt oben (standardmäßig) und bewegt sich in einem 360-Grad-Kreis.
.my-element {
background: conic-gradient(white, black);
}
Die Funktion conic-gradient() akzeptiert Positions- und Winkelargumente.
Standardmäßig beträgt der Winkel 0 Grad und beginnt oben in der Mitte.
Wenn Sie den Winkel auf 45deg einstellen würden, wäre dies die obere rechte Ecke.
Das angle-Argument akzeptiert jeden Typ von Winkelwerten, z. B. lineare und radiale Farbverläufe.
Die Position ist standardmäßig zentriert. Wie bei radialen und linearen Farbverläufen kann die Positionierung auf Schlüsselwörtern basieren oder mit numerischen Werten definiert werden.
Wie bei anderen Farbverlaufstypen 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
Für jeden Farbverlaufstyp gibt es auch einen sich wiederholenden Typ.
Dies sind repeating-linear-gradient(), repeating-radial-gradient() und repeating-conic-gradient().
Sie ähneln den nicht sich wiederholenden Funktionen und verwenden dieselben Argumente.
Der Unterschied besteht darin, dass der definierte Farbverlauf basierend auf beiden Größen wiederholt werden kann, um das Feld zu füllen.
Wenn sich der Farbverlauf nicht wiederholt, haben Sie wahrscheinlich keine Länge für einen der Farbstopps festgelegt.
Sie können beispielsweise einen gestreiften Hintergrund mit einem repeating-linear-gradient erstellen, indem Sie die Länge der Farbstopps festlegen.
.my-element {
background: repeating-linear-gradient(
45deg,
red,
red 30px,
white 30px,
white 60px
);
}
Sie können Farbverlaufsfunktionen auch mit background-Attributen mischen 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 mischen.
Ressourcen
- Conic.css – eine nützliche Sammlung kegelförmiger Farbverläufe
- MDN-Leitfaden zu Farbverläufen
- Farbverlaufsgenerator
Überprüfen Sie Ihr Wissen
Testen Sie Ihr Wissen über Farbverläufe
Wie viele Farben sind mindestens erforderlich, um einen Farbverlauf zu erstellen?
Elemente können mehrere Farbverläufe als Hintergrund haben?
background-image lässt viele Farbverläufe zu. Trennen Sie sie einfach durch ein Komma.