Ein tiefes Eintauchen in CSS in radiale und konische Farbverläufe

CSS-Verläufe sind eine nützliche CSS-Funktion, die verwendet werden kann, um interessante UI-Effekte zu erstellen oder uns sogar beim Zeichnen zu helfen, ohne HTML-Elemente dafür erstellen zu müssen. Zwei Farbverläufe, auf die ich mich in diesem Artikel konzentrieren möchte, sind conic-gradient und radial-gradient . Jeder funktioniert anders (kegelförmige Farbverläufe sind gekrümmt, während radiale Farbverläufe eine gerade Linie sind).

Um mitzumachen, müssen Sie weder radial-gradient noch conic-gradient kennen. Ich werde mein Bestes tun, um sie gut zu erklären.

Tauchen wir ein!

• Was ist ein radialer Farbverlauf?
  • Das einfachste Beispiel
  • Wie funktioniert ein radialer Farbverlauf?
• Was ist ein konischer Gradient?
• Anwendungsfälle für radiale Farbverläufe
  • radial-gradient in einem Heldenabschnitt
  • Gepunkteter Mustereffekt
  • Bildeffekte
• Anwendungsfälle für konische Farbverläufe
  • Kreisdiagramme
  • Hintergründe und Muster
  • UI-Muster
  • Animieren konischer Farbverläufe mit @property
  • Schneiden Sie Ecken mit benutzerdefinierten Formen
  • Kegelförmige Farbverläufe
  • Abschnitt Hintergründe

Was ist ein radialer Farbverlauf?

Aufgrund ihres Namens geben uns radial-gradient die Möglichkeit, radiale Elemente wie einen Kreis oder eine Ellipse zu zeichnen.

Schauen wir uns die grundlegendste Syntax an.

Das einfachste Beispiel

