Der CSS-Podcast – 021: Gradienten
Stellen Sie sich vor, Sie haben eine Website, gibt es eine Einleitung mit Überschrift, Zusammenfassung und einer Schaltfläche. Die Designfachkraft hat für diese Einführung ein Design mit violettem Hintergrund übergeben. Das einzige Problem ist, dass der Farbverlauf zwei Lila Schattierungen aufweist. Wie gehen Sie vor?
Vielleicht denken Sie anfangs, dafür ein Bild aus Ihrem Designtool zu exportieren,
Sie können aber ein
linear-gradient
.
Ein Farbverlauf ist ein Bild und kann überall verwendet werden, aber mit CSS erstellt und aus Farben, Zahlen und Winkeln besteht. Mit CSS-Verläufen können Sie alles Mögliche erstellen: von einem gleichmäßigen Farbverlauf zwischen zwei Farben durch das Kombinieren und Wiederholen mehrerer Farbverläufe zu beeindruckenden Kunstwerken.
Linearer Farbverlauf
Unterstützte Browser
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
Die linear-gradient()
erzeugt schrittweise ein Bild mit zwei oder mehr Farben.
In der einfachsten Konfiguration
können Sie einige Farben wie diese übergeben, die dann automatisch gleichmäßig verteilt 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 to
-Keyword eine Richtung an.
Wenn Sie also einen schwarz-weißen Farbverlauf
die von links (schwarz) nach rechts (weiß) verläuft,
würden Sie den Winkel als erstes Argument als to right
angeben.
.my-element {
background: linear-gradient(to right, black, white);
}
Ein Farbstoppwert, der definiert wird, wo eine Farbe anhält und mit ihren Nachbarn vermischt wird. Für einen Farbverlauf, der mit einem dunklen Rotton in einem 45°-Winkel beginnt, 30% der Größe des Farbverlaufs ändert sich in ein helleres Rot: Das sieht 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 Sie können Farbverläufe übereinander legen, indem Sie die einzelnen Farbverläufe durch Kommas trennen.
Radialer Farbverlauf
Unterstützte Browser
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
Für einen Farbverlauf, der kreisförmig ausstrahlt,
radial-gradient()
um Hilfe zu erhalten.
Ähnlich wie linear-gradient()
,
Anstelle eines Winkels können Sie optional eine Position und eine Endform angeben.
Wenn du nur Farben angibst, wählt radial-gradient()
die Position automatisch als center
aus
und wählen Sie 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 der Verwendung von background-position
unter Verwendung von Suchbegriffen 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
,
Das heißt, sie trifft genau auf die von der Mitte entfernte Ecke des Rechtecks.
Sie können auch die folgenden Keywords verwenden:
closest-corner
trifft auf die Ecke, die der Mitte des Farbverlaufs am nächsten ist.closest-side
trifft auf die Seite des Rechtecks, die der Mitte des Farbverlaufs am nächsten liegt.farthest-side
führt das Gegenteil zuclosest-side
aus.
Wie bei linear-gradient
können Sie beliebig viele Farbstopps hinzufügen.
Ebenso können Sie beliebig viele radial-gradients
hinzufügen.
Kegelförmiger Farbverlauf
Unterstützte Browser
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
Ein kegelförmiger Farbverlauf hat einen Mittelpunkt in Ihrem Rechteck und beginnt standardmäßig oben von oben. und dreht sich in einem 360-Grad-Kreis.
.my-element {
background: conic-gradient(white, black);
}
Die conic-gradient()
akzeptiert Positions- und Winkelargumente.
Standardmäßig beträgt der Winkel 0 Grad, d. h., er beginnt oben in der Mitte.
Wenn Sie den Winkel auf 45deg
setzen, ist das die obere rechte Ecke.
Für das Argument „angle“ kann jeder Winkelwert angegeben werden, z. B. lineare und radiale Farbverläufe.
Standardmäßig ist die Position zentriert. Wie bei radialen und linearen Farbverläufen kann die Positionierung auf Keywords basieren, oder mit numerischen Werten definiert werden.
Wie bei anderen Arten von Farbverlauf 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
Jede Art von Farbverlauf hat auch eine sich wiederholende Art.
Dies sind
repeating-linear-gradient()
,
repeating-radial-gradient()
und
repeating-conic-gradient()
Sie ähneln den nicht wiederkehrenden Funktionen und nehmen dieselben Argumente an.
Der Unterschied besteht darin, dass, wenn der Farbverlauf wiederholt werden kann, um das Rechteck zu füllen,
unabhängig von ihrer Größe.
Wenn sich der Farbverlauf nicht wiederholt,
haben Sie für einen der Farbstopps wahrscheinlich keine Länge festgelegt.
Beispiel:
können Sie einen gestreiften Hintergrund mit 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 auch Farbverlaufsfunktionen
für background
-Eigenschaften mischen,
und beliebig viele Farbverläufe festlegen,
genau wie bei einem Hintergrundbild.
Sie können beispielsweise mehrere lineare Farbverläufe miteinander oder zwei lineare Farbverläufe mit einem radialen Farbverlauf kombinieren.
Ressourcen
- Conic.css – eine nützliche Sammlung von konischen Farbverläufen
- MDN-Leitfaden zu Farbverläufen
- Gradientengenerator
Wissen testen
Testen Sie Ihr Wissen über Farbverläufe
Wie viele Farben ist mindestens erforderlich, um einen Farbverlauf zu erstellen?
Können Elemente mehrere Farbverläufe als Hintergrund haben?