CSS radiale verlopen
CSS radiale verlopen
Een radiale gradiënt wordt gedefinieerd door zijn middelpunt.
Om een radiaal verloop te maken, moet u ook minimaal twee kleurstops definiëren.
Syntaxis
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
De vorm is standaard een ellips, de grootte is de verste hoek en de positie is het midden.
Radiaal verloop - gelijkmatig verdeelde kleurstops (dit is standaard)
Het volgende voorbeeld toont een radiaal verloop met gelijkmatig verdeelde kleurstops:
Voorbeeld
#grad {
background-image: radial-gradient(red, yellow, green);
}
Radiaal verloop - kleurstops op verschillende afstanden
Het volgende voorbeeld toont een radiaal verloop met kleurstops op verschillende afstanden:
Voorbeeld
#grad {
background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}
Vorm instellen
De vormparameter definieert de vorm. Het kan de waardecirkel of ellips aannemen. De standaardwaarde is ellips.
Het volgende voorbeeld toont een radiaal verloop met de vorm van een cirkel:
Voorbeeld
#grad {
background-image: radial-gradient(circle, red, yellow, green);
}
Gebruik van trefwoorden van verschillende grootte
De parameter size definieert de grootte van het verloop. Het kan vier waarden aannemen:
- dichtstbijzijnde kant
- verste kant
- dichtstbijzijnde hoek
- verste hoek
Voorbeeld
Een radiaal verloop met zoekwoorden van verschillende grootte:
#grad1 {
background-image: radial-gradient(closest-side at 60% 55%, red, yellow,
black);
}
#grad2 {
background-image: radial-gradient(farthest-side at 60%
55%, red, yellow, black);
}
Een radiaal verloop herhalen
De functie repeating-radial-gradient() wordt gebruikt om radiale gradiënten te herhalen:
Voorbeeld
Een herhalende radiale gradiënt:
#grad {
background-image:
repeating-radial-gradient(red, yellow 10%, green 15%);
}