Lineare Gradienten in CSS erklärten
Ein Effekt, der einen reibungslosen Übergang von einer Farbe zur anderen erzeugt. CSS hilft bei der Erstellung verschiedener Arten von Gradienten wie linear, radial und conic. Die linearen Gradienten zeigen Übergangseffekte in eine Richtung, während Radial und Conic nichtlineare transzonale Effekte haben. Dieser Artikel enthält eine beschreibende Anleitung zu linearen Gradienten mit den folgenden Lernergebnissen:
- So erstellen Sie lineare Gradienten in CSS
- Verwendung der Linear-Gradient () -Funktion in CSS
So erstellen Sie lineare Gradienten in CSS
Die linearen Gradienten können erstellt werden, indem die unten angegebene Syntax verwendet wird.
Hintergrundbild: Linear-Gradient (Richtung, Color1Aus der Syntax wird beobachtet.
Der Richtungsparameter definiert den Ausgangspunkt und akzeptiert die folgenden Werte:
- "Bis oben" oder "0deg": beginnt von unten nach oben
- "Zu Recht" oder "90 Grad": Gradient beginnt von links nach rechts
- "Nach unten" oder "180 Grad": von oben nach unten
- "Links" oder "270 Grad": beginnt von der rechten Seite zur linken Seite
Die oben genannten Parameter haben gleichwertig mit den Winkeln. Sie können den Start des Gradienten auch mit Hilfe von Winkeln definieren. Die Äquivalenz von Winkeln und Seiten wird als "bis oben" = "0deg", "bis rechts" = "90DEG", "bis unten" = "180DEG" und "to links" = "=" = "270DEG" beschrieben.
Beispiel 1: Linearer Gradient mit Standardparametern
Um den Lineargradienten auf grundlegender Ebene zu üben, haben wir den folgenden Code verwendet.
Html
Linearer Gradient
CSS
Im obigen Code wird der Richtungsparameter der Lineargradientenfunktion auf den Standardwert festgelegt. Wo der Gradient von der grünen Farbe beginnen würde und in Richtung der roten Farbe wechselt.
Ausgang
Aus der Ausgabe wird beobachtet, dass die Standardrichtung der Funktion linearer Gradient von oben nach unten liegt.
Beispiel 2: Ein angepasster linearer Gradient
Dieses Beispiel zeigt die Erstellung eines Gradienten mit benutzerdefinierten Richtungswerten und Farbwinkeln.
Html
Linearer Gradient
CSS
Der obige CSS -Code wird als beschrieben als,
- nach rechts: zeigt die Richtung des Gradienten von links nach rechts
- Grün 10%: zeigt, dass der Übergangseffekt von 10% der gesamten Länge des Gradienten beginnt
- rot 50%: Dies zeigt, dass der Übergangseffekt bis zu 50% der Länge des Gradienten steigt
Ausgang
Der Ausgang zeigt, dass das feste Grün bis zur 10% Länge fortgesetzt wird. Der Übergang beginnt von 10% und dauert bis zu 50% der Länge. Nach 50% beginnt die feste rote Farbe, die mit der Länge des Gradienten endet.
Beispiel 3: Ein sich wiederholter linearer Gradient
Die Funktion wiederholungslinear-Gradient () kann verwendet werden, um einen sich wiederholenden Gradienten zu erstellen.
Html
Ein sich wiederholender linearer Gradient
CSS
Der obige CSS -Code wird als beschrieben als,
- Die Richtung würde von links nach rechts sein, da der Winkel 90 ad beträgt
- Der Gradient würde von rotem Grünen und hellem Meergrün beginnen. Diese Farben werden wiederholt, bis die Länge des Gradienten endet
Notiz: Sie müssen den Prozentsatz mit mindestens der letzten Farbe definieren. Andernfalls wird das Muster nicht wiederholt.
Ausgang
Die obige Ausgabe zeigt, dass der Gradient mit roten, grün und loßerfrünen Farben mehrmals bis zur gesamten Länge des Gradienten wiederholt wird.
Abschluss
Ein linearer Gradient in CSS kann durch Verwendung der linearen Gradienten () -Funktion von CSS erstellt werden. Diese Funktion akzeptiert mehrere Parameter, die die Richtung des Gradienten und die verwendete Farbe definieren. Dieser Artikel enthält eine beschreibende Anleitung zu linearen Gradienten in CSS. Wenn Sie diesem Beitrag folgen, können Sie das grundlegende Konzept der linearen Gradienten in CSS mit Beispielen erhalten, die die Erstellung linearer Gradienten in CSS demonstrieren,. Darüber hinaus kann eine Wiederholung linear Gradient () -Funktion ausgeübt werden, um einen sich wiederholenden Gradienten zu erzeugen.