27 Stilvolle Beispiele für CSS-Hintergrundverläufe

Juni 29, 2021 Eskere Guru

Für einen Designer oder Entwickler ist es sehr wichtig, über die wichtigsten Webdesign-Trends und -Standards auf dem Laufenden zu bleiben. Derzeit werden Hintergrundverläufe in modernen Websites häufig verwendet.

In diesem Artikel führen wir Sie mithilfe von CSS durch verschiedene Beispiele für Hintergrundverläufe.

Hintergrundverläufe mit CSS

Der CSS-Farbverlauf zeigt einen glatten Übergang mit zwei oder mehr angegebenen Farben an. CSS-Farbverlauf bietet eine bessere Kontrolle und Leistung gegenüber der Verwendung einer tatsächlichen Bilddatei (eines Farbverlaufs). Die CSS-Eigenschaft background-image wird verwendet, um Farbverläufe als Hintergrund zu deklarieren.

Es gibt drei Arten von Farbverläufen: linear (erstellt mit der Funktion linear-gradient() ), radial (erstellt mit der Funktion radial-gradient() ) und konisch (erstellt mit der Funktion conic-gradient() ). Außerdem können Sie sich wiederholende Farbverläufe mit den Funktionen repeating-linear-gradient() , repeating-radial-gradient() und repeating-conic-gradient() erstellen.

MDN Docs definiert diese Funktionen als:

linear-gradient() : Die CSS-Funktion linear-gradient() erstellt ein Bild, das aus einem progressiven Übergang zwischen zwei oder mehr Farben entlang einer geraden Linie besteht. Das Ergebnis ist ein Objekt vom Datentyp <gradient> , das eine besondere Art von <image> ist .

radial-gradient() : Die CSS-Funktion radial-gradient() erstellt ein Bild, das aus einem progressiven Übergang zwischen zwei oder mehr Farben besteht, die von einem Ursprung ausstrahlen. Seine Form kann ein Kreis oder eine Ellipse sein. Das Ergebnis der Funktion ist ein Objekt vom Datentyp <gradient> , der eine spezielle Art von <image> ist .

conic-gradient() : Die CSS-Funktion conic-gradient() erstellt ein Bild, das aus einem Farbverlauf mit Farbübergängen besteht, die um einen Mittelpunkt gedreht sind (anstatt von der Mitte aus zu strahlen). Konische Farbverläufe sind beispielsweise Kreisdiagramme und Farbräder. Das Ergebnis der Funktion conic-gradient() ist ein Objekt vom Datentyp <gradient> , der eine spezielle Art von <image> ist .

repeating-linear-gradient() : Die CSS-Funktion repeating-linear-gradient() erstellt ein Bild, das aus sich wiederholenden linearen Farbverläufen besteht. Es ähnelt gradient/linear-gradient() und verwendet die gleichen Argumente, aber es wiederholt die Farbstopps unendlich in alle Richtungen, um den gesamten Container abzudecken. Das Ergebnis der Funktion ist ein Objekt vom Datentyp <gradient> , der eine spezielle Art von <image> ist .

repeating-radial-gradient() : Die CSS-Funktion repeating-radial-gradient() erstellt ein Bild, das aus sich wiederholenden Farbverläufen besteht, die von einem Ursprung ausstrahlen. Es ähnelt gradient/radial-gradient() und verwendet die gleichen Argumente, aber es wiederholt die Farbstopps unendlich in alle Richtungen, um den gesamten Container abzudecken, ähnlich wie gradient/repeating-linear-gradient(). Das Ergebnis der Funktion ist ein Objekt vom Datentyp <gradient> , der eine spezielle Art von <image> ist .

repeating-conic-gradient() : Die CSS-Funktion repeating-conic-gradient() erstellt ein Bild, das aus einem sich wiederholenden Farbverlauf (anstelle eines einzelnen Farbverlaufs) mit um einen Mittelpunkt gedrehten Farbübergängen besteht (anstatt von der Mitte aus zu strahlen).

Hier ist die offizielle Syntax für jeden Farbverlaufstyp.

Offizielle Syntax von linearen Gradienten

 linear-gradient(
 [ <angle> | to <side-or-corner> ]? ,
 <color-stop-list>
 )
 <side-or-corner> = [to left | to right] || [to top | to bottom]

Offizielle Syntax von Radialverläufen

 radial-gradient(
 [ <ending-shape> || <size> ]? [ at <position> ]? ,
 <color-stop-list>
 );

Offizielle Syntax von konischen Gradienten

 conic-gradient(
 [ from <angle> ]? [ at <position> ]?,
 <angular-color-stop-list>
 )

Hier sind einige großartige Beispiele für Hintergrundverläufe, die die Benutzeroberfläche Ihrer Website auf die nächste Stufe heben können.