CSS Tricks That Use Only One Gradient

CSS-Verläufe gibt es schon so lange, dass kein erneutes Aufwärmen erforderlich ist was sie sind und wie man sie verwendet. Sie sind ihnen sicherlich schon einmal auf Ihrer Front-End-Reise begegnet, und wenn Sie mir folgen, wissen Sie auch, dass ich sie ständig verwende. Ich benutze sie für CSS-MusterHübsch CSS-Dekorationenund sogar CSS-Lader. Dennoch haben Farbverläufe eine schwierige Syntax, die sehr schnell sehr kompliziert werden kann, wenn Sie nicht aufpassen.

In diesem Artikel werden wir keine komplexen Dinge mit CSS-Verläufen erstellen. Stattdessen halten wir die Dinge einfach und ich werde all die unglaublichen Dinge durchgehen, die wir mit nur einem Farbverlauf machen können.

Nur ein Gefälle? In diesem Fall sollte es ausreichen, das Dokument zu lesen, oder?

Nein, nicht wirklich. Machen Sie weiter und Sie werden sehen, dass Farbverläufe in ihrer einfachsten Form einfach sind, aber sehr leistungsstark sind, wenn wir sie – oder in diesem Fall nur einen – an ihre Grenzen bringen.

CSS-Muster

Eines der ersten Dinge, die man mit Farbverläufen lernt, ist, dass wir mit ihnen wiederholbare Muster erstellen können. Sie haben wahrscheinlich einige Beispiele für Schachbrettmuster in freier Wildbahn gesehen. Das ist etwas, was wir mit einem einzigen CSS-Verlauf schnell erreichen können. In diesem Fall können wir nach dem greifen repeating-conic-gradient() Funktion:

