Radialverlauf-Rezepte

Radiale Farbverläufe sind ziemlich cool. Es ist erstaunlich, wie einfach wir damit den Hintergrund eines Elements bemalen können. Einfach ist allerdings relativ. Es ist sicherlich einfacher, als eine Grafik in einer Drittanbieter-Software erstellen zu müssen, um sie als Hintergrund zu verwenden, und die Syntax ist sehr gut erlernbar. Aber es ist auch nicht so einfach zu merken, wenn man sie nicht oft verwendet, und sie ist komplizierter als linear-gradient().

Ich habe mir gedacht, ich stelle eine Seite mit Referenzbeispielen zusammen, damit du den Starter-Code schnell findest, wenn du weißt, was du brauchst, aber die Syntax vergessen hast.

Zentrierte Ausbrüche

Die einfachste mögliche Syntax platziert die erste Farbe in der Mitte des Elements und die zweite Farbe außen, und das war's.

Sieh dir den Pen Radial Gradient – Centered von Chris Coyier (@chriscoyier) auf CodePen an.

Das dehnt den Farbverlauf jedoch zu einer Ellipse auf einem nicht-quadratischen Element aus. Wenn dir das nicht gefällt, kannst du die Form auf einen Kreis erzwingen, wie das zweite Beispiel hier zeigt.

Sieh dir den Pen Radial Gradient – Circle vs. Ellipse von Chris Coyier (@chriscoyier) auf CodePen an.

Du kannst auch die Größe steuern, indem du buchstäblich angibst, wie groß der Kreis/die Ellipse sein soll (die letzte Farbe wird immer noch gestreckt, um das Element zu bedecken) durch

• Verwendung eines Schlüsselworts closest-side, farthest-side, closest-corner, farthest-corner
• Explizites Angeben wie radial-gradient(circle 100px, ...)
• Verwendung von Farbstopps wie radial-gradient(#56ab2f, #a8e063 150px)

Sieh dir den Pen Radial Gradient – Sizing von Chris Coyier (@chriscoyier) auf CodePen an.

Hier ist ein Teil dieser Dinge in der Anwendung

Sieh dir den Pen Usage of Radial Gradients von Chris Coyier (@chriscoyier) auf CodePen an.

Sieh dir den Pen Lit text von Chris Coyier (@chriscoyier) auf CodePen an.

Positioniert

Neben der Steuerung von Größe und Form des Farbverlaufs ist der andere große Trick, den man bei radialen Farbverläufen kennen sollte, dass man das Zentrum davon positionieren kann.

Das ist eine der Schwächen, finde ich, von Farbverlauf-Generatoren. Sie helfen dir, Farben und Farbstopps und so weiter auszuwählen, aber sie scheuen sich normalerweise vor dem Positioning-Kram.

Das Zentrum eines radialen Farbverlaufs muss nicht in der Mitte sein! Zum Beispiel kannst du das Zentrum oben links positionieren, so

.element {
  background: radial-gradient(
    at top left,
    var(--light), var(--dark) /* using variables just for fun! */
  )
}

Hier sind alle vier Ecken

Sieh dir den Pen Positioned Radial Gradients von Chris Coyier (@chriscoyier) auf CodePen an.

Du kannst auch sehr spezifisch positionieren. Hier ist ein Beispiel für einen Farbverlauf, der genau 195px vom linken Rand am unteren Rand des Elements positioniert ist. Er hat auch eine spezifische Größe, verhält sich aber ansonsten wie die Standard-Ellipse.

.element {
  background: radial-gradient(
    150px 40px at 195px bottom,
    #666, #222
  );
}

Sieh dir den Pen Specifically positioned gradient von Chris Coyier (@chriscoyier) auf CodePen an.

Eine weitere Kleinigkeit, die man wissen sollte, ist, dass man transparent in den Farbverläufen verwenden kann, um die darunterliegende Farbe durchscheinen zu lassen, wenn das nötig ist, oder teiltransparente Farben wie rgba(255, 255, 255, 0.5), um dasselbe bei einem farbigen Farbstopp zu erreichen.

Außerdem können radiale Farbverläufe mit mehreren Hintergründen verwendet werden, man kann mehrere davon auf ein einziges Element anwenden, sogar überlappend!

.element {
  background: 
    radial-gradient(
      circle at top left,
      rgba(255, 255, 255, 0.5), 
      transparent 100px
    ),
    radial-gradient(
      circle at top right,
      rgba(255, 255, 255, 0.5), 
      transparent 100px
    ),
    radial-gradient(
      at bottom left,
      rgba(255, 0, 255, 0.5), 
      transparent 400px
    ),
    radial-gradient(
      at bottom right,
      rgba(255, 100, 100, 0.5), 
      transparent 400px
    );
}

Sieh dir den Pen Multiple Gradients von Chris Coyier (@chriscoyier) auf CodePen an.

Um die Idee hervorzuheben, dass das Zentrum des Farbverlaufs überall sein kann, hier ist ein Farbverlauf, der der Maus folgt.

Sieh dir den Pen Radial Gradient Move With Mouse von Leo Sammarco (@lsammarco) auf CodePen an.

Ressourcen

Leute denken meistens über Browserunterstützung nach, und das zu Recht, aber denken Sie in diesem Fall nicht zu viel darüber nach. Wir haben ziemlich flächendeckende Unterstützung sogar ohne Präfixe.

• Es gibt auch repeating-linear-gradient() und hier geht Ana Tudor ins Detail und zeigt Anwendungsfälle.
• Brauchen Sie Farben, die gut zusammen in einem Farbverlauf passen? uiGradients ist nett.
• MDN zu radial-gradient
• Siehe unseren vollständigen Leitfaden zu allen Farbverläufen hier!

OK, tschüss!

Sieh dir den Pen CSS Sunset Sunrise von Marty Saetre (@msaetre) auf CodePen an.