Kegelgradienten in CSS

Mit Cascading Style Sheets (CSS) können Sie Ihren Webseiten auf zahlreiche Arten Stil hinzufügen, indem Sie eine gewaltige Auswahl an Eigenschaften und Methoden bereitstellen. Abgesehen von diesen bietet CSS auch Gradienten, die die Anzeige eines gleichmäßigen Übergangs verschiedener Farben ermöglichen.

In CSS gibt es insgesamt drei Gradienten. In diesem Tutorial werden wir die Kegelgradienten diskutieren und lernen, wie man sie benutzt.

Was ist ein Kegelgradient in CSS

In CSS ist ein Kegelgradient eine eingebaute Funktion, mit der Sie Gradienten als Hintergrundbilder mit Farbübergängen um einen Mittelpunkt hinzufügen können.

Syntax

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

Sie müssen mindestens zwei Farben angeben, damit das Conic-Gradient () funktioniert, wenn Sie nicht den Grad der Farbe angeben.

Lassen Sie uns einige Beispiele untersuchen.

Beispiel 1

Das folgende Beispiel zeigt die Arbeit des Conic-Gradienten () unter Verwendung von drei Farben.

Html

Hier erstellen wir einfach einen DIV -Behälter, um die Arbeit von Conic -Gradienten zu veranschaulichen.

CSS

.div
Höhe: 180px;
Breite: 180px;
Hintergrundbild: Konikatiker (rot, grün, blau);

Die Höhe und Breite des DIV ist auf 180px eingestellt, und wir weisen der Conic-Gradient () -Funktion drei Grundfarben zu. Da kein Grad der Farben angegeben ist, werden diese Farben daher im Mittelpunkt des Div -Behälters gleichmäßig verteilt.

Ausgang

Ein Kegelverlauf mit drei Farben.

Beispiel 2

Das folgende Beispiel zeigt die Arbeit des Conicgradienten () unter Verwendung von vier Farben.

CSS

.div
Höhe: 180px;
Breite: 180px;
Hintergrundbild: Konikatiker (rosa, lila, grün, gelb);

Hier haben wir der Funktion Conicgradient () vier Farben zugewiesen.

Ausgang

Ein Kegelverlauf mit vier Farben.

Lassen Sie uns nun ein gutes Verständnis des Konzepts haben, wie wir den Conic -Gradienten in CSS mit Hilfe einiger Beispiele Abschlüsse hinzufügen können.

Beispiel 3: So fügen Sie dem Conic -Gradienten Grad hinzu

Das folgende Beispiel zeigt die Art und Weise, wie Sie die Grade zusammen mit den Farben des Kegelgradienten angeben können.

CSS

.div
Hintergrundbild: Conic-Gradient (Pink 45 Grad, lila 90 Grad, Gelb 230 Grad);

Im obigen Code geben wir drei Farben zusammen mit dem Grad für jede Farbe an.

Ausgang

Ein Kegelgradient mit angegebenen Farbgraden.

Beispiel 4: So erstellen Sie Kreisdiagramme mit Conic -Gradienten

Um ein Kreisdiagramm zu erstellen, setzen.

CSS

.div
Höhe: 180px;
Breite: 180px;
Grenzradius: 50%;
Hintergrundbild: Konikatiker (rot, grün, blau);

Der Grenzradius des DIV-Elements wurde auf 50% festgelegt.

Ausgang

Ein abgerundeter Kuchenchart-ähnliches Form wurde erfolgreich erzeugt.

Jetzt können Sie einen Torten-Chart erstellen, indem Sie Farbgrade in der Funktion conicgradient () angeben, wie im CSS-Code-Snippet unten gezeigt:

CSS

.div
Höhe: 180px;
Breite: 180px;
Grenzradius: 50%;
Hintergrundbild: Conic-Gradient (rot 0de, rot 90de,
Green 90DEG, Grün 180 Grad,
Blau 180 Grad, Blau 270 Grad,
Gelb 270 Grad, Gelb 360 Grad);

Im obigen Code haben wir vier Farben angegeben, die rot, grün, blau und gelb sind. Für jede Farbe wurde nun ein horizontaler und vertikaler Grad angegeben, der die gesamten 360 Grad eines Kreises abdeckt.

Ausgang

Ein Kuchen-Chart mit definitiven Farbgraden.

Beispiel 5: So fügen Sie einen Kegelgradienten aus einem bestimmten Blickwinkel hinzu

Um Konizgradienten aus einem bestimmten Winkel hinzuzufügen, müssen Sie diesen Winkel in der Funktion Conic-Gradient () angeben. So machst du es.

CSS

.div
Höhe: 180px;
Breite: 180px;
Grenzradius: 50%;
Hintergrund-Image: Konikatiker (ab 270 Grad, rot, grün, blau);

Hier haben wir angegeben, dass die Farben rot, grün und blau gleichmäßig aus einem Winkel von 270 Grad verbreitet werden sollten.

Ausgang

Ein Kuchenkuchen-Chart aus einem bestimmten Winkel wird erfolgreich hinzugefügt.

Beispiel 6: So fügen Sie einen Kegelgradienten aus einer bestimmten Position hinzu

Da wir wissen, dass Farben in einem Kegelgradienten gleichmäßig auf einem Mittelpunkt ausbreiten, definieren wir durch die Definition der Position tatsächlich den Mittelpunkt des Kegelverlauf. Betrachten Sie das Beispiel, um zu lernen, wie es geht.

CSS

.div
Höhe: 180px;
Breite: 180px;
Grenzradius: 50%;
Hintergrundbild: Conic-Gradient (bei 30% 45%, rot, grün, blau);

Im obigen Code haben wir die Position von Mittelpunkt bei 30% 45% definiert.

Ausgang

Ein Kegelgradient aus einer bestimmten Position wird hinzugefügt.

Beispiel 7: So wiederholen Sie einen Kegelverlauf

Verwenden Sie zur Wiederholung eines Kegelgradienten die Funktion für Wiederholungskonsumgrade () () (). Betrachten Sie das folgende Beispiel unten.

CSS

.div
Höhe: 180px;
Breite: 180px;
Grenzradius: 50%;
Hintergrundbild: Wiederholungskonsumgradient (Pink 10de, Pink 20de, gelb 20di, gelb 30di);

Hier verwenden wir die Funktion für Wiederholungs-conon-Gradient () und verwenden zwei Farben zusammen mit Angabe ihrer Grad.

Ausgang

Ein wiederholter Kegelgradient wurde eingeführt

Abschluss

Ein Kegelgradient in CSS ist eine eingebaute Funktion, mit der Sie Gradienten mit Farbübergängen um einen Mittelpunkt hinzufügen können. Sie müssen mindestens zwei Farben angeben, um einen Kegelverlauf zu erstellen. Es gibt viele lustige Dinge, die Sie mit einem Kegelgradienten ansprechen können, z. B. Farbgrade, Winkel oder eine Position. Außerdem können Sie mit den Conic-Gradienten auch Torten-Charts herstellen. In dieser Beschreibung haben wir zusammen mit zahlreichen Beispielen Kegelgradienten besprochen.