background: 
  repeating-conic-gradient(#000 0 25%, #fff 0 50%) 
  0 / 100px 100px;

Eine ausführlichere Version davon ohne background Kurzschrift:

background-image: repeating-conic-gradient(#000 0 25%, #fff 0 50%);
background-size: 100px 100px;

Das Ergebnis ist in jedem Fall dasselbe:

Bisher ziemlich einfach, oder? Sie haben zwei Farben, die Sie leicht gegen andere Farben austauschen können, plus die background-size Eigenschaft zur Steuerung der quadratischen Formen.

Wenn wir die Farbstopps ändern – wo eine Farbe aufhört und eine andere beginnt – erhalten wir ein weiteres cooles Muster, das auf Dreiecken basiert:

background: 
  repeating-conic-gradient(#000 0 12.5%, #fff 0 25%) 
  0 / 100px 100px;

Wenn Sie das CSS für die beiden bisher gesehenen Demos vergleichen, werden Sie feststellen, dass ich lediglich die Farbstopps in zwei Hälften geteilt habe. 25% Zu 12.5% Und 50% Zu 25%.

Noch einer? Lass uns gehen!

Dieses Mal arbeite ich mit CSS-Variablen. Das gefällt mir, weil Variablen die Konfiguration der Farbverläufe durch die Aktualisierung einiger Werte erheblich vereinfachen, ohne die Syntax tatsächlich zu berühren. Die Berechnung ist dieses Mal etwas komplexer, da sie auf trigonometrischen Funktionen beruht, um genaue Werte zu erhalten.

Ich weiß, was Sie denken: Trigonometrie? Das klingt hart. Das trifft auf jeden Fall zu, insbesondere wenn Sie mit CSS-Verläufen noch nicht vertraut sind. Eine gute Möglichkeit, das Muster zu visualisieren, besteht darin, die Wiederholung mithilfe von zu deaktivieren no-repeat Wert. Dadurch wird das Muster auf eine Instanz isoliert, sodass Sie klar erkennen können, was wiederholt wird. Das folgende Beispiel deklariert background-image ohne a background-size So können Sie die sich wiederholende Kachel sehen und jeden Farbverlauf besser verstehen:

Ich möchte eine Schritt-für-Schritt-Anleitung für jedes einzelne Beispiel, das wir behandeln, vermeiden, damit ich es teilen kann viele Weitere Beispiele, ohne sich im Unkraut zu verlieren. Stattdessen verweise ich Sie auf drei Artikel, auf die Sie sich beziehen können und die Ihnen dabei helfen, unsere Beispiele auseinanderzunehmen.

Ich werde Sie auch dazu ermutigen, sich zu öffnen meine Online-Sammlung von Mustern für noch mehr Beispiele. Die meisten Beispiele sind mit mehreren Farbverläufen erstellt, aber es gibt auch viele, die nur einen verwenden. Das Ziel dieses Artikels ist es, ein paar Tricks mit „einzelnen Farbverläufen“ zu lernen – aber das ultimative Ziel ist es, so viele Farbverläufe wie möglich zu kombinieren, um coole Sachen zu erstellen!

Gitterlinien

Beginnen wir mit dem folgenden Beispiel:

Sie könnten behaupten, dass dies unter „Muster“ gehört – und Sie haben Recht! Aber machen wir es flexibler, indem wir Variablen zur Steuerung der Dicke und der Gesamtzahl der Zellen hinzufügen. Mit anderen Worten, erstellen wir eine Netz!

.grid-lines {
  --n: 3; /* number of rows */
  --m: 5; /* number of columns */
  --s: 80px; /* control the size of the grid */
  --t: 2px; /* the thickness */

  width: calc(var(--m)*var(--s) + var(--t));
  height: calc(var(--n)*var(--s) + var(--t));
  background:  
    conic-gradient(from 90deg at var(--t) var(--t), #0000 25%, #000 0)
      0 0/var(--s) var(--s);
}

Lassen Sie uns zunächst den Farbverlauf isolieren, um die Wiederholung besser zu verstehen (wie wir es im vorherigen Abschnitt getan haben).

Eine Wiederholung ergibt eine horizontale und eine vertikale Linie. Die Größe des Farbverlaufs wird durch die Variable gesteuert --salso definieren wir die Breite und Höhe als Multiplikator, um so viele Linien zu erhalten, wie wir das Gittermuster erstellen möchten.

Was ist mit „+ var(--t)” in der Gleichung?

Das Gitter sieht ohne so aus:

Uns fehlen rechts und unten Linien, was angesichts des von uns verwendeten Farbverlaufs logisch ist. Um dies zu beheben, muss der Farbverlauf noch einmal wiederholt werden, jedoch nicht in voller Größe. Aus diesem Grund addieren wir die Dicke zur Gleichung, um genügend Platz für die zusätzliche Wiederholung zu haben und die fehlenden Linien zu erhalten.

Und wie wäre es mit einer responsiven Konfiguration, bei der die Anzahl der Spalten vom verfügbaren Platz abhängt? Wir entfernen die --m Variable und definieren Sie die Breite wie folgt:

width: calc(round(down, 100%, var(--s)) + var(--t));

Anstatt Dinge zu multiplizieren, verwenden wir die round() Funktion, um den Browser anzuweisen, das Element auf die volle Breite zu bringen und den Wert auf ein Vielfaches von zu runden --s. Mit anderen Worten: Der Browser findet den Multiplikator für uns!

Ändern Sie die Größe unten und sehen Sie, wie sich das Raster verhält:

Zukünftig wird uns das auch mit dem gelingen calc-size() Funktion:

width: calc-size(auto, round(down, size, var(--s)) + var(--t));

Benutzen calc-size() ist im Wesentlichen das Gleiche wie das letzte Beispiel, verwendet jedoch nicht 100% wir überlegen auto soll der Breitenwert sein. Es ist noch früh, eine solche Syntax zu übernehmen. Sie können das Ergebnis in der zum Zeitpunkt des Schreibens dieses Artikels neuesten Version von Chrome testen:

Gestrichelte Linien

Versuchen wir etwas anderes: vertikale (oder horizontale) gestrichelte Linien, mit denen wir alles steuern können.

.dashed-lines {
  --t: 2px;  /* thickness of the lines */
  --g: 50px; /* gap between lines */
  --s: 12px; /* size of the dashes */
  
  background:
    conic-gradient(at var(--t) 50%, #0000 75%, #000 0)
    var(--g)/calc(var(--g) + var(--t)) var(--s);
}

Können Sie herausfinden, wie es funktioniert? Hier ist eine Abbildung mit Hinweisen:

Versuchen Sie, die horizontale Version selbst zu erstellen. Hier ist eine Demo Das zeigt, wie ich es angegangen bin, aber probieren Sie es aus, bevor Sie einen Blick darauf werfen.

Wie wäre es mit einem Raster mit gestrichelten Linien – ist das möglich?

Ja, aber mit zwei Farbverläufen statt einem. Der Code wird unter veröffentlicht meine Sammlung von CSS-Formen. Und ja, das Reaktionsverhalten ist auch da!

Regenbogenverlauf

Wie würden Sie den folgenden Farbverlauf in CSS erstellen?

Sie können damit beginnen, so viele Farbwerte wie möglich entlang des Regenbogens auszuwählen und sie dann in einer Reihe zu verketten linear-gradient:

linear-gradient(90deg, red, yellow, green, /* etc. */, red);

Gute Idee, aber bis zum Ziel kommt man damit nicht weiter. Außerdem müssen Sie mit den Farbstopps jonglieren und so lange experimentieren, bis alles genau richtig ist.

Es gibt eine einfachere Lösung. Wir können dies mit nur einer Farbe erreichen!

background: linear-gradient(90deg in hsl longer hue, red 0 0);

Ich weiß, die Syntax sieht seltsam aus, wenn Sie das sehen neue Farbinterpolation erstmals.

Wenn ich nur das erkläre:

background: linear-gradient(90deg, red, red); /* or (90deg, red 0 0) */

…der Browser erzeugt einen Farbverlauf, der von Rot zu Rot geht … überall rot! Wenn wir dies einstellen „in hsl„Wir ändern den Farbraum, der für die Interpolation zwischen den Farben verwendet wird:

background: linear-gradient(90deg in hsl, red, red);

Jetzt erstellt der Browser einen Farbverlauf, der von Rot nach Rot verläuft. Dieses Mal wird der HSL-Farbraum anstelle des Standard-RGB-Farbraums verwendet. Optisch ändert sich nichts … ich sehe immer noch überall Rot.

Der longer hue Bit ist das Interessante. Wenn wir uns im HSL-Farbraum befinden, ist der Wert des Farbtonkanals eine Winkeleinheit (z. B. 25deg). Sie können den HSL-Farbraum als Kreis sehen, wobei der Winkel die Position der Farbe innerhalb dieses Kreises definiert.

Da es sich um einen Kreis handelt, können wir uns zwischen zwei Punkten auf einem „kurzen“ oder „langen“ Weg bewegen.

Wenn wir den gleichen Punkt betrachten (red In unserem Fall bedeutet dies, dass der „kurze“ Pfad nur Rot enthält und der „lange“ Pfad beim Durchqueren des Farbraums auf alle Farben trifft.

Adam Argyle hat einen sehr detaillierten Leitfaden veröffentlicht hochauflösende Farben in CSS. Ich empfehle die Lektüre, da Sie dort alle Funktionen finden, die wir behandeln (diesen Abschnitt (insbesondere), um mehr Kontext darüber zu erhalten, wie alles zusammenhängt.

Wir können dieselbe Technik zum Erstellen verwenden ein Farbkreis mit a conic-gradient:

background: conic-gradient(in hsl longer hue,red 0 0);

Und wo wir gerade beim Thema CSS-Farben sind, habe ich einen weiteren lustigen Trick mit Ihnen geteilt, der Ihnen dies ermöglicht Definieren Sie ein Array von Farbwerten … ja, in CSS! Und es wird auch nur ein einziger Farbverlauf verwendet.

Hover-Effekte

Machen wir eine weitere Übung, diesmal mit Hover-Effekten. Wir neigen dazu, uns auf Pseudoelemente und zusätzliche Elemente zu verlassen, wenn es um Dinge wie das Anwenden von Unterstreichungen und Überlagerungen beim Hover geht, und wir neigen dazu zu vergessen, dass Farbverläufe genauso effektiv, wenn nicht sogar effektiver für die Erledigung der Arbeit sind.

Ein typisches Beispiel. Lassen Sie uns einen einzelnen Farbverlauf verwenden, um eine Unterstreichung zu bilden, die beim Schweben verschiebt:

h3 {
  background: 
    linear-gradient(#1095c1 0 0) no-repeat
    var(--p,0) 100%/var(--p, 0) .1em;
  transition: 0.4s, background-position 0s;
}

h3:hover {
  --p: 100%;
}

Sie hätten dafür wahrscheinlich ein Pseudoelement verwendet, oder? Ich denke, das ist wahrscheinlich die Art und Weise, wie die meisten Leute es angehen würden. Es ist eine praktikable Lösung, aber ich finde, dass die Verwendung eines Farbverlaufs stattdessen zu einem saubereren und prägnanteren CSS führt.

Das könnte Sie interessieren ein weiterer Artikel, den ich für CSS-Tricks geschrieben habe wo ich dieselbe Technik verwende, um eine Vielzahl cooler Hover-Effekte zu erstellen.

CSS-Formen

Das Erstellen von Formen mit Farbverläufen ist meine Lieblingsbeschäftigung in CSS. Ich mache es schon seit einer gefühlten Ewigkeit und liebe es so sehr, dass ich einen veröffentlicht habe „Moderner Leitfaden zum Erstellen von CSS-Formen“ Anfang dieses Jahres beim Smashing Magazine. Ich hoffe, dass Sie es sich nicht nur ansehen, um weitere Tricks zu lernen, sondern auch, um zu sehen, wie viele Formen wir mit so wenig Code erstellen können – viele, die nur auf einem einzigen CSS-Verlauf basieren.

Zu meinen Favoriten gehören Zick-Zack-Ränder:

…und „geschöpfte“ Ecken:

…sowie Glitzer:

…und gängige Symbole wie das Pluszeichen:

Ich werde nicht näher auf die Erstellung dieser Formen eingehen, um diesen Artikel nicht lang und langweilig zu machen. RLesen Sie den Leitfaden und besuchen meine CSS-Shape-Sammlung und Sie haben alles, was Sie brauchen, um diese zuzubereiten, und noch mehr!

Tricks mit Randbildern

Lassen Sie uns noch eins machen, bevor wir dem eine Obergrenze setzen. Anfang dieses JahresIch habe entdeckt, wie großartig das CSS ist border-image Die Immobilie dient zum Erstellen verschiedener Arten von Dekorationen und Formen. Und wissen Sie was? border-image beschränkt uns auf die Verwendung nur eines Farbverlaufs, daher sind wir verpflichtet, dieser Einschränkung zu folgen.

Auch hier genügt ein einziger Farbverlauf, und schon erhalten wir jede Menge tolle Ergebnisse. Ich werde meine Favoriten hinzufügen, wie ich es im letzten Abschnitt getan habe. Beginnen Sie mit einer Verlaufsüberlagerung:

Wir können diese Technik für einen Hintergrund in voller Breite verwenden:

…sowie Überschriftentrenner:

…und sogar Bänder:

Für all dies waren traditionell Hacks, magische Zahlen und andere Problemumgehungen erforderlich. Es ist großartig zu sehen, wie modernes CSS die Dinge einfacher macht. Geh und lies mein Artikel zu diesem Thema um all die interessanten Dinge zu finden, die Sie damit herstellen können border-image.

Einpacken

Ich hoffe, Ihnen hat diese Sammlung von „Single-Gradient“-Tricks gefallen. Die meisten Leute, die ich kenne, neigen dazu, Farbverläufe zu verwenden, um Farbverläufe zu erstellen. Aber wie wir gesehen haben, sind sie leistungsfähiger und können für viele andere Dinge verwendet werden, beispielsweise zum Zeichnen von Formen.

Ich möchte am Ende eines Artikels wie diesem daran erinnern, dass das Ziel nicht darin besteht, sich auf die Verwendung eines Farbverlaufs zu beschränken. Sie können mehr verwenden! Das Ziel besteht darin, die Funktionsweise von Farbverläufen besser zu verstehen und sie auf interessante Weise voranzutreiben – was uns wiederum beim Schreiben von CSS verbessert. Also, gehen Sie los und experimentieren Sie – ich würde gerne sehen, was Sie machen!