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

cssselector {
  background: radial-gradient([vorm type positie], kleur1 grootte1, kleur2 grootte2...);
}

Waarden

Waarden voor type

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:

html<div id="elem"></div>

css#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:

html<div id="elem"></div>

css#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:

html<div id="elem"></div>

css#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:

html<div id="elem"></div>

css#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:

html<div id="elem"></div>

css#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:

html<div id="elem"></div>

css#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:

html<div id="elem"></div>

css#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:

html<div id="elem"></div>

css#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:

html<div id="elem"></div>

css#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:

html<div id="elem"></div>

css#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:

html<div id="elem"></div>

css#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:

html<div id="elem"></div>

css#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:

html<div id="elem"></div>

css#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:

html<div id="elem"></div>

css#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:

html<div id="elem"></div>

css#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:

html<div id="elem"></div>

css#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:

html<div id="elem"></div>

css#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:

html<div id="elem"></div>

css#elem {
  background: radial-gradient(ellipse closest-side at 60px 80px, red, blue);
  width: 300px;
  height: 200px;
}

Результат:

Zie ook