De radial-gradient functie
De functie radial-gradient definieert een radiaal
verloop. Deze functie wordt toegepast op eigenschappen die
een achtergrondafbeelding instellen: background,
background-image
of een randafbeelding: border-image,
background-image-source.
Syntaxis
selector {
background: radial-gradient([vorm type positie], kleur1 grootte1, kleur2 grootte2...);
}
Waarden
| Waarde | Beschrijving |
|---|---|
| vorm |
Geaccepteerde waarden:
ellipse elliptisch verloop (standaard),
circle cirkelvormig verloop.
|
| type |
Bepaalt de uitrekking van het verloop.
Geaccepteerde waarden:
closest-side, closest-corner,
farthest-side, farthest-corner.
|
| positie |
Na het sleutelwoord at
wordt een positie opgegeven in alle eenheden voor grootte
of met behulp van sleutelwoorden top, bottom,
left, right, center
in verschillende combinaties.
|
| kleur1 | Startkleur van het verloop in alle eenheden voor kleur. |
| kleur2 | Eindkleur van het verloop in alle eenheden voor kleur. |
| grootte | Bepaalt de omvang van een specifieke kleur van het verloop in alle eenheden voor grootte. |
Waarden voor type
| Waarde | Beschrijving |
|---|---|
closest-side |
De vorm van het verloop valt samen met de dichtstbijzijnde zijde van het blok. |
closest-corner |
De vorm van het verloop wordt berekend op basis van informatie over de afstand tot de dichtstbijzijnde hoek van het blok. |
farthest-side |
Het verloop strekt zich uit tot de verste zijde van het blok. |
farthest-corner |
De vorm van het verloop wordt berekend op basis van informatie over de afstand tot de verste hoek van het blok. |
Opmerking
Type en vorm kunnen worden omgewisseld, maar de positie moet aan het einde van de eerste parameter staan. Het type verloop en de grootte werken niet samen (logisch, ze conflicteren immers). De grootte wint.
Voorbeeld . De eenvoudigste variant
Laten we gewoon een start- en eindkleur instellen:
<div id="elem"></div>
#elem {
background: radial-gradient(red, blue);
width: 200px;
height: 200px;
}
:
Voorbeeld . We voegen positie toe
Laten we de positie van het centrum instellen:
30px - inspringing links, 100px - inspringing boven:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30px 100px, red, blue);
width: 200px;
height: 200px;
}
:
Voorbeeld . Positie in percentages
Laten we de positie van het centrum in percentages instellen:
30% - inspringing links, 50% - inspringing boven:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30% 50%, red, blue);
width: 200px;
height: 200px;
}
:
Voorbeeld . Positie met sleutelwoord
Je kunt sleutelwoorden gebruiken
top, bottom, left,
right, center in verschillende
combinaties. Laten we het verloop bijvoorbeeld
rechts in het midden plaatsen:
<div id="elem"></div>
#elem {
background: radial-gradient(at right center, red, blue);
width: 200px;
height: 200px;
}
:
Voorbeeld . Grootte van het verloop
In dit geval werkt het verloop als volgt:
van 0px tot 20px zal er pure
rode kleur zijn, van 20px tot 60px - verloop
van rood naar blauw, na 60px - pure
blauwe kleur:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 60px);
width: 200px;
height: 200px;
}
:
Voorbeeld . Meerdere kleuren achter elkaar
In dit geval werkt het verloop als volgt:
van 0px tot 20px zal er pure
rode kleur zijn, van 20px tot 40px
zal er pure blauwe kleur zijn, van 40px
tot 60px - verloop van blauw naar groen,
na 60px - pure groene kleur:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 20px, blue 40px, green 60px);
width: 200px;
height: 200px;
}
:
Voorbeeld . Grootte + positie
Laten we tegelijkertijd de grootte instellen voor verschillende kleuren en de positie van het centrum van het verloop:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30px 60px, red 20px, blue 60px);
width: 200px;
height: 200px;
}
:
Voorbeeld . Vorm van het verloop
De vorm van het verloop wordt ingesteld door de eerste parameter
en kan 2 waarden aannemen: circle
(cirkelvormig verloop) of ellipse (elliptisch
verloop, standaard). Waarom hebben we tot nu toe dan
geen elliptische verlopen gezien, hoewel
het standaard is ingesteld? Omdat de vorm van de blokken
vierkant was. Als we de vorm veranderen
naar rechthoekig, dan zien we een elliptisch
verloop:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
Voorbeeld . Cirkelvormig verloop
Laten we een cirkelvormig verloop maken in een rechthoekig
blok. Hiervoor stellen we de vorm van het verloop in
met het sleutelwoord
circle:
<div id="elem"></div>
#elem {
background: radial-gradient(circle, red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
Voorbeeld . We voegen positie toe
Laten we aan de vorige code ook nog de positie van het verloop toevoegen:
<div id="elem"></div>
#elem {
background: radial-gradient(circle at 30px 60px, red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
Voorbeeld . Type farthest-corner + circle
De vorm van het verloop wordt berekend op basis van informatie over de afstand tot de verste hoek van het blok:
<div id="elem"></div>
#elem {
background: radial-gradient(circle farthest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Voorbeeld . Type farthest-corner + ellipse
De vorm van het verloop wordt berekend op basis van informatie over de afstand tot de verste hoek van het blok:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse farthest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Voorbeeld . Type farthest-side + circle
Het verloop strekt zich uit tot de verste zijde van het blok:
<div id="elem"></div>
#elem {
background: radial-gradient(circle farthest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Voorbeeld . Type farthest-side + ellipse
Het verloop strekt zich uit tot de verste zijde van het blok:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse farthest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Voorbeeld . Type closest-corner + circle
De vorm van het verloop wordt berekend op basis van informatie over de afstand tot de dichtstbijzijnde hoek van het blok:
<div id="elem"></div>
#elem {
background: radial-gradient(circle closest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Voorbeeld . Type closest-corner + ellipse
De vorm van het verloop wordt berekend op basis van informatie over de afstand tot de dichtstbijzijnde hoek van het blok:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse closest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Voorbeeld . Type closest-side + circle
De vorm van het verloop valt samen met de dichtstbijzijnde zijde van het blok:
<div id="elem"></div>
#elem {
background: radial-gradient(circle closest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Voorbeeld . Type closest-side + ellipse
De vorm van het verloop valt samen met de dichtstbijzijnde zijde van het blok:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse closest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Zie ook
-
de functie
linear-gradient,
die een lineair verloop creëert -
de functie
repeating-linear-gradient,
die een herhalend lineair verloop creëert -
de functie
repeating-radial-gradient,
die een herhalend radiaal verloop creëert
