So erstellen Sie CSS -Conic -Gradienten für Kreisdiagramme und mehr

Key Takeaways

• Conic -Gradienten, die von Lea Verou eingestuft werden, beginnen mit dem Browserunterstützung und können verwendet werden, um Effekte wie Kreisdiagramme und Farbräder zu erzeugen. Sie unterscheiden
Die Syntax für Kegelgradienten ermöglicht die Spezifikation des Startwinkels und der zentralen Position. Wenn diese weggelassen, stammen diese zu Null bzw. in der Mitte. Farbstop-Winkel für die erste und letzte Farbe wird angenommen, dass sie 0 ° und 360 ° C beträgt, wenn nicht angegeben.
Conic-Gradienten können verwendet werden, um Tore-Diagramme zu erstellen, indem Hartfarbwerte für verschiedene Farben bereitgestellt werden. Jede Farbe des Gradienten kann einen Start- und Endwinkel erhalten, was zur Bildung verschiedener Sektoren führt. Es gibt zwei Methoden zur Angabe dieser Farbstop-Werte: Setzen Sie den Startwinkel für jede Farbe auf Null oder das Festlegen des Startwinkels der nächsten Farbe gleich dem Endwinkel der vorherigen Farbe.
wiederholende Kegelgradienten akzeptieren die gleichen Werte wie normale Kegelgradienten, wiederholen sich jedoch, bis die gesamten 360 Grad bedeckt sind. Dies kann verwendet werden, um gemeinsame Bildmuster zu erstellen, die zuvor die Verwendung von Bildern benötigten.

Immer mehr Websites verwenden Gradienten auf die eine oder andere Weise. Einige Websites verwenden sie für Navigationskomponenten, während andere sie in Elementen wie Schaltflächen oder mit Bildern verwenden, um einige nette Effekte zu erzielen.

Alle Browser haben seit langem die lineare und radiale CSS -Gradienten unterstützt. Die CSS -Gradienten: Ein Artikel mit Syntax -Crash -Kurs auf SitePoint bietet eine kurze Zusammenfassung der Syntax, die erforderlich ist, um lineare und radiale Gradienten zu erstellen, sowie die Verwendung von Wiederholungsgradienten, um einige grundlegende Muster zu erstellen. Dies ist großartig, wenn Sie sich für Webleistung interessieren und versuchen Sie, nach Möglichkeit Bilder zu vermeiden.

Nach linearen und radialen Gradienten beginnen die Browser jetzt langsam, konische Gradienten zu unterstützen, die zum ersten Mal von Lea Verou vertrieben wurden.

In diesem Artikel erfahren Sie die Unterstützung der Syntax-, Verwendungs- und Browserunterstützung für einfache Kegelgradienten und wiederholte Kegelgradienten.

Was sind Konic -Gradienten?

konische und radiale Gradienten sind in dem Sinne ähnlich, dass beide von einem angegebenen oder Standardpunkt als Zentrum des Kreises beginnen, das zum Zeichnen verwendet wird. Der Unterschied zwischen den beiden besteht darin, dass bei radialen Gradienten die Farbstops entlang der Radiallinie platziert werden, während bei Conic-Gradienten die Farbstopps entlang des Umfangs des Kreises platziert werden.

Die Position von Farbstopps für einen Kegelgradienten kann entweder als Prozentsatz oder in Bezug auf Grad angegeben werden. Ein Wert von 0% oder 0DEG bezieht sich auf die Spitze des Kegelgradienten. Die Werte steigen weiterhin allmählich an, wenn Sie sich im Uhrzeigersinn bewegen. Ein Wert von 360 Grad entspricht 0de. Jede Farbe, deren Farbstop-Wert größer als 100% oder 360 Grad beträgt, wird nicht auf den Kegelgradienten gezogen, aber sie beeinflusst die Farbverteilung weiterhin.

Das folgende Bild zeigt einen Kegelgradienten, der mit einer gelben Farbe beginnt und mit Orange endet.

Es ist schwierig, den scharfen Übergang nicht zu bemerken, der die Orange bei 360 Grad vom Gelb bei 0n Grad trennt. Denken Sie daran, dass Conic -Gradienten diesen Übergang immer erzeugen, wenn die Start- und Endfarben des Kegelgradienten sehr unterschiedlich sind. Eine Möglichkeit, es zu vermeiden, besteht darin, die Start- und Endfarbe auf denselben Wert zu setzen.