In diesem Beispiel haben wir einen radial-gradient mit zwei Farbstopps. Dadurch entstand ein ellipsenförmiger Verlauf.

 .element { background: radial-gradient(#9c27b0, #ff9800); }

Das Obige ist der einfachste radial-gradient , den wir in CSS machen können. Sie fragen sich vielleicht, warum standardmäßig eine Ellipse verwendet wurde? Nun, lassen Sie es mich erklären.

Wenn im Farbverlauf kein Formname definiert ist (Kreis oder Ellipse), wird standardmäßig eine Ellipse verwendet, falls:

• Es ist keine Größe festgelegt;
• Oder es gibt zwei Werte (für Breite und Höhe).

Wie funktioniert ein radialer Farbverlauf?

Ich werde eine Reihe von Bildern durchgehen, die zeigen, wie ein Farbverlauf funktioniert, indem verschiedene Schlüsselwörter und Zusätze erhöht werden.

Kommen wir zunächst auf das Ausgangsbeispiel zurück.

 .element { background: radial-gradient(#9c27b0, #ff9800); }

Wenn es zwei Farben gibt, ohne die Form zu identifizieren, wird der Farbverlauf standardmäßig wie folgt zu einer Ellipse:

Die Ellipse füllt die Breite und Höhe ihres Containers aus. Es sieht verschwommen aus, da der Browser davon ausgegangen ist, dass die Start- und Stopppunkte 0% bzw. 100% sind.

So sieht der Browser den Farbverlauf:

 .element { background: radial-gradient(#9c27b0 0%, #ff9800 100%); }

Wenn wir den circle vor dem ersten Farbstopp anhängen, sieht das so aus:

 .element { background: radial-gradient(circle, #9c27b0, #ff9800); }

Nachdem Sie nun eine Vorstellung davon haben, wie der Kreis und die Ellipse standardmäßig aussehen, lassen Sie uns mit der Positionierung beginnen .

Standardmäßig sind beide horizontal und vertikal in ihrem Container zentriert. Mit anderen Worten, bei 50% 50% :

Wichtig ist hier zu beachten, dass die Positionierung vom Mittelpunkt des Kreises oder der Ellipse aus erfolgt, also positionieren wir einen Kreis top left , was positioniert wird, ist der Mittelpunkt .

Schauen wir uns einige Beispiele genauer an.

 .element { background: radial-gradient(circle at top left, #9c27b0, #ff9800); }

Wir könnten es auch auf der rechten Seite zentrieren. Wenn Sie nur right hinzufügen, wird der Kreis auf der right 50% :

 .element { background: radial-gradient(circle at right, #9c27b0, #ff9800); }

So sieht es aus:

Was ist ein konischer Gradient?

Die CSS-Funktion conic-gradient() erstellt einen Farbverlauf, der um die Mitte des Elements gedreht wird. Sehen wir uns ein einfaches Beispiel an.

 .element { background: conic-gradient(#9c27b0, #ff9800); }

Sehen Sie sich an, wie der Farbverlauf am Mittelpunkt des Elements beginnt. Es dreht sich standardmäßig von 0deg bis 360 Grad.

Mal sehen, was passiert, wenn wir einen harten Stoppwert für die erste Farbe hinzufügen.

 .element { background: conic-gradient(#9c27b0 50%, #ff9800); }

Jetzt füllt die erste Farbe 50% des Elements aus, während die zweite nach und nach bis zu 100% angezeigt wird.

Was passiert, wenn wir auch auf die zweite Farbe einen harten Stopp anwenden? Im folgenden Snippet füllt die erste Farbe 50% des Elements aus, die zweite beginnt bei 50% bis zum Ende ( 100% ).

 .element { background: conic-gradient(#9c27b0 50%, #ff9800 0); }

Durch Erhöhen des ersten Farbstoppwerts wird eine abgewinkelte Füllung erstellt:

 .element { background: conic-gradient(#9c27b0 65%, #ff9800 0); }

Nicht nur das, wir können auch einen sich wiederholenden Farbverlauf mit der CSS-Funktion repeating-conic-gradient() erstellen, wie unten gezeigt.

 .element { background: repeating-conic-gradient( #9c27b0 0 15deg, #ff9800 15deg 30deg ); }

Die obigen Ausschnitte füllen die erste Farbe von 0deg bis 15deg , dann wird die zweite Farbe von 15deg bis 30 Grad 30deg . Bei Wiederholung sieht es wie in der folgenden Abbildung aus:

Anwendungsfälle für radiale Farbverläufe

Oft müssen wir eine Illustration oder ein Muster als Hintergrund hinzufügen. Falls es eine Überschrift und/oder einen Nebentext gibt, kann es natürlich schwierig sein, sie zu lesen.

radial-gradient in einem Heldenabschnitt

Die Verwendung eines Ellipsenverlaufs mit derselben Farbe wie der Hintergrund kann dazu beitragen, den Inhalt hervorzuheben. Beachten Sie im folgenden Beispiel, wie sich der Inhalt mit dem Hintergrund überschneidet. Es macht es ein bisschen schwieriger, sich auf das Lesen zu konzentrieren, als auf das Muster zu schauen:

Eine übliche Lösung dafür ist das Hinzufügen einer Ellipse mit der gleichen Farbe wie der Hintergrund darunter (um sie mit ihm zu verschmelzen).

Hier ist der Heldenabschnitt mit der Ellipse (in Grau eingefärbt, nur zu Demozwecken):

So spiegeln Sie das in CSS wider:

 .hero { background-color: #fbfafa; background-image: radial-gradient(#fbfafa, rgba(0,0,0,0) center/70% 70% no-repeat, url("hero-bg.svg"); background-position: center; background-size: 70% 70%, cover; background-repeat: no-repeat; }

Auf diese Weise haben wir das Muster unter dem Inhalt abgedeckt, es ist jetzt viel einfacher, es zu lesen.

Gepunkteter Mustereffekt

Um den Effekt eines gepunkteten Musters zu erzeugen, können wir radial-gradient verwenden. So sieht es aus:

Um dies zu erreichen, können wir einen kleinen Kreis erstellen und der Rest des Farbverlaufs wird transparent sein.

So sieht es alleine aus:

Wenn sich dieses Muster wiederholt, sieht es so aus:

Um dies in CSS widerzuspiegeln, müssen wir eine Breite und Höhe für den Farbverlauf hinzufügen. Da Farbverläufe standardmäßig wiederholt werden, ergibt sich das obige Muster.

 .dot-pattern { --color-1: #9c27b0; --color-2: rgba(0,0,0,0); background-image: radial-gradient(circle at 2px 2px, var(--color-1) 1px, var(--color-2) 0); background-size: 15px 15px; }

Bildeffekte

In Kombination mit mix-blend-mode können radiale Farbverläufe einige interessante UI-Effekte für Bilder erzeugen. Beachten Sie im folgenden Beispiel, wie der Kreis in der oberen linken Ecke positioniert ist. Wir können davon profitieren, indem wir mit Mischmodi spielen, um einen bestimmten Effekt zu erzielen.

 .thumb:after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at top left, #9c27b0, #ff9800); mix-blend-mode: hard-light; opacity: 0.4; }

Anwendungsfälle für konische Farbverläufe

Kreisdiagramme

Der erste Anwendungsfall, der mir für konische Farbverläufe einfällt, sind einfache Tortendiagramme. Das wollten wir schon vor einiger Zeit in CSS machen, und jetzt ist es ganz einfach möglich.

 .pie-chart { width: 100px; height: 100px; background: conic-gradient(from 0deg, #b2daf9 128deg, #2096f3 0); border-radius: 50%; }

Hintergründe und Muster

Es gibt unzählige Möglichkeiten, ein Muster mit konischen Farbverläufen zu erstellen. In diesem Beispiel konzentriere ich mich auf das Schachbrettmuster.

Folgendes passiert im folgenden Farbverlauf:

• Die #fff -Farbe deckt 90deg des Elements ab;
• Dann folgt #000 bis 180deg ;
• Dann folgt #fff bis 270deg ;
• Schließlich wird die #000 bis zum 360deg (360 Grad) gefüllt.

 .checkerboard { --size: 25px; width: 200px; height: 100px; background-image: conic-gradient(#fff 90deg, #000 0 180deg, #fff 0 270deg, #000 0); background-size: var(--size) var(--size); }

Wenn es wiederholt und über background-size gesteuert wird, sieht es so aus:

Darüber hinaus können wir wirklich interessante Effekte erzielen, indem wir einige Werte auf andere Weise drehen. Hier ist ein Beispiel:

 .element { background-image: conic-gradient(#fff 90deg, #000 0 136deg, #fff 0 313deg, #000 0); }

UI-Muster

Manchmal müssen wir möglicherweise ein zufälliges UI-Muster generieren, das unterschiedliche Formen annimmt. Wir können conic-gradient verwenden, um das zu erreichen. Die Idee ist, dass wir die Verlaufsgröße über background-size steuern und dann den conic-gradient ändern, um unterschiedliche Effekte zu erzielen.

Wir haben ein Element mit einer Breite und Höhe von 200px . Innerhalb dieses Elements wiederholen wir den Hintergrund.

 .element { --size: 20px; width: 200px; height: 200px; background-size: var(--size) var(--size); }

Um es sich besser vorzustellen, hat jeder Hintergrund eine Größe von 20px für Breite und Höhe und wird horizontal und vertikal wiederholt.

Jetzt enthält jedes Quadrat, das Sie sehen, einen conic-gradient . Im Moment werde ich zwei Blautöne hinzufügen, um das Konzept besser zu demonstrieren.

 .element { --size: 20px; width: 200px; height: 200px; background: conic-gradient(#2296F3 0.13turn, rgba(255,255,255,0) 0); background-size: var(--size) var(--size); }

So sieht der Kegelverlauf aus, ohne ihn zu wiederholen:

Mit Wiederholung sieht es so aus. Jetzt geht es darum, die zweite Farbe transparent zu machen, was zu einer Dreiecksform führt.

Indem wir einen anderen Winkel haben, können wir die Musterform randomisieren, um interessante Effekte zu erzielen.

Animieren konischer Farbverläufe mit @property

Mit conic-gradient können wir interessante Animationseffekte erzeugen. Dies ist jedoch standardmäßig nicht möglich. Wir müssen die @property Definition verwenden, um eine benutzerdefinierte Eigenschaft zu definieren, die wir für die Animation verwenden.

 @property --conic-mask { syntax: '<percentage>'; inherits: false; initial-value: 0%; } .conic-mask { --conic-mask: 0%; -webkit-mask: conic-gradient(from 0deg at 50% 50%, #000 var(--conic-mask), #0000); transition: --conic-mask 1s ease-out; } .conic-mask: hover { --conic-mask: 100%; }

Schneiden Sie Ecken mit benutzerdefinierten Formen

Dies ist eine Demo von Temani Afif. Die Idee ist, einen conic-gradient als Maske zu verwenden, um Cut-Corner-Effekte zu erzeugen:

Kegelförmige Farbverläufe

Wir können conic-gradient verwenden, um subtile Gradienteneffekte zu erzeugen, die dunklere Ecken oder hellere Ecken mit anderen Farben haben. Conic.css ist eine winzige CSS-Bibliothek von Adam Argyle, die viele schöne konische Farbverläufe enthält.

Verwenden von konischen Farbverläufen für Schnitthintergründe

Ich habe das auf einer Demo von Scott Kellum gesehen. Mir gefiel die Art und Weise, wie die Technik funktioniert, um einer Fußzeile eine partielle Farbe hinzuzufügen, während sie gleichzeitig glatt aussieht.

 .footer { background: conic-gradient(from 0.25turn at 25% 0%, #FFD9CE, rgba(#FFD9CE, 0) 50%); }

• Sehen Sie sich die Demo an →

Fazit

Wie Sie gesehen haben, kann die Verwendung von CSS radial-gradient und conic-gradient Funktionen zu sehr interessanten (und nützlichen) UIs führen. Es gibt jedoch kein Schwarz und Weiß, wenn es darum geht, wann sie verwendet werden. Meistens hängt es vom jeweiligen Anwendungsfall ab.

Ich hoffe, Sie finden den Artikel nützlich. Vielen Dank fürs Lesen!

Weiterführende Literatur zum Smashing Magazine

• Ein tiefer Einblick in object-fit und background-size in CSS
• Häufige CSS-Probleme für Front-End-Projekte
• Verwenden von HSL-Farben in CSS
• Überlaufprobleme in CSS