Funkcija radial-gradient

Funkcija radial-gradient določa radialni gradient. Ta funkcija se uporablja za lastnosti, ki določajo sliko ozadja: background, background-image ali sliko obrobe: border-image, background-image-source.

Sintaksa

cssselektor {
  background: radial-gradient([oblika tip pozicija], barva1 velikost1, barva2 velikost2...);
}

Vrednosti

Vrednosti za tip

Opomba

Tip in obliko lahko zamenjate, medtem ko mora pozicija iti na konec prvega parametra. Tip gradienta in njegova velikost ne delujeta skupaj (logično, saj si nasprotujeta). Zmaga velikost.

Primer . Najenostavnejša možnost

Določimo samo začetno in končno barvo:

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

css#elem {
  background: radial-gradient(red, blue);
  width: 200px;
  height: 200px;
}

Результат:

Primer . Dodamo pozicijo

Določimo položaj središča: 30px - odmik levo, 100px - odmik zgoraj:

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

css#elem {
  background: radial-gradient(at 30px 100px, red, blue);
  width: 200px;
  height: 200px;
}

Результат:

Primer . Pozicija v odstotkih

Določimo položaj središča v odstotkih: 30% - odmik levo, 50% - odmik zgoraj:

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

css#elem {
  background: radial-gradient(at 30% 50%, red, blue);
  width: 200px;
  height: 200px;
}

Результат:

Primer . Pozicija s ključno besedo

Lahko uporabimo ključne besede top, bottom, left, right, center v različnih kombinacijah. Postavimo gradient na primer desno na sredino:

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

css#elem {
  background: radial-gradient(at right center, red, blue);
  width: 200px;
  height: 200px;
}

Результат:

Primer . Velikost gradienta

V tem primeru bo gradient deloval takole: od 0px do 20px bo čista rdeča barva, od 20px do 60px - gradient od rdeče do modre, po 60px - čista modra barva:

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

css#elem {
  background: radial-gradient(red 20px, blue 60px);
  width: 200px;
  height: 200px;
}

Результат:

Primer . Več zaporednih barv

V tem primeru bo gradient deloval takole: od 0px do 20px bo čista rdeča barva, od 20px do 40px bo čista modra barva, od 40px do 60px - gradient od modre do zelene, po 60px - čista zelena barva:

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

css#elem {
  background: radial-gradient(red 20px, blue 20px, blue 40px, green 60px);
  width: 200px;
  height: 200px;
}

Результат:

Primer . Velikost + pozicija

Hkrati določimo velikosti za različne barve in pozicijo središča gradienta:

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

css#elem {
  background: radial-gradient(at 30px 60px, red 20px, blue 60px);
  width: 200px;
  height: 200px;
}

Результат:

Primer . Oblika gradienta

Oblika gradienta je določena s prvim parametrom in lahko sprejme 2 vrednosti: circle (krožni gradient) ali ellipse (eliptični gradient, privzeto). Zakaj do zdaj nismo videli eliptičnih gradientov, čeprav je določen privzeto? Ker so bile do zdaj oblike blokov kvadratne. Če spremenimo obliko na pravokotno, bomo videli eliptični gradient:

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

css#elem {
  background: radial-gradient(red 20px, blue 60px);
  width: 300px;
  height: 200px;
}

Результат:

Primer . Krožni gradient

Naredimo krožni gradient v pravokotnem bloku. Za to določimo prvi parameter oblike gradienta s ključno besedo circle:

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

css#elem {
  background: radial-gradient(circle, red 20px, blue 60px);
  width: 300px;
  height: 200px;
}

Результат:

Primer . Dodamo pozicijo

K prejšnji kodi dodajmo še pozicijo gradienta:

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

css#elem {
  background: radial-gradient(circle at 30px 60px, red 20px, blue 60px);
  width: 300px;
  height: 200px;
}

Результат:

Primer . Tip farthest-corner + circle

Oblika gradienta se izračuna na podlagi informacije o razdalji do najbolj oddaljenega kota bloka:

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

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

Результат:

Primer . Tip farthest-corner + ellipse

Oblika gradienta se izračuna na podlagi informacije o razdalji do najbolj oddaljenega kota bloka:

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

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

Результат:

Primer . Tip farthest-side + circle

Gradient se širi do najbolj oddaljene strani bloka:

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

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

Результат:

Primer . Tip farthest-side + ellipse

Gradient se širi do najbolj oddaljene strani bloka:

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

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

Результат:

Primer . Tip closest-corner + circle

Oblika gradienta se izračuna na podlagi informacije o razdalji do najbližjega kota bloka:

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

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

Результат:

Primer . Tip closest-corner + ellipse

Oblika gradienta se izračuna na podlagi informacije o razdalji do najbližjega kota bloka:

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

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

Результат:

Primer . Tip closest-side + circle

Oblika gradienta sovpada z najbližjo stranjo bloka:

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

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

Результат:

Primer . Tip closest-side + ellipse

Oblika gradienta sovpada z najbližjo stranjo bloka:

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

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

Результат:

Glejte tudi