Syntax für Konic -Gradienten

Mit

CONIC -Gradienten können Sie ihren Startwinkel sowie ihre zentrale Position angeben. Wenn diese Werte weggelassen werden, wird der Winkel standardmäßig auf Null und die Position standardmäßig in der Mitte. Hier ist die Syntax für Kegelgradienten:

<span>conic-gradient([ from <angle> ]? [ at <position> ]?,  <angular-color-stop-list>)</angular-color-stop-list></position></angle></span>

Der Farbstop-Winkel für die erste und letzte Farbe wird mit 0n und 360 ° C angenommen, falls nicht angegeben. Der gelb-orangefarbene Kegelgradient aus dem vorherigen Abschnitt könnte unter Verwendung einer der folgenden Versionen erstellt werden:

<span>background: conic-gradient(from 0deg at center, yellow 0deg, orange 360deg);
</span><span>background: conic-gradient(at center, yellow 0deg, orange 360deg);
</span><span>background: conic-gradient(at 50% 50%, yellow 0deg, orange 360deg);
</span><span>background: conic-gradient(from 0deg, yellow 0deg, orange 360deg);
</span><span>background: conic-gradient(yellow 0deg, orange 360deg);
</span><span>background: conic-gradient(yellow, orange);</span>

Anstatt Grad zu verwenden, können Sie auch Prozentsätze verwenden. Wie ich bereits erwähnt habe, beträgt ein Wert von 100% 360 Grad. Ein Wert von 50% beträgt also 180 Grad. Wenn Sie genau wissen, welchen Teil des Kreises Sie mit einer bestimmten Farbe abdecken möchten, ist die Verwendung von Prozentsätzen möglicherweise einfacher. In ähnlicher Weise kann die Mittelposition des Kegelgradienten auch in Prozentsätzen angegeben werden. Jedes der oben genannten Konic -Gradientenwerte erzeugt das folgende Ergebnis:

Siehe den Stift, der einen Kegelgradienten von sitepoint (@sinepoint) auf CodePen erstellt.

Nicht alle Browser unterstützen derzeit Kegelgradienten, daher werde ich ein Referenzbild mit jedem Beispiel einfügen, um anzuzeigen, wie das Endergebnis aussehen soll.

Verwendungszwecke von konischen Gradienten

Sie können Konic -Gradienten verwenden, um verschiedene Arten von Farbrädern zu erstellen. Beispielsweise verwendet die folgende Demo die Farben eines Regenbogens im Kegelgradienten, um ein Regenbogenrad zu erzeugen.

<span><span>.wheel</span> {
</span>  <span>background: conic-gradient(from 90deg, violet, indigo,  blue, green, yellow, orange, red, violet);
</span>  <span>border-radius: 50%;
</span><span>}</span>

Beachten Sie, wie ich sowohl die Start- als auch die Endfarbe des Kegelgradienten auf Violet gesetzt habe, um plötzliche Übergänge zu vermeiden.

Sehen Sie den Stift, der einen Kegelgradienten erzeugt - Regenbogenrad von sitepoint (@sinepoint) auf CodePen.

Verwenden von CSS -Conic -Gradienten für Kreisdiagramme

Ein weiterer Vorteil von Conic -Gradienten ist die Fähigkeit, mit Leichtigkeit Tore -Diagramme zu erstellen. Der Prozess zum Erstellen von Kreisdiagrammen ist eigentlich sehr einfach. Alles, was Sie tun müssen, ist einige harte Farbstop-Werte für verschiedene Farben zu liefern. Jede Farbe des Gradienten kann einen Start- und Endwinkel erhalten. Wenn der Wert des Startwinkels für die nächste Farbe kleiner oder gleich dem Wert des Endwinkels für die aktuelle Farbe ist, werden sie in einer sehr scharfen, sofortigen Farbänderung angezeigt, was zur Bildung verschiedener Sektoren führt.

Es gibt zwei Möglichkeiten, um diese Farbstop-Werte anzugeben. Der erste besteht darin, den Startwinkel für jede Farbe immer auf Null zu setzen.

Die zweite Methode besteht darin, den Startwinkel der nächsten Farbe gleich dem Endwinkel der vorherigen Farbe einzustellen.

Was Sie schließlich beschließen, ist eine Frage der Präferenz.

