Ein CSS -Stylesheet beschreibt, wie Webseiten präsentiert werden, einschließlich ihrer Farben, Layouts und Schriftarten. Es gibt viele Eigenschaften, mit denen attraktive Webseiten wie Farbe, Hintergrund, Hintergrundbild, Gradient und viele andere erstellt werden können. Insbesondere werden Gradienten verwendet, um dem Hintergrund mehrere Farben hinzuzufügen.

In diesem Artikel werden wir CSS -Gradienten diskutieren. So lass uns anfangen!

Was sind CSS -Gradienten??

In CSS, die “GradientMit ”ermöglicht es Ihnen, den Übergang zwischen verschiedenen Farben sanft anzeigen. Sie können auch verschiedene Farben gleichzeitig anzeigen, um das Aussehen der HTML -Elemente zu verbessern. Es gibt drei Arten von Gradienten, die sind:

• Linearer Gradient
• Radialer Gradient
• Kegelverlauf

Jetzt werden wir jeden der genannten Gradientenstypen eins nacheinander untersuchen! Zu diesem Zweck erstellen wir zuerst eine DIV in der HTML und dann eine “anwenden“Gradient”Dazu.

Beispiel

In HTML erstellen wir mit dem Klassennamen einen Container oder ein DIV. “divUnd im Inneren "”Tag, fügen Sie eine Überschrift hinzu

.

Html

Gradient

Jetzt werden wir zur CSS -Datei übergehen und verwenden “div"Um auf den erstellten Container in HTML zuzugreifen und die Höhe des DIV als" festlegen "setzen200px”. Setzen Sie danach die Farbe der Überschrift als “RGB (1, 32, 4)"Und die Schriftgröße als"35px”. Fügen Sie als nächstes die Grenze um die Div, Breite als "hinzu"5px", Stil als"Grat", Und Farbe als"RGB (0, 0, 0)”.

CSS

div
Höhe: 200px;
Farbe: RGB (1, 32, 4);
Schriftgröße: 35px;
Grenze: 5px Ridge RGB (0, 0, 0);

Mit dem obigen Code wird die folgende Ausgabe erhalten:

Jetzt werden wir die Arten des Gradienten im Div anwenden.

Was sind CSS lineare Gradienten??

Um einen linearen Gradienten zu erzeugen, das “linear-Gradient ()Die Funktion des CSS wird als Wert der “verwendetHintergrundbild" oder "Hintergrund" Eigentum. Mit dieser Funktion kann ein Bild erstellt werden. Es gibt verschiedene Arten von linearen Gradienten, wie z. B. wiederholende lineare Gradienten, Gradienten von links nach rechts und Verlauf von rechts nach links.

Syntax

Die Syntax der “linear-Gradient ()”Funktion ist:

Hintergrund-Image: Linear-Gradient (Richtung, Color-1, Color-2,…);

Hier das "RichtungDer Parameter wird verwendet, um die Richtung des linearen Gradienten einzustellen, aus dem der Übergang startet, z. B. oben, rechts, links und unten. Sie können dieser Funktion mehrere Farben hinzufügen.

Als Fortsetzung des vorherigen Beispiels werden wir ein einfaches anwenden “linear-Gradient ()”Funktion zum Div.

Beispiel

Hier werden wir das verwenden “linear-Gradient ()Funktion in der “HintergrundbildEigenschaft und Hinzufügen von Anweisungen als "nach oben”; Dies ist die Standardrichtung der Funktion. Danach werden wir drei Farbe als "als" hinzufügen "RGB (0, 255, 213)","RGB (187, 255, 0)", Und "RGB (51, 255, 0)”Für unseren Gradienten:

div
…
Hintergrundbild: Linear-Gradient (bis oben, RGB (0, 255, 213), RGB (187, 255, 0), RGB (51, 255, 0));

Im folgenden Bild können Sie sehen, dass ein linearer Gradienten erzeugt wird:

Gehen Sie nun zum nächsten Typ, in dem wir die Richtung des linearen Gradienten als "ändern werden"nach rechts”.

Linearer Gradient nach rechts

Um einen linearen Gradienten nach rechts zu erzeugen, werden wir die Richtung von “ändern“nach oben" Zu " nach rechts"Und setzen Sie fünf verschiedene Farben als"RGB (32, 42, 134)","RGB (202, 231, 255)","RGB (0, 255, 170)","RGB (85, 250, 79)", Und "RGB (128, 243, 138)”:

div
…
Hintergrundbild: Lineargradient (rechts, RGB (32, 42, 134), RGB (202, 231, 255), RGB (0, 255, 170), RGB (85, 250, 79), RGB (128 243, 138));

In der folgenden Ausgabe sehen Sie, dass der lineare Gradient in die richtige Richtung erstellt wird:

Als nächstes werden wir die Richtung des linearen Gradienten auf “ändern“nach links”.

Linearer Gradient nach links

Hier werden wir die Richtung ändern “auf“nach links”. Die Farben werden wie im obigen Beispiel verwendet:

div
…
Hintergrundbild: Linear-Gradient (links, RGB (32, 42, 134), RGB (202, 231, 255), RGB (0, 255, 170), RGB (85, 250, 79), RGB (128) 243, 138));

