Ein Gradient bezieht sich auf ein Bild mit Übergangseffekten, und ein Gradient kann überall wie Bilder verwendet werden. Die Gradienten werden mit Hilfe von CSS erstellt und bietet Gradienten mit umfangreichen Eigenschaften her. Zum Beispiel könnte ein Gradient entweder linear, radial oder konisch sein. Jeder Gradiententyp wird durch die jeweilige Funktion unterstützt.

In diesem Artikel haben wir einen Einblick in die Gradienten in CSS gegeben und die folgenden Lernergebnisse werden erwartet.

• Arten von Gradienten in CSS
• linear-Gradient () -Funktion
• radial-Gradient () -Funktion
• conicgradient () Funktion

Arten des Gradienten in CSS

Der Gradient kann in drei Kategorien unterteilt werden, linear, radial und conic. Die kommenden Abschnitte präsentieren die Grundlagen jeder Art von Gradienten und wie sie in CSS verwendet werden.

Linearer Gradient

Der lineare Gradient kann angewendet werden, um den Übergangseffekt in einer linearen Abmessung (gleichzeitig eine Richtung) zu erhalten.

So verwenden Sie Linear-Gradient () -Funktion

Mit der Funktion Linear-Gradient () können Sie einen linearen Gradienten mit verschiedenen Effekten erstellen.

Der Richtung des linearen Gradienten kann die folgenden Werte akzeptieren

nach rechts: Wird verwendet, um den Gradienten von links nach rechts zu zeigen

nach links: Um den Gradienten von rechts nach links zu zeigen

bis unten (standardmäßig): nach unten

nach oben: zeigt den Gradienteneffekt von unten nach oben

Darüber hinaus kann der lineare Gradienteneffekt auch diagonal angewendet werden, indem die folgenden Werte der verwendet werden Richtung Parameter.

Nach unten rechts: Der Gradient beginnt von oben nach links und neigt sich nach unten nach rechts

Nach links nach unten: Der Verlauf startet von der oberen rechten Ecke nach unten links

Zur Ganze rechts: beginnt von der unteren linken Ecke nach oben rechts

bis oben links: Von unten nach rechts nach oben links

Beispiel

Der folgende Code übt die Verwendung von Lineargradient auf einem HTML-Element aus.

Html

Linearer Gradient

Der obige Code erstellt a und a

Element in diesem Div.

CSS

Der obige Code verwendet einen linearen Gradienten mit den folgenden Werten

• Die Richtung ist auf “eingestellt“links nach rechts“
• Der Wert von Color1 und Color2 ist auf lila eingestellt und LOLLESSEAGREEN bzw

Ausgang

Als die Richtung des Gradienten von links nach rechts war die lila Die Farbe beginnt von links, während die LOLLESSAGREENCOLOR beginnt von rechts.

Radialer Gradient

Wie der Name zeigt, wird der radiale Gradient aus dem Mittelpunkt des Bildes erzeugt. Der Übergangseffekt kann in der Form eines Kreises oder einer Sonnenfinsternis erzeugt werden.

So verwenden Sie die Funktion radial-Gradient () -Funktion

Ein radialer Gradient kann erstellt werden, indem die unten angegebene Syntax folgt.

Hintergrundbild: Radialgradient (Formgröße an Position, Color1, Color2…);

In der obigen Syntax,

• Die Form (Die Standardeinstellung ist eine Ellipse) könnte entweder eine Ellipse oder einen Kreis sein
• Die Größe (Die Standardeinstellung ist am weitesten mit der Ereignis.
• Die Gradient wird von color1 (in der Mitte entweder in einer Sonnenfinsternisform oder in der Kreisform) gefolgt von color2 usw.

Beispiel

Der unten geschriebene Code zeigt die Erstellung des radialen Gradienten.

Html

Radialer Gradient

CSS

Das obige CSS erzeugt einen radialen Gradiennt mit color1 = "grün", color2 = "gelb" und color3 = "rot".

Ausgang

Aus dem Ausgang wird beobachtet, dass der Gradient mit grüner Farbe begonnen hat, umgeben von Gelb, und das Rot ist am Ende.

Kegelverlauf

Der konische Gradient wird verwendet, um einen Gradienten so zu erzeugen, dass jede Farbe von der Mitte beginnt und um die Mitte gedreht wird. Sie sind gleicher radialer Gradienten, aber die Farben werden am Rande der Form gestoppt, während die Farbe in Radialgradient stoppt

Wie man Conic -Gradient benutzt

Der Conic-Gradient kann erstellt werden, indem die unten angegebene Syntax folgt: