CSS-Verlaufsgenerator

Verläufe sind Bilder, keine Farben

Ein CSS-Verlauf wird von den Funktionen linear-gradient, radial-gradient oder conic-gradient erzeugt, und jede liefert einen Bildwert, keine Farbe. Diese eine Tatsache erklärt das meiste am Verhalten von Verläufen. Da das Ergebnis ein Bild ist, weisen Sie es einer Eigenschaft zu, die Bilder annimmt, am häufigsten background oder background-image, und es kachelt, skaliert und stapelt sich wie jeder andere Hintergrund. Es hat zudem keine intrinsische Größe; es füllt jede Box, in die Sie es setzen, weshalb derselbe Verlauf auf einer Schaltfläche steil und über einen Hero-Bereich sanft aussehen kann.

Lineare Verläufe und Richtung

Ein linearer Verlauf mischt Farben entlang einer geraden Achse. Diese Achse legen Sie entweder mit einem Winkel oder mit einer Schlüsselwort-Richtung fest. Winkel werden im Uhrzeigersinn von senkrecht oben gemessen, sodass 0deg von unten nach oben verläuft, 90deg von links nach rechts und 180deg von oben nach unten. Die Schlüsselwortformen, etwa to right oder to bottom right, sind für einfache Fälle oft klarer und haben den Vorteil, exakt auf eine Ecke zu zeigen, was ein fester Winkel nicht kann, wenn sich die Box in der Form ändert.

Der Winkelregler in diesem Tool schreibt Ihnen den Gradwert. Ein dezenter Tipp: Ein Verlauf, der leicht diagonal verläuft, irgendwo um 135deg, sieht fast immer raffinierter aus als ein flacher senkrechter oder waagerechter Übergang, weil das Auge die Diagonale als Licht liest, das schräg über eine Fläche streift.

Radiale und konische Verläufe

Ein radialer Verlauf verläuft von einem Mittelpunkt aus in konzentrischen Ringen nach außen, was sich ideal für Scheinwerfer, weiche Vignetten und Lichtscheine eignet. Standardmäßig bildet er eine Ellipse, die die Box füllt, doch Sie können ihn zu einem perfekten Kreis machen und seinen Mittelpunkt verschieben, sodass ein Glanzlicht in einer Ecke statt genau in der Mitte sitzen kann. Radiale Verläufe sind die natürliche Wahl, wann immer das Licht oder der Fokus von einem einzelnen Punkt auszugehen scheinen soll.

Ein konischer Verlauf führt Farben um einen Mittelpunkt herum wie die Zeiger einer Uhr, statt von ihm nach außen. Dieses rotierende Führen ist es, was konische Verläufe zur Grundlage von Kreisdiagrammen, Farbkreisen und dem zunehmend verbreiteten konischen Leuchten macht, das als Akzent auf Karten genutzt wird. Dieselben Farbstopps, die Sie bereits verstehen, gelten weiterhin; nur die Geometrie, wie sie angeordnet sind, ändert sich zwischen linear, radial und konisch.

Farbstopps und Positionen

Jeder Verlauf wird durch Farbstopps definiert, wobei jeder Stopp eine Farbe und eine optionale Position entlang der Verlaufslinie ist, üblicherweise als Prozentwert von 0 bis 100 geschrieben. Mit zwei Stopps erhalten Sie einen einfachen Übergang; weitere lassen den Verlauf durch mehrere Farben führen. Lassen Sie die Positionen weg, verteilt der Browser die Stopps gleichmäßig, doch sie von Hand zu setzen ist die Art, wie Sie genau steuern, wo jede Farbe sitzt und wie viel Raum jeder Übergang erhält.

Positionen müssen nicht gleichmäßig ansteigen, und genau da werden Verläufe interessant. Zwei Stopps dicht beieinander zu bündeln erzeugt einen schnellen Übergang, während sie auseinanderzuziehen einen langsamen, sanften ergibt. Sie können zwei Stopps sogar dieselbe Position geben, um den Übergang vollständig zu entfernen, was der Schlüssel zur nächsten Technik ist.

Harte Stopps: Streifen, Bänder und Formen

Wenn zwei benachbarte Farbstopps dieselbe Position teilen, geschieht der Übergang zwischen ihnen über null Distanz und erzeugt eine scharfe Kante statt eines Übergangs. Wiederholen Sie dieses Muster, und Sie erhalten Streifen, Schachbrettmuster, Fortschrittsbalken und farbcodierte Bänder, alle in CSS gezeichnet, ganz ohne Bilder. Zum Beispiel ergibt ein Verlauf, der eine Farbe von 0 bis 50 Prozent hält und eine zweite Farbe von 50 bis 100 Prozent, eine saubere zweifarbige Teilung in der Mitte.

Kombinieren Sie harte Stopps mit repeating-linear-gradient oder repeating-radial-gradient, und das Muster kachelt automatisch über die Box, sodass Sie Zuckerstangen-Streifen, diagonales Warnband oder feine Hilfslinien aus einer einzigen kurzen Deklaration bauen können. Da es Vektormathematik statt einer Bitmap ist, bleibt es bei jeder Größe und auf jeder Pixeldichte messerscharf.

Transparenz und Überlagerung

Verlaufsstopps können Farben mit einem Alphakanal verwenden, und das Überblenden zu einer vollständig transparenten Farbe ist einer der nützlichsten Schritte, die Sie machen können. Ein Verlauf, der von einer deckenden Farbe zu Transparenz läuft, erzeugt die Abdunklung, die Sie hinter Text am unteren Rand eines Fotos sehen, das Ausblenden am Rand einer scrollenden Liste und weiche Bildmasken. Ein Vorbehalt: Bei manchen Farbinterpolationen kann das Überblenden zu reinem Transparent durch einen tristen grauen Mittelpunkt führen, sodass das Überblenden zur selben Farbe bei Alpha null statt zu einem bloßen transparent-Schlüsselwort ein saubereres Ergebnis liefert.

Da Verläufe Bilder sind, akzeptiert die background-Eigenschaft mehrere durch Kommas getrennt, von vorne nach hinten gezeichnet. Einen dezenten transparenten Verlauf über einen Grundverlauf zu stapeln ist die Art, wie satte moderne Hintergründe ohne eine einzige Bilddatei gebaut werden.

Barrierefreiheit: Text über Verläufen

Das Risiko bei Verläufen liegt unter Ihrem Text. Der Kontrast kann an einem Ende eines Verlaufs vollkommen in Ordnung sein und am anderen schlimm versagen, sodass eine Überschrift, die über dem dunklen Teil lesbar ist, über dem hellen Teil verschwinden kann. Prüfen Sie stets den ungünstigsten Bereich, nicht den Durchschnitt. Die robuste Lösung ist, eine halbtransparente, deckende Abdunklung oder einen eigens dafür vorgesehenen Verlauf von Dunkel zu Transparent zwischen den unruhigen Hintergrund und den Text zu legen, damit das Kontrastverhältnis überall sicher bleibt. Behandeln Sie den hellsten Punkt unter hellem Text und den dunkelsten Punkt unter dunklem Text als den Wert, den Sie tatsächlich bestehen müssen.