CSS/Funktionen/radial-gradient()

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

{ Die radial-gradient()-Funktion legt einen radialen Farbverlauf fest.

Parameter

Die Funktion erwartet folgende Argumente:

  • eine Form (shape)
    • ellipse (Standardwert) oder circle
  • mindestens zwei „Color-Stop“-Angaben
    • Ein „Color-Stop“ besteht aus einer Farb- und einer Längenangabe und legt fest, welche Farbe an welcher Stelle des Verlaufs dargestellt werden soll.
    • Fehlen die Längenangaben, so wird die zur Verfügung stehende Breite in soviele Teile geteilt, wie Farbübergänge vorhanden sind.
    • radial-gradient(red, green, red) = radial-gradient(red 0, green 50%, red 100%)
    • Auf die Angaben 0 und 100% kann grundsätzlich verzichtet werden, ggf. ebenso auf einen ersten und letzten Color-Stop.
    • radial-gradient(red 0, green 50%, red 100%) = radial-gradient(red, green 50%, red)
    • radial-gradient(red, red 25%, green 75%, green) = radial-gradient(red 25%, green 75%)
    • scharfe Übergänge erreicht man durch die Festlegung zweier Farben an einem Ort
  • die Größe der Endform (extent-keyword)
    • closest-side, Die Endform trifft auf die der Mitte nächstgelegene Seite (für circle) oder trifft auf vertikale und horizontale Seiten (für ellipse)
    • closest-corner, Endform trifft nächste Ecke
    • farthest-side, trifft auf die der Mitte am weitesten entfernten Seite
    • farthest-corner, (Standardwert) trifft auf die am weitesten entfernte Ecke
anwendbar auf background-image
Browsersupport caniuse: css-gradients
Beispiel
 #eins {
  background-image: radial-gradient(circle closest-side at center, gold 20%, yellow 30%, dimgray 60%);
}
#fuenf {
  background-image: radial-gradient(closest-side at center 70%, gold 20%, yellow 30%, dimgray 60%);
}
 


Weblinks

Siehe auch