repeating-conic-gradient()

<angle>

Wird durch das Schlüsselwort from gefolgt und nimmt einen Winkel als Wert an, der die Rotation des Verlaufs im Uhrzeigersinn definiert.

<position>

Verwendet dieselbe Länge, Reihenfolge und Schlüsselwortwerte wie die background-position-Eigenschaft. Die Position definiert den Mittelpunkt des Verlaufs. Wenn sie weggelassen wird, ist der Standardwert center, was bedeutet, dass der Verlauf zentriert wird.

<angular-color-stop>

Ein <color> Wert eines Farb-Stopps, gefolgt von einer oder zwei optionalen Stopp-Positionen (ein <angle> entlang der Umfassungsachse des Verlaufs). Der letzte Farb-Stopp minus der Winkel des ersten Farb-Stopps definiert die Größe des sich wiederholenden Verlaufs.

<color-hint>

Ein Interpolation Hinweis, der definiert, wie der Verlauf zwischen benachbarten Farbstopps fortschreitet. Die Länge definiert den Punkt zwischen zwei Farbstopps, an dem der Verlauf die Mitte des Farbübergangs erreichen sollte. Wenn weggelassen, ist der Übergangspunkt die Mitte zwischen zwei Farbstopps.

Beispiel für wiederholende konische Verläufe sind z.B. Strahlenmuster. Das Ergebnis der repeating-conic-gradient() Funktion ist ein Objekt des Datentyps <gradient>, welches eine spezielle Art von <image> ist.

Wenn weder die ersten noch die letzten Farbstopps einen Farbwinkel größer als 0° oder kleiner als 360° haben, wird der konische Verlauf nicht wiederholt.

Wie jeder Verlauf hat auch ein sich wiederholender konischer Verlauf keine intrinsischen Dimensionen; d.h. er hat keine natürliche oder bevorzugte Größe, noch ein bevorzugtes Verhältnis. Seine konkrete Größe entspricht der Größe des Elements, auf das er angewendet wird, oder der Größe, die das <image> hat, wenn diese anders als die des Elements festgelegt ist.

Da <gradient>s zum <image>-Datentyp gehören, können sie nur dort verwendet werden, wo <image>s verwendet werden können. Aus diesem Grund funktioniert repeating-conic-gradient() nicht auf background-color und anderen Eigenschaften, die den <color> Datentyp verwenden.

Die Syntax von repeating-conic-gradient ist ähnlich der von conic-gradient() und repeating-radial-gradient(). Wie beim nicht-wiederholenden konischen Verlauf werden die Farb-Stopps um einen Verlaufsbogen platziert. Wie beim wiederholenden radialen Verlauf ist die Größe des sich wiederholenden Abschnitts der erste Farb-Stopp abzüglich des Winkels des letzten Farb-Stopps.

Die oben genannten Verläufe sind definiert als jeweils ein Drittel blau, ein Drittel rot und ein Drittel gelb.

repeating-conic-gradient(from 0deg, red 0deg 30deg, yellow 30deg 60deg, blue 60deg 90deg);

repeating-radial-gradient(red 0 8%, yellow 8% 16%, blue 16% 24%);

conic-gradient(red 120deg, yellow 120deg 240deg, blue 240deg);

radial-gradient(red 33%, yellow 33% 66%, blue 66%);

Damit ein wiederholender Verlauf sich wiederholt, definieren wir die ersten und letzten Farbstopps. Wie bei nicht-wiederholenden Verläufen wird angenommen, dass die ersten und letzten Farbstopps 0 und entweder 100% oder 360° sind, wenn nicht explizit deklariert. Wenn diese Werte als Standard verwendet werden, ist der wiederkehrende Bogen 360 Grad und wiederholt sich daher nicht.

Wie der nicht-wiederkehrende konische Verlauf werden die Farbstopps um einen Verlaufsbogen herum platziert — den Umfang eines Kreises — und nicht auf der von der Mitte des Verlaufs ausgehenden Verlaufsachse. Die Farben gehen scheinbar vom Zentrum eines Kreises aus, beginnend oben, wenn kein from <angle> deklariert ist, und im Uhrzeigersinn für die Größe des Winkels, der die Differenz zwischen dem größten und dem kleinsten Farbwinkel ist, und wiederholen sich dann.

