CSS -Hintergrundgradienten | Erklärt

Eine Gradientenfarbe besteht aus zwei oder mehr Farbtönen. In der Webentwicklung verwenden Designer verschiedene Farben in Anwendungen, um sie visuell ansprechend zu machen. Insbesondere sind CSS -Gradienten eine einzigartige Bildklasse, die eine allmähliche Änderung zwischen komplementären Farben ermöglichen. Diese Gradienten sind aus drei Haupttypen: linear, radial und konisch. Sie können sie verwenden, um den Elementen Gradientenfarben hinzuzufügen.

Dieses Tutorial bietet einen detaillierten Leitfaden, welche CSS -Gradienten sind.

Was sind die Arten von CSS -Gradienten??

Die Arten von CSS -Gradientenfunktionen sind unten aufgeführt:

• linear-Gradient ()
• konikativer Gradient ()
• radial-Gradient ()
• Wiederholung linear Gradient ()
• Wiederholungskongradient ()
• Wiederholungsradialgradient ()

Jede Eigenschaft wird ausführlich mit praktischen Demonstrationen diskutiert.

Methode 1: So fügen Sie lineare Gradienten in CSS hinzu?

In CSS wird ein linearer Gradient mit dem „erstellt“ erstelltlinear-Gradient ()”Funktion. Um es zu nutzen, lesen Sie das nächste Beispiel.

Beispiel 1: Hinzufügen eines einfachen linearen Gradienten in CSS

Fügen Sie in HTML im Körperelement ein Div mit mehreren Klassen hinzuRechteck einfach Gradient”. Wir erstellen eine Box mit Div -Klasse -Inhalten, auf die wir verschiedene Gradienteneigenschaften anwenden werden.

Html

Die beiden Klassen, die im HTML -Code erwähnt werden, werden mit Stilen mit CSS angewendet.

Stil „Rechteck“ div

.Rechteck
Breite: 90%;
Höhe: 200px;
Rand: Auto;

Hier:

“Breite" Und "HöheDie Eigenschaft wird sowohl vertikal als auch horizontal die Größe des Elements bestimmt. “RandDie Eigenschaft erzeugt den gleichen Raum um das Element.

Stil „einfacher Gradient“ div

.einfache Gradient
Hintergrund: Linear-Gradient (blau, schwarz);

Die DIV der einfachen Gradienten erhält die Eigenschaft “Hintergrund"Mit dem Wert"linear-Gradient ()”Funktion. Diese Funktion ist mit zwei Farben, Blau und Schwarz, als Parameter ausgestattet.

Speichern Sie die Datei und öffnen Sie sie im Browser. Die Ausgabe wird wie unten gezeigt angezeigt:

Beispiel 2: Hinzufügen linearer Gradienten mit Winkeln in CSS

Um die Richtung der Farben zu steuern, können Winkel auch wie folgt angegeben werden:

.Winkelgradient
Hintergrund: Linear-Gradient (40de, gelb, rot);

Ausgang

Beispiel 3: Hinzufügen linearer Gradienten mit mehr als zwei Farben in CSS

Es ist nicht darauf beschränkt, nur zwei Farben zu verwenden. Als Designer können Sie so viele Farben verwenden, wie Sie möchten. Standardmäßig sind die Farben gleichmäßig verteilt. Zum Beispiel:

