Leitfaden für CSS-Verläufe

Die Syntax wird entweder für die Eigenschaft background (Kurzschreibweise) oder background-image in CSS deklariert. Im einfachen Deutsch liest es sich so:

Erstelle ein Hintergrundbild, das ein linearer Verlauf ist, der sich [in diese Richtung oder in diesem Winkel] bewegt und mit [einer Farbe] beginnt und mit [einer anderen Farbe] endet.

Die offizielle Syntax sieht eher so aus:

linear-gradient(
  [ <angle> | to <side-or-corner> ]? ,
  <color-stop-list>
)
<side-or-corner> = [to left | to right] || [to top | to bottom]

Beginnen wir mit dem einfachsten Beispiel: ein zweifarbiger CSS-Verlauf, der von oben nach unten verläuft.

.gradient {
  background-image: linear-gradient(#ff8a00, #e52e71);
}

Schön, oder? Beachten Sie, dass wir im obigen Beispiel keinen Winkel angegeben haben. CSS nimmt in diesem Fall to bottom an, wobei #ff8a00 die Startfarbe ist, die in die nächste Farbe, #e52e71, übergeht.

Dasselbe hätten wir auf zwei andere Arten schreiben können:

/* Explicitly declare the direction */
background-image: linear-gradient(to bottom, #ff8a00, #e52e71);

/* Explicitly declare the angle, in degrees */
background-image: linear-gradient(180deg, #ff8a00, #e52e71);

Damit der CSS-Verlauf von links nach rechts verläuft, übergeben wir am Anfang der Funktion linear-gradient() einen zusätzlichen Parameter, beginnend mit dem Wort to, das die Richtung angibt. Brechen wir den Eigenschaftswert in separate Zeilen auf, damit man besser sieht, was passiert.

.gradient {
  background-image:
    linear-gradient(
      to right,
      #ff8a00, #e52e71
    );
}

Hübsch, jetzt gehen die Farben vom linken zum rechten Rand des Elements über!

Diese to-Syntax funktioniert auch für Ecken. Wenn Sie beispielsweise möchten, dass die Achse des Verlaufs in der unteren linken Ecke beginnt und zur oberen rechten Ecke verläuft, können Sie to top right schreiben.

.gradient {
  background-image:
    linear-gradient(
      to top right,
      #ff8a00, #e52e71
    );
}

Wäre die Box ein perfektes Quadrat, entspräche der Winkel des Verlaufs 45deg. Da sie es nicht ist, tut er das nicht. Wenn Sie sicherstellen möchten, dass es exakt 45deg sind, können Sie den genauen Winkel angeben und dabei einfach das to aus der Syntax weglassen.

.gradient {
  background-image:
    linear-gradient(
      45deg, 
      #ff8a00, #e52e71
    );
}

Wir sind nicht auf nur zwei Farben beschränkt! Tatsächlich können wir so viele durch Kommas getrennte Farben verwenden, wie wir möchten. Hier sind vier:

.gradient {
  background-image:
    linear-gradient(
      to right, 
      red, 
      #f06d06, 
      rgb(255, 255, 0), 
      green
    );
}

Die Notation radial-gradient() wird entweder für die Eigenschaft background oder background-image in CSS verwendet. Das ergibt absolut Sinn, wenn wir bedenken, dass Verläufe im Grunde CSS-Methoden sind, um Bilder zu erstellen, die wir sonst in einer Bildbearbeitungssoftware erstellen und ohnehin einer background-Eigenschaft zuweisen würden.

Die offizielle Syntax lautet wie folgt:

radial-gradient(
  [ <ending-shape> || <size> ]? [ at <position> ]? ,
  <color-stop-list>
);

Es könnte hilfreich sein, dies in einfaches Deutsch zu übersetzen:

Hey, Element! Zeichne einen radialen Verlauf in einer bestimmten Form mit einer bestimmten Größe, der sich an diesen Positionen befindet. Oh, und sorge dafür, dass er mit dieser Farbe beginnt und bei dieser Farbe stoppt.

Die radial-gradient-Notation akzeptiert die folgenden Werte:

• shape: Bestimmt die Form, der der Verlauf folgt, wenn er von einer Farbe zur nächsten nach außen übergeht. Da wir von radialen Verläufen sprechen, sind die Formen auf kreisförmige Geometrien beschränkt. Wir können diesen Wert weglassen, und die Notation misst die Seitenlängen des Elements, um zu bestimmen, welcher Wert besser zur Situation passt. Zum Beispiel wäre ein Element, das ein perfektes Quadrat ist, ideal für circle, während alles Rechteckige prädestiniert für ellipse ist.
  • circle (Kreis)
  • ellipse (Ellipse)
• size: Beeinflusst die Endform des Verlaufs, indem der shape-Wert übernommen wird und angewiesen wird, wo der Verlauf basierend auf dem Zentrum der Form enden soll. Dies kann durch einen Namen oder ein exaktes Längenmaß ausgedrückt werden.
  • closest-side: Der Verlauf endet an der Seite, die dem Zentrum der Form am nächsten liegt. Wenn zwei Seiten dieses Kriterium erfüllen, wird er gleichmäßig verteilt.
  • farthest-side (Standard): Das Gegenteil von closest-side; hier endet der Verlauf an der Seite, die am weitesten vom Zentrum der Form entfernt ist.
  • closest-corner: Der Verlauf endet an der Ecke, die dem Zentrum der Form am nächsten liegt.
  • farthest-corner: Das Gegenteil von closest-corner; der Verlauf endet an der Ecke, die am weitesten vom Zentrum der Form entfernt ist.
  • radius: Wir können einen numerischen Wert angeben, der als Radius des Kreises dient. Dieser muss in positiven Pixeln oder relativen Einheiten angegeben werden. Leider sind keine negativen Einheiten oder Prozentsätze erlaubt, da ein negativer Kreis ein Vakuum wäre und Prozentsätze sich auf eine beliebige Anzahl von umgebenden Werten beziehen könnten.
    • oder Prozentsatz: Ein zweiter numerischer Wert kann angegeben werden, um die explizite Größe einer Ellipse (aber nicht eines Kreises) zu deklarieren. Auch hier sind negative Werte tabu, aber Prozentsätze sind zulässig, da sich die Größe auf die Box des Verlaufs und nicht auf das Element bezieht.
• position: Dies funktioniert sehr ähnlich wie bei background-position. Das bedeutet, top, right, left und center funktionieren hier alle, ebenso wie Kombinationen aus zwei benannten Werten (z. B. top center). Wir können auch eine exakte Position mit einem numerischen Wert (einschließlich Prozentsätzen) angeben, die sich alle auf die Begrenzungsbox des Elements beziehen. Standard ist center center.
• color-stop: Dies sind Farbwerte, die den Verlauf definieren. Jeder Farbwert wird hier akzeptiert, einschließlich Hex, Farbnamen, RGB und HSL.

So sieht das in seiner einfachsten Form aus. Beachten Sie, dass wir die Werte für shape, size, position oder color-stop nicht deklarieren. Diese werden standardmäßig so gesetzt, dass der Verlauf genau in der Mitte des Elements platziert wird und gleichmäßig zwischen den deklarierten Farbwerten übergeht.

.gradient {
  background-image:
    radial-gradient(
      #ff8a00,
      #e52e71
    );
}

Suchen Sie nach weiteren Beispielen für radiale Verläufe? Patrick Brosset hat viele davon in seiner tiefgehenden Analyse radialer Verläufe.

Sehen Sie, wie der Verlauf in den obigen Beispielen annimmt, dass die shape eine ellipse ist? Das liegt daran, dass das Element selbst kein perfektes Quadrat ist. In diesem Fall hätte er stattdessen einen circle angenommen. Ziemlich schlau! Hier ist, was passieren würde, wenn wir circle explizit als shape-Wert deklariert hätten:

.gradient {
  background-image:
    radial-gradient(
      circle,
      #ff8a00,
      #e52e71
    );
}

Beachten Sie, dass der Verlauf in den Demos kreisförmig war und bis zur am weitesten entfernten Kante in die Endfarbe überging. Wir können den Wert position explizit deklarieren, um sicherzustellen, dass der Übergang stattdessen an der „nächsten Seite“ (closest-side) der shape endet, etwa so:

.gradient {
  background-image:
    radial-gradient(
      circle closest-side,
      #ff8a00,
      #e52e71
    );
}

Die möglichen Werte hierfür sind: closest-corner, closest-side, farthest-corner und farthest-side. Sie können es sich so vorstellen: „Ich möchte, dass dieser radiale Verlauf vom Mittelpunkt bis zu [welcher Seite auch immer] verblasst“, und alles andere füllt sich entsprechend auf.

Ein radialer Verlauf muss auch nicht im standardmäßigen Zentrum beginnen. Er kann einen bestimmten Punkt angeben, indem at als Teil des ersten Parameters verwendet wird, zum Beispiel:

.gradient {
  background-image:
    radial-gradient(
      circle at top right,
      #ff8a00,
      #e52e71
    );
}

Die Syntax des konischen Verlaufs ist in einfachem Deutsch leichter zu verstehen:

Erstelle einen conic-gradient, der sich an [einem bestimmten Punkt] befindet, der mit [einer Farbe] bei einem bestimmten Winkel beginnt und mit [einer anderen Farbe] bei [einem bestimmten Winkel] endet.

Dies ist die offizielle Syntax:

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

Auf der einfachsten Ebene sieht es so aus:

.gradient {
  background-image:
    conic-gradient(
      #ff8a00, #e52e71
    );
}

…wobei davon ausgegangen wird, dass der Ort des Verlaufs genau in der Mitte des Elements beginnt (50% 50%) und gleichmäßig zwischen den beiden Farbwerten verteilt ist.

Wir hätten dies auf verschiedene andere Arten schreiben können, die alle gültig sind:

.gradient {
  /* Original example */
  background-image: conic-gradient(#ff8a00, #e52e71);
  /* Explicitly state the location center point */
  background-image: conic-gradient(at 50% 50%, #ff8a00, #e52e71);
  /* Explicitly state the angle of the start color */
  background-image: conic-gradient(from 0deg, #ff8a00, #e52e71);
  /* Explicitly state the angle of the start color and center point location */
  background-image: conic-gradient(from 0deg at center, #ff8a00, #e52e71);
  /* Explicitly state the angles of both colors as percentages instead of degrees */
  background-image: conic-gradient(#ff8a00 0%, #ff8a00, #e52e71);
  /* Explicitly state the angle of the starting color in degrees and the ending color by a full turn of the circle */
  background-image: conic-gradient(#ff8a00 0deg, #e52e71 1turn);
}

Wenn wir keinen Winkel für die Farben angeben, wird davon ausgegangen, dass der Verlauf gleichmäßig zwischen den Farben aufgeteilt ist, beginnend bei 0deg und endend bei 360deg. Dies erzeugt einen „harten Stopp“, bei dem die Farben bei 0deg und 360deg direkt aneinandertreffen. Wenn wir einen dritten Wert einführen, erzeugt dies einen weicheren Verlauf und wir erhalten diese coole Kegelperspektive.

.gradient {
  background-image:
    conic-gradient(
      #ff8a00,
      #e52e71,
      #ff8a00
    );
}

Wir können mit konischen Verläufen viel Spaß haben. Zum Beispiel können wir sie verwenden, um das gleiche Muster zu erstellen, das man in einem Farbwähler oder dem berüchtigten Mac-Warterädchen (Beachball) sieht:

.conic-gradient {
  background-image:
    conic-gradient(
      red,
      yellow,
      lime,
      aqua,
      blue,
      magenta,
      red
    );
}

Oder versuchen wir es mit einem einfachen Tortendiagramm, indem wir harte Stopps zwischen drei Farbwerten hinzufügen:

.gradient {
  background-image:
    conic-gradient(
      lime 40%,
      yellow 0 70%,
      red 0
    );
}

Es gibt drei Arten von wiederholenden Verläufen, die alle drei derzeit in der offiziellen Spezifikation unterstützt werden (und einer, der sich im aktuellen Arbeitsentwurf befindet). Die Syntax für jede Notation ist die gleiche wie für den zugehörigen Verlaufstyp. Zum Beispiel folgt repeating-linear-gradient() der gleichen Syntax wie linear-gradient().

Hier ist ein sich wiederholender linearer Verlauf, der alle 10 Pixel in einem 45-Grad-Winkel zwischen zwei Farben wechselt:

.gradient {
  background-image:
    repeating-linear-gradient(
      45deg,
      #ff8a00,
      #ff8a00 10px,
      #e52e71 10px,
      #e52e71 20px
    );
}

Dasselbe können wir auch mit einem radialen Verlauf machen. Der Unterschied? Abgesehen von der Notation selbst definieren wir hier die Form und den Startpunkt.

.gradient {
  background-image:
    repeating-radial-gradient(
      circle at 0 0,
      #ff8a00,
      #ff8a00 10px,
      #e52e71 10px,
      #e52e71 20px
    );
}

Konische Verläufe unterscheiden sich kaum! Auch hier liegt der große Unterschied zwischen radialen und konischen Verläufen darin, dass konische Farben um das Element herum übergehen, während Farben in radialen Verläufen vom Zentrum der Verlaufsquelle aus übergehen.

.gradient {
  background-image:
    repeating-conic-gradient(
      from 0deg, 
      #ff8a00 0deg 30deg, 
      #e52e71 30deg 60deg
  );
}

Dies gilt speziell für lineare und radiale wiederholende Verläufe.

Wir haben gesehen, wie Verläufe interessante Muster erzeugen können, als wir uns wiederholende Verläufe angesehen haben. Aber es gibt noch viele andere Muster, die wir erstellen können! Zum Beispiel Schachbrettmuster.

Wir können auch ein sich wiederholendes Winkelmuster (Chevron) erstellen.

Chris hat ein Snippet, das ein Karopapier-Muster erzeugt.

Diese Muster sind im Web gut dokumentiert, aber schauen Sie sich Lea Verous CSS-Verlaufsmuster-Galerie für einige wirklich verblüffende Beispiele an.

Wir können Rahmen (Borders) aus Verläufen erstellen!

Wir können sogar den Mustertrick für einen lustigen Rahmeneffekt nutzen.

Oder, hey, wir können harte Stopps für einen Effekt mit überlappenden Inhalten einsetzen.

Wir können background-position verwenden, um den Anschein zu erwecken, dass sich der Übergang zwischen den Farben in einem Verlauf bewegt.

Aber wie bei jeder Animation sollten Sie auf die Barrierefreiheit achten, insbesondere für Personen, die empfindlich auf Bewegungen reagieren. Weitere Informationen finden Sie im Abschnitt Barrierefreiheit.

Schauen Sie sich diese Demo von Marty an! Dies ist eine super clevere Verwendung von radialen Verläufen, um Sonnenlicht basierend auf der Position des Mauszeigers zu simulieren.