Ursprung des Verlaufs
Die elementare Variante ist der radiale Verlauf mit dem Mittelpunkt im Zentrum des Elements. Wenn der Block nicht quadratisch ist, entsteht ein elipsenförmiger Verlauf, in einem quadratischen Block entsteht ein kreisförmiger Verlauf.
.circ {
background-image: radial-gradient(
hsl(200,10%,50%) 29%,
hsl(200,10%,60%) 30%,
hsl(200,10%,90%) 50%,
hsl(200,10%,60%) 70%,
hsl(200,10%,90%) 73%
);
}
Eine Positionsangabe verschiebt den Verlauf und die beiden Schlüsselwörter circle und ellipse erzeugen einen kreis- bzw. ellipsenförmigen Verlauf, auch wenn der umfassende Block nicht quadratisch oder rechteckig ist.
background-image: radial-gradient(
shape at top left,
▲ ▲ ▲
| └────┴── Position von oben links
|
└── circle oder ellipse
color1 0,
color2 x%,
color3 100%);
- Color Stops können in % angegeben werden – dann endet der Kreisverlauf am Rand des Elements.
- Mit absoluten Werten (px, em, …) endet der Verlauf mit dem letzten Color Stop oder am Rand des Elements.
radial gradient – Schlüsselwörter (neue Syntax)
Die Schlüsselwörter des radialen Verlaufs und sind Typ (circle, ellipse), Richtung (closest-side, farthest-side, closest-corner, farthest-corner) und die Position den Zentrums innerhalb des Blocks. Die Color Stops werden in gleicher Weise angegeben wie beim linearen Verlauf.
.grad {
background-image:
radial-gradient(
circle at 200px 50px,
hsl(200,10%,50%) 29%,
hsl(200,10%,60%) 30%,
hsl(200,10%,90%) 50%,
hsl(200,10%,60%) 70%,
hsl(200,10%,90%) 73% );
- closest-side
- setzt einen Verlauf, der von der Mitte aus genau auf die am nächsten liegende Seite trifft.
- closest-corner
- setzt einen Verlauf, der von der Mitte aus genau die nächste Ecke des Blocks trifft.
- farthest-side
- setzt einen Verlauf, der von der Mitte aus genau die am weitesten entfernte Seite des Blocks trifft.
- farthest-corner (default)
- setzt einen Verlauf, der von der Mitte aus genau die am weitesten entfernte Ecke des Blocks trifft.
repeating radial gradient
repeating-radial-gradient erzeugt Wiederholungen für Zielscheiben und Wellen.
.repeating {
background-image:
repeating-radial-gradient(circle at center,
powderblue,
powderblue 10px,
cadetblue 10px,
cadetblue 20px);
}
.welle {
background-image:
repeating-radial-gradient(circle at center,
powderblue 20px,
cadetblue 40px,
powderblue 50px);
}
Wenn die nächste Farbe an der Position beginnt, an der die vorangehende Farbe endet, entsteht ein harter Übergang im Verlauf. So entsteht die Zielscheibe.
Ausgefallene Verläufe
Bei Rettungsringen und Schlauchbooten muss es nicht bleiben. Verläufe erzeugen auch Phantasiemuster. Bei Werner Zenk gibt es seitenweise Variationen.
Konischer Verlauf
CSS hat die Syntax für den konischen Verlauf nachgeliefert, CSS conic-gradient wird heute von allen modernen Browsern unterstützt.
Linearer Verlauf, radialer Verlauf, konischer Verlauf
Syntax radial gradient – alte Browser
Für (sehr viel) ältere Browser, die radial-gradient bereits unterstützen, aber noch in der alten Syntax, muss noch ein Browser-Präfix verwendet werden. Die alte Syntax benutzt für die Positionierung des kreisförmigen Verlaufs dieselben Werte wie für die Position eines Hintergrundbilds.
Die Schlüsselwörter waren dieselben wie in der neuen Syntax, aber die Werte wurden in anderer Reihenfolge aufgelistet.
background-image: -webkit-radial-gradient(150px 0,ellipse farthest-corner, white 30%,teal 70%); background-image: -moz-radial-gradient(150px 0,ellipse farthest-corner, white 30%,teal 70%); background-image: -ms-radial-gradient(150px 0,ellipse farthest-corner, white 30%,teal 70%); background-image: -o-radial-gradient(150px 0,ellipse farthest-corner, white 30%,teal 70%); background-image: radial-gradient(150px 0,ellipse farthest-corner, white 30%,teal 70%);
