27 Stilvolle Beispiele für CSS-Hintergrundverläufe

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 (einer Farbverlaufsdatei). Die Hintergrundbild Die CSS-Eigenschaft wird verwendet, um Farbverläufe als Hintergrund zu deklarieren.

Der Schmerz selbst ist viel Schmerz, der wichtigste Adipose

Es gibt drei Arten von Gradienten: linear (erstellt mit dem linear-gradient() Funktion), radial (hergestellt mit radial-gradient() Funktion) und konisch (erstellt mit dem konischer Gradient() Funktion). Außerdem können Sie sich wiederholende Farbverläufe mit dem sich wiederholender-linearer-Gradient () , sich wiederholender-radial-gradient() , und sich wiederholender-konischer-Gradient() Funktionen.

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. Sein Ergebnis ist ein Objekt der Datentyp, der eine besondere Art von . ist .

radial-gradient() : Die radial-gradient() Die CSS-Funktion 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 der Datentyp, der eine besondere Art von . ist .

konischer Gradient() : Die konischer Gradient() Die CSS-Funktion erstellt ein Bild, das aus einem Verlauf 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 konischer Gradient() Funktion ist ein Objekt der Datentyp, der eine besondere Art von . ist .

sich wiederholender-linearer-Gradient () : Die sich wiederholender-linearer-Gradient () Die CSS-Funktion 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 der Datentyp, der eine besondere Art von . ist .

sich wiederholender-radial-gradient() : Die sich wiederholender-radial-gradient() Die CSS-Funktion 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 der Datentyp, der eine besondere Art von . ist .

sich wiederholender-konischer-Gradient() : Die sich wiederholender-konischer-Gradient() Die CSS-Funktion 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(  
 [ | to ]? ,  
  
)  
 = [to left | to right] || [to top | to bottom]

Offizielle Syntax von Radialverläufen

radial-gradient(  
 [ || ]? [ at ]? ,  
  
);

Offizielle Syntax von konischen Gradienten

conic-gradient(  
 [ from ]? [ at ]?,  
  
)

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