Das folgende Code -Snippet zeigt den Kegelgradientenwert für diese beiden Methoden nebeneinander zum Vergleich:

<span>conic-gradient([ from <angle> ]? [ at <position> ]?,  <angular-color-stop-list>)</angular-color-stop-list></position></angle></span>

Sie können den Startwinkel für Ihre erste Farbe und Ihren Endwinkel für Ihre letzte Farbe weglassen, da sie standardmäßig auf 0% bzw. 100% eingestellt werden:

Siehe den Stift, der einen Kammgradienten erstellt - Kreisdiagramme von SitePoint (@sinepoint) auf CodePen.

Verwenden von CSS -Conic -Gradienten, um Donut -Diagramme zu erstellen

Erstellen eines Donut-Diagramms ist nur eine Frage der Anwendung eines zusätzlichen radialen Gradienten auf Ihr Element mit harten Farbstopps. Die innere Farbe des radialen Gradienten kann auf weiß eingestellt werden und der äußere Teil kann transparent gemacht werden.

<span>background: conic-gradient(from 0deg at center, yellow 0deg, orange 360deg);
</span><span>background: conic-gradient(at center, yellow 0deg, orange 360deg);
</span><span>background: conic-gradient(at 50% 50%, yellow 0deg, orange 360deg);
</span><span>background: conic-gradient(from 0deg, yellow 0deg, orange 360deg);
</span><span>background: conic-gradient(yellow 0deg, orange 360deg);
</span><span>background: conic-gradient(yellow, orange);</span>

Siehe den Stift, der einen Kegelgradienten erstellt - Donut -Diagramme von SitePoint (@sinepoint) auf CodePen.

wiederholende Konizgradienten

Ein sich wiederholender Kegelgradient akzeptiert alle die gleichen Werte wie einen regulären Konic -Gradienten. Der einzige Unterschied besteht darin, dass es sich diesmal immer wieder wiederholt, bis die gesamten 360 Grad bedeckt sind. Sie können diese Wiederholung verwenden, um einige gemeinsame Bildmuster zu erstellen, die zuvor die Verwendung von Bildern benötigt haben.

Sie können die Kreisdiagramme leicht ändern, um Starburst-ähnliche Hintergründe zu erstellen. Alles, was Sie tun müssen, ist, Wiederholungskondensgrade zu verwenden und die Breite jedes Farbsegments um eine geeignete Menge zu verringern.

<span>conic-gradient([ from <angle> ]? [ at <position> ]?,  <angular-color-stop-list>)</angular-color-stop-list></position></angle></span>

In ähnlicher Weise können Sie mühelos ein Schachbrettmuster erstellen, indem Sie die Breite jedes Sektors auf 25% festlegen und die Hintergrundgröße festlegen.

Das folgende Bild zeigt, wie das Ausdehnen eines Kegelgradienten mit vier 90 -Grad -Sektoren über einem rechteckigen oder quadratischen Bereich Schachbrarten erzeugen kann:

Hier ist das CSS, um ein Schachbrettmuster zu erstellen:

<span>background: conic-gradient(from 0deg at center, yellow 0deg, orange 360deg);
</span><span>background: conic-gradient(at center, yellow 0deg, orange 360deg);
</span><span>background: conic-gradient(at 50% 50%, yellow 0deg, orange 360deg);
</span><span>background: conic-gradient(from 0deg, yellow 0deg, orange 360deg);
</span><span>background: conic-gradient(yellow 0deg, orange 360deg);
</span><span>background: conic-gradient(yellow, orange);</span>

Siehe den Stift wiederholten Konic -Gradienten - Schachbrarten von SitePoint (@sinepoint) auf CodePen.

Sie können viele weitere Muster erstellen, indem Sie die Größe verschiedener Sektoren variieren und den From -Winkel für die Gradienten ändern.

Browserunterstützung und Polyfills

Zum Zeitpunkt des Schreibens dieses Artikels werden Conic -Gradienten in Chrome 59 und Opera 46 hinter dem Flag „Experimental Web Platform“ unterstützt. Kein anderer Browser unterstützt diesen neuen Standard, entweder standardmäßig oder hinter einer Flagge. Dies bedeutet, dass Sie ein wenig warten müssen, bevor es genügend Browser -Unterstützung gibt.