Hintergrund: Linear-Gradient ( #181818, #8758ff, #EAF290, #5CB8E4, #F2F2F2, #182747);

Ausgang

Beispiel 4: Hinzufügen linearer Gradienten durch Angabe von Farbstopps in Prozentsätzen in CSS

Hier beginnen die mit den Prozentsätzen angegebenen Farben bei diesem angegebenen Wert:

Hintergrund: Linear-Gradient (links, #00F5ff 20px, #fce700 40%, #ff6d28 60%, #ea047e 2px);

Ausgang

Beispiel 5: Hinzufügen linearer Gradienten für harte Linien in CSS

Um eine harte Grenze zwischen den Farben zu erstellen, werden die zwei oder mehr Farbstopps an derselben Stelle verwendet. Geben Sie zuerst in der Funktion lineargradient () die Richtung an und färben Sie dann mit Prozentsatz:

Hintergrund: Linear-Gradient (nach oben rechts, #00abb3 45%, #3c4048 45%);

Indem wir den Farben den gleichen Ort bereitstellen, erhalten wir das Ergebnis, wie im folgenden Bild angezeigt:

Beispiel 6: Hinzufügen linearer Gradienten unter Verwendung von Farbnoten in CSS

Der Gradient übersieht gleichmäßig von Farbe zu Farbe. Sie können den Farb Hinweis angeben, um den Mittelpunkt des Übergangs zu bewegen. Der Prozentsatz ist auf “50%Damit der Gradient die Farbe von Blau nach rot wechselt:

Hintergrund: linearer Gradient (blau, 50%, rot);

Ausgang

Methode 2: So fügen Sie Conic -Gradient in CSS hinzu?

Ein Kegelgradient gibt an Farbübergängen an, die um ein Zentrum gedreht wurden. Es wird durch die Verwendung der “entworfenkonikativer Gradient ()”Funktion. Um es zu verwenden, müssen mindestens zwei Farben definiert werden. Darüber hinaus ist der Winkel standardmäßig "0"Grad und die Position wird als" eingestellt "Center”.

Syntax

Hintergrundbild: Conic-Gradient ([aus Winkel] [in Position,] Farbe [Grad], Farbe [Grad],…);

Die Funktion Conic-Gradient () erhält drei Farben als Parameter:

Hintergrundbild: Conic-Gradient ( #FF5858, #e0144c, #9A1663);

Ausgang

Beispiel 1: Hinzufügen von Kiefernkuchen in CSS

Die Funktion Conic-Gradient () bietet uns die Möglichkeit, Kreisdiagramme zu erstellen. Zu diesem Zeitpunkt müssen Farben mit Start- und Endwinkeln angeben. Insbesondere muss der Startwinkelwert der nächsten Farbe gleicher oder weniger als der Endwinkelwert der ersten Farbe sein, um unterschiedliche Farbsektoren zu erzeugen.

Hintergrund: Conic-Gradient (Blue 50 Grad, Rot 50 Grad 120 Grad, Orange 120 Grad);

Ausgang

Beispiel 2: Hinzufügen von Conic -Gradienten mit Winkeln in CSS

Der konische Gradient ist kreisförmig und die Mitte des Elements fungiert als Quellpunkt des Farbstopps. Der Kegelgradientenwinkel befinden sich 0 Grad bis 360 Grad:

Hintergrund-Image: Conic-Gradient (ab 70 Grad, #F1D4D4, #6A097D);

Es ist ersichtlich, dass sich die Farbe aus dem 70 -° -Deg gedreht hat:

Methode 3: So fügen Sie Radialgradienten in CSS hinzu?

Ein radialer Gradient kann mit dem erstellt werdenradial-Gradient ()”Funktion. Diese Funktion erzeugt ein Bild, das aus einem allmählichen Übergang zwischen mehreren Farben besteht, die verwendet werden, um vom Mittelpunkt aus zu strahlen. Es könnte eine Ellipse oder ein Kreis sein.

Der folgende Code zeigt die “HintergrundEigenschaft mit dem Wert als radial-Gradient-Funktion:

Hintergrund: Radialgradient (Kreis, RGBA (241, 151, 216, 1) 28%, RGBA (148, 187, 233, 1) 59%);

Ausgang

Beispiel: In CSS nicht zentriertes Radial hinzufügen

Das folgende Beispiel zeigt, wie ein nicht zentrierter radialer Gradient erstellt wird.

Hintergrundbild: Radialgradient (am weitesten mit 60px 90px,
#ff9f30 0%,
#B60C3C 100%);

Ausgang

Methode 4: So fügen Sie wiederholte lineare Gradienten in CSS hinzu?

Die Funktion "Wiederholung linear Gradient ()”Entwarf ein Bild entlang der wiederholten linearen Gradienten. Es dauert die Parameter als Farben, Grad oder Prozentsätze.

Hintergrund: Wiederholung linear Gradient (25di, #00A8cc, #142850 23.3%);

Ausgang

Methode 5: So fügen Sie wiederholte Radialgradienten in CSS hinzu?

Der "Wiederholungsradialgradient ()Die Funktion erzeugt ein Bild, das aus sich wiederholenden Gradienten besteht, die aus der Mitte ausstrahlen.

Hintergrund: Wiederholungsradialgradient ( #313131, #CA3E47 30%);

Ausgang

Methode 6: So fügen Sie wiederholte Kegelgradienten in CSS hinzu?

Der "Wiederholungskongradient ()Die Funktion erzeugt ein Bild, das aus einem sich wiederholenden Gradienten besteht. Diese Farbübergänge drehen sich um einen Mittelpunkt um.

Hier ist ein Beispiel, um sich wiederholte Conic -Gradienten zu demonstrieren:

Hintergrund: Wiederholungskongradient (ab 74 Grad bei 86% 50%,
#A21232 0DEG 15deg,
#1A1831 10di 21deg,
#DECE9C 20DEG 31DEG);

Ausgang

Auf diese Weise werden die CSS -Hintergrundgradienten in CSS verwendet.

Abschluss

HTML bietet viele Methoden, um Dokumente ansprechend und attraktiv zu gestalten. Diese Methoden umfassen Farben, Textformatierung, Gradienten und mehr. Die CSS -Gradienten sind die speziellen Bilder, die Farbübergänge zwischen zwei oder mehr Farben anzeigen. Das Hintergrundelement verwendet hauptsächlich Gradientenfunktionen. Dieser Beitrag bietet eine Anleitung zum CSS -Hintergrundgradienten.