Aus der folgenden Ausgabe können Sie sehen, dass der lineare Verlauf nach links perfekt erstellt wird:

Sie können auch einen sich wiederholenden Farbenübergang erstellen. Also, lass uns das machen!

Wiederholung linearer Gradienten

Um wiederholte lineare Gradienten zu erstellen, die “Wiederholungslinie-Gradienten () ()Die Funktion wird verwendet. In dieser Art von linearem Gradienten wird die Sequenz der Farbe gemäß dem angegebenen Wert wiederholt.

Syntax

Die Syntax der “Wiederholungslinie-Gradienten () ()" Ist:

Hintergrund-Image: Wiederholungslinear-Gradient (Farbfarblänge, Farbfarblänge,…);

In der obigen Syntax “,“Farbstopplänge”Wird verwendet, um den Abstand zwischen den ersten und der letzten Farbe zu setzen, die die Länge des Gradienten bestimmt, der sich wiederholt.

Lassen Sie uns mit dem vorherigen Beispiel fortfahren.

Beispiel

Hier setzen wir die Farbe des Textes als "Weiss"Und fügen Sie den Wert der Gradientenfarben in die" hinzu "Wiederholungslinie-Gradienten () ()”Funktionen. Neben jeder Farbe werden wir das angeben “Farbstopplänge" als "0px","20px", Und "40px”. Es wird verwendet, um die Farben nach der angegebenen Länge zu wiederholen:

div
…
Farbe weiß;
Hintergrundbild: Wiederholung linear Gradient (RGB (122, 12, 145) 0px, RGB (171, 76, 209) 20px, RGB (13, 0, 128) 40px);

Notiz: Ohne das "FarbstopplängeDer Wert, der lineare Gradient kann nicht zur Wiederholung festgelegt werden.

Im folgenden Bild können Sie sehen, dass der lineare Gradient wiederholt wird:

Was sind CSS -Radialgradienten??

Ein radialer Gradient ist ein Übergang von Farben, bei dem der Übergang vom Ursprung des Elements beginnt. Um einen radialen Gradienten zu erzeugen, das “radial-Gradient ()Die Funktion wird verwendet, in der Sie die Form des Übergangs und der Farben angeben können.

Syntax

Die Syntax der “radial-Gradient ()”Funktion ist:

Hintergrund-Image: Radialgradient (Form, Startfarbe,…, letzte Farbe);

Sie können die Form der "festlegen"radial-Gradient ()”Funktion als“Ellipse" oder "Kreis”.

Beispiel

Hier werden wir das vorherige Beispiel fortsetzen und das verwenden “radial-Gradient ()"Funktion zum Einstellen der Form des Übergangs als"Ellipse”. Als nächstes werden wir fünf verschiedene Farben als „hinzufügen“RGB (17, 0, 255)","RGB (0, 174, 255)","RGB (109, 250, 255)","RGB (0, 190, 79)", Und "RGB (2, 70, 2)”:

div
…
Hintergrundbild: Radialgradient (Ellipse, RGB (17, 0, 255), RGB (0, 174, 255), RGB (109, 250, 255), RGB (0, 190, 79), RGB (2, 70, 2));

Das folgende Bild zeigt an, dass der Farbübergang erfolgreich mit dem Ursprung des Elements begonnen hat:

Jetzt werden wir zum letzten Typ von Gradienten übergehen.

Was sind CSS -Conic -Gradienten??

Der "konikativer Gradient ()Die Funktion wird verwendet, um einen Kegelgradienten zu erstellen. Es ist ein Gradient, an dem die Farbenübergänge um einen Mittelpunkt umgedreht werden. Um einen Kegelverlauf zu schaffen, müssen mindestens zwei Farben definiert werden.

Syntax

Die Syntax der “konikativer Gradient ()”Funktion ist:

Hintergrund-Image: Konic-Gradient (Farbe, Farbe,… Farbe);

Sie können mehrere Farben in der Funktion des “festlegenkonikativer Gradient ()”.

Lassen Sie uns zu dem Beispiel wechseln, in dem wir den Kegelgradienten erstellen werden.

Beispiel

Wir werden nun die Farbe der Überschrift als "einstellen"Weiss”. Verwenden Sie als nächstes die “konikativer Gradient ()"Funktion und erstellen Sie einen Regenbogen -Kegel -Gradienten, indem Sie Regenbogenfarben wie" wie z. "Rot","orange","Gelb","Grün","Blau","Indigo", Und "violett”:

div
Farbe weiß;
Hintergrundbild: Conic-Gradient (Rot, Orange, Gelb, Grün, Blau, Indigo, Violett);

Hier ist das Ergebnis, das zeigt, dass der Kegelgradient erfolgreich erstellt wird:

Das ist es! Wir haben den CSS -Gradienten im Detail erklärt.

Abschluss

Das CSS “GradientMit ”ermöglicht es Ihnen, reibungslose Übergänge zwischen zwei oder mehr festgelegten Farben anzuzeigen. Es gibt drei Arten von Gradientenfunktionen als Wert von “Hintergrund"Eigentum in CSS, wie z."linear-Gradient ()","radial-Gradient ()", Und "konikativer Gradient ()”. In diesem Handbuch haben wir den CSS -Gradienten und seine Typen im Detail erläutert.