Farbverläufe

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?

Hintergrund mit einem Farbverlauf von dunkel bis helllila mit Überschrift, Absatz und Link.

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

  • Chrome: 26. <ph type="x-smartling-placeholder">
  • Rand: 12. <ph type="x-smartling-placeholder">
  • Firefox: 16. <ph type="x-smartling-placeholder">
  • Safari: 7. <ph type="x-smartling-placeholder">

Quelle

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

  • Chrome: 26. <ph type="x-smartling-placeholder">
  • Rand: 12. <ph type="x-smartling-placeholder">
  • Firefox: 16. <ph type="x-smartling-placeholder">
  • Safari: 7. <ph type="x-smartling-placeholder">

Quelle

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 zu closest-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

  • Chrome: 69. <ph type="x-smartling-placeholder">
  • Edge: 79. <ph type="x-smartling-placeholder">
  • Firefox: 83 <ph type="x-smartling-placeholder">
  • Safari: 12.1 <ph type="x-smartling-placeholder">

Quelle

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

Wissen testen

Testen Sie Ihr Wissen über Farbverläufe

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

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

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

Richtig
Mit der Eigenschaft background-image sind viele Farbverläufe möglich. Trennen Sie sie einfach durch ein Komma.
Falsch
Oh, aber das ist möglich!