Sie können jedoch heute mit Hilfe eines von Lea Verou erzeugten CSS-CONIC-Gradienten mithilfe einer ausgezeichneten CSS-Conic-Gradient () -Polyfill mithilfe von Lea Verou beginnen. Es gibt auch ein POSTCSS -CONIC -Gradienten -Plugin, das Ihren CSS -Dateien automatisch einen konischen Gradientenfallback hinzufügt.

endgültige Gedanken

Dieses Tutorial hat Ihnen gezeigt, wie Sie mit Conic -Gradienten Kuchen- und Donut -Diagramme erstellen. Danach haben Sie gelernt, wie man mithilfe von CSS mit Hilfe von Conic -Gradienten verschiedene Hintergrundmuster erstellt. Sobald der Browserunterstützung gut genug ist, müssen Sie sich nicht mehr auf große Bibliotheken oder Bilder verlassen, um diese Aufgaben zu erfüllen.

Um mehr über Konic -Gradienten zu erfahren, verpassen Sie diese Ressourcen nicht:

• Lea Verou's Talk für CSSConf EU 2015
• CONIC -Gradientenabschnitt im CSS -Bildwerte und ersetztes Inhaltsmodul Level 4
ersetzt
• Lea Verous erste Entwurfsspezifikation, die bis 2011 zurückreicht.

Können Sie einzigartige Verwendungszwecke für Konic -Gradienten im Web vorschlagen? Lassen Sie es uns in den Kommentaren wissen.

häufig gestellte Fragen (FAQs) zu CSS -Conic -Gradienten und Kreisdiagrammen

Welche Bedeutung hat der Farbstop-Wert in CSS-Kegelgradienten? Es wird als Prozentsatz oder Winkel ausgedrückt. Beispielsweise bedeutet ein Farbstop-Wert von 25% oder 90 ° C, dass die Farbe mit einem Viertel des Weges um den Kreis bzw. bei 90 Grad endet. Wenn Sie diese Werte manipulieren, können Sie einzigartige Gradienteneffekte erzeugen.

Wie kann ich einen reibungslosen Übergang zwischen Farben in einem Kegelgradienten erstellen? Indem Sie Farbstopps nahe beieinander platzieren, können Sie einen glatten, allmählichen Übergang zwischen Farben erstellen. Je näher die Farbstopps sind, desto glatter ist der Übergang. Wie? Durch das Festlegen verschiedener Farbstop-Werte können Sie Abschnitte unterschiedlicher Farben erstellen, die einem Kreisdiagramm ähneln. Sie können diese Abschnitte dann verwenden, um verschiedene Datenpunkte darzustellen. Zum Beispiel unterstützen Internet Explorer und einige Versionen von Microsoft Edge sie nicht. Um sicherzustellen, dass Ihre Gradienten in allen Browsern korrekt angezeigt werden, sollten Sie eine Fallback -Hintergrundfarbe oder eine Polyfill verwenden. CSS -Radialgradienten, der um einen Mittelpunkt um einen Mittelpunkt strahlt, erzeugen einen Gradienten, der von einem Mittelpunkt aus strahlt. Um einen radialen Gradienten zu erstellen, würden Sie die Funktion radial-Gradient () anstelle der Funktion Conic-Gradient () verwenden. Kann CSS -Variablen mit Kegelgradienten verwenden. Auf diese Weise können Sie dynamischere und flexiblere Stile erstellen. Sie können eine CSS -Variable mit einem bestimmten Wert definieren und diese Variable in Ihrem Kegelgradienten verwenden. CSS -Animationen oder Übergänge. Zum Beispiel könnten Sie die Rotation des Gradienten animieren oder die Farbstop-Werte animieren, um einen Gradienten zu erzeugen, der sich im Laufe der Zeit ändert. > Ja, Sie können transparente Farben in einem CSS -Kegelgradienten verwenden. Dies kann interessante visuelle Effekte erzeugen, wie z. B. einen Gradienten, der in Transparenz verblasst. conicgradient () Funktion. Auf diese Weise können Sie ein Gradientenmuster erstellen, das sich um den Kreis wiederholt. Zum Beispiel können Sie einen Kegelgradienten als Hintergrund eines Textelements verwenden und dann andere CSS-Eigenschaften auf diesen Text wie Farbe, Schriftgröße und Text-Shadow anwenden.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie CSS -Conic -Gradienten für Kreisdiagramme und mehr. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!