Ein sich wiederholender konischer Verlauf wird angegeben, indem ein Rotationswinkel, das Zentrum des Verlaufs und dann eine Liste von Farbstopps spezifiziert werden. Wie bei nicht-wiederkehrenden konischen Verläufen werden die Farb-Stopps eines sich wiederholenden konischen Verlaufs mit einem <angle> spezifiziert. Einheiten umfassen deg für Grad, grad für Gradianten, rad für Radianten und turn für Umdrehungen. In einem Kreis gibt es 360 Grad, 400 Gradianen, 2π Radianten und 1 Umdrehung. Browser, die sich wiederholende konische Verläufe unterstützen, akzeptieren auch Prozentwerte, wobei 100% 360 Grad entsprechen, aber dies ist nicht in der Spezifikation enthalten.

Die Syntax für radiale und konische Verläufe ermöglicht es, das Zentrum des Verlaufs an jeder Stelle innerhalb oder sogar außerhalb des Bildes zu positionieren. Die Werte für die Position sind ähnlich der Syntax für Werte mit zwei Werten bei background-position.

Der Verlaufsbogen ist Teil des Umfangs des Verlaufs. 0 Grad ist Norden oder 12:00 Uhr. Die Farben des Verlaufs werden durch die gewinkelten Farb-Stops, ihre Startpunkte, Endpunkte und dazwischen sowie optionale gewinkelte Farb-Stopp-Punkte bestimmt. Die Übergänge zwischen den Farben können mit Farbindikationen zwischen benachbarten Farben-Farb-Stops verändert werden.

Anpassung von Verläufen

Durch Hinzufügen weiterer gewinkelter Farb-Stopp-Punkte auf dem Verlaufsbogen können Sie einen hochgradig angepassten Übergang zwischen mehreren Farben erstellen. Die Position eines Farb-Stopps kann explizit durch ein <angle> angegeben werden. Wenn Sie die Position eines Farb-Stopps nicht angeben, wird dieser auf halbem Weg zwischen dem vorhergehenden und dem folgenden platziert. Wie das nicht-wiederkehrende Verlaufsgegenstück, wenn Sie keinen Winkel für den ersten oder letzten Farb-Stopp angeben, werden die Werte 0° und 360° sein. Wenn Sie keinen Winkel für beide angeben, erhalten Sie einen nicht-wiederkehrenden konischen Verlauf. Wenn Sie einen Winkel ungleich 0 oder 360 Grad für den ersten bzw. letzten angeben, wiederholt sich der Verlauf basierend auf diesem Wert. Wenn Sie zum Beispiel keinen Winkel für die erste Farbe angeben und 10% für den letzten Farb-Stopp deklarieren, wird der Bogen 10 Mal wiederholt. Vielmehr ist der Startpunkt der erste deklarierte Farb-Stopp, und der letzte Farb-Stopp ist der letzte deklarierte Farb-Stopp-Winkel. Die folgenden zwei Verläufe sind gleichwertig:

repeating-conic-gradient(red, orange, yellow, green, blue 50%);
repeating-conic-gradient(from -45deg, red 45deg, orange, yellow, green, blue 225deg)

Standardmäßig gleichen sich die Farben sanft von der Farbe eines Farb-Stopps bis zur Farbe des nachfolgenden Farb-Stops aus, wobei der Mittelwert zwischen den Farben der Mittelpunkt zwischen dem Farbübergang ist. Sie können diesen Übergangspunkt an einen beliebigen Punkt zwischen zwei Farb-Stopps verschieben, indem Sie einen Farbhinweis hinzufügen, der angibt, wo der Mittelpunkt des Farbübergangs sein sollte.

Wenn zwei oder mehr Farb-Stops an derselben Stelle liegen, wird der Übergang eine harte Linie zwischen den ersten und letzten an dieser Stelle deklarierten Farben sein.

Während Sie verschiedene Winkeleinheiten mischen und abgleichen können, sollten Sie dies nicht tun. Es macht CSS schwer lesbar.

<repeating-conic-gradient()> = 
  repeating-conic-gradient( [ <conic-gradient-syntax> ] )  

<conic-gradient-syntax> = 
  [ [ [ from <angle> ]? [ at <position> ]? ] || <color-interpolation-method> ]? , <angular-color-stop-list>  

<position> = 
  [ left | center | right | top | bottom | <length-percentage> ]  |
  [ left | center | right ] && [ top | center | bottom ]  |
  [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]  |
  [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]  

<color-interpolation-method> = 
  in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? ]  

<angular-color-stop-list> = 
  <angular-color-stop> , [ <angular-color-hint>? , <angular-color-stop> ]#?  

<length-percentage> = 
  <length>      |
  <percentage>  

<rectangular-color-space> = 
  srgb          |
  srgb-linear   |
  display-p3    |
  a98-rgb       |
  prophoto-rgb  |
  rec2020       |
  lab           |
  oklab         |
  xyz           |
  xyz-d50       |
  xyz-d65       

<polar-color-space> = 
  hsl    |
  hwb    |
  lch    |
  oklch  

<hue-interpolation-method> = 
  [ shorter | longer | increasing | decreasing ] hue  

<angular-color-stop> = 
  <color> <color-stop-angle>?  

<angular-color-hint> = 
  <angle-percentage>  

<color-stop-angle> = 
  <angle-percentage>{1,2}  

<angle-percentage> = 
  <angle>       |
  <percentage>  

Browser stellen keine besonderen Informationen zu Hintergrundbildern zur Verfügung, um unterstützenden Technologien zu helfen. Dies ist vor allem für Bildschirmleser wichtig, da ein Sprachsynthesizer seine Anwesenheit nicht ankündigt und daher nichts an seine Nutzer weitergibt. Auch wenn es möglich ist, mit konischen Verläufen Kreisdiagramme, Schachbrettmuster und andere Effekte zu erstellen, bieten CSS-Bilder keine native Möglichkeit, alternativen Text zuzuweisen, und daher wird das durch den konischen Verlauf dargestellte Bild für Benutzer von Bildschirmlesern unzugänglich sein. Wenn das Bild Informationen enthält, die für das Verständnis des Gesamtzwecks der Seite entscheidend sind, ist es besser, es semantisch im Dokument zu beschreiben.

• MDN Understanding WCAG, Guideline 1.1 Erklärungen
• Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0

Dieser Verlauf wiederholt sich 18 Mal, aber da wir nur die rechte Hälfte sehen, sehen wir nur 9 Wiederholungen.

div {
  width: 200px;
  height: 200px;
}

<div></div>

div {
  background: repeating-conic-gradient(
    from 3deg at 25% 25%,
    green,
    blue 2deg 5deg,
    green,
    yellow 15deg 18deg,
    green 20deg
  );
}

<div class="shorter"></div>
<div class="longer"></div>

div {
  display: inline-block;
  margin-top: 1rem;
  width: 45vw;
  height: 80vh;
}

.shorter::before {
  content: "shorter hue";
  display: block;
  margin-top: -1rem;
}

.longer::before {
  content: "longer hue";
  display: block;
  margin-top: -1rem;
}

In diesem Beispiel für Interpolation wird das hsl Farbsystem verwendet und der Farbton wird interpoliert.

.shorter {
  background-image: repeating-conic-gradient(
    in hsl shorter hue,
    red,
    blue 180deg
  );
}

.longer {
  background-image: repeating-conic-gradient(
    in hsl longer hue,
    red,
    blue 180deg
  );
}

Das Feld links verwendet kürzere Interpolation, was bedeutet, dass die Farbe direkt von rot zu blau übergeht, indem der kürzere Bogen auf dem Farbkreis verwendet wird. Das Feld rechts verwendet längere Interpolation, was bedeutet, dass die Farbe von rot nach blau geht, indem der längere Bogen genutzt wird, der durch grüne, gelbe und orange Farben führt.

Bitte sehen Sie Verwendung von CSS-Verläufen für weitere Beispiele.

• Verwendung von CSS-Verläufen
• Andere Verlaufsfunktionen: conic-gradient(), linear-gradient(), repeating-linear-gradient(), radial-gradient(), repeating-radial-gradient()
• <hue-interpolation-method>
• <color-interpolation-method>
• <image>
• image()
• element()
• image-set()
• cross-fade()