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
selektor {
background: radial-gradient([oblika tip pozicija], barva1 velikost1, barva2 velikost2...);
}
Vrednosti
| Vrednost | Opis |
|---|---|
| oblika |
Sprejemljive vrednosti:
ellipse eliptični gradient (privzeto),
circle krožni gradient.
|
| tip |
Določa raztezanje gradienta.
Sprejemljive vrednosti:
closest-side, closest-corner,
farthest-side, farthest-corner.
|
| pozicija |
Za ključno besedo at
je navedena pozicija v poljubnih enotah za velikost
ali s pomočjo ključnih besed top, bottom,
left, right, center
v različnih kombinacijah.
|
| barva1 | Začetna barva gradienta v poljubnih enotah za barvo. |
| barva2 | Končna barva gradienta v poljubnih enotah za barvo. |
| velikost | Določa razsežnost določene barve gradienta v poljubnih enotah za velikost. |
Vrednosti za tip
| Vrednost | Opis |
|---|---|
closest-side |
Oblika gradienta sovpada z najbližjo stranjo bloka. |
closest-corner |
Oblika gradienta se izračuna na podlagi informacije o razdalji do najbližjega kota bloka. |
farthest-side |
Gradient se širi do najbolj oddaljene strani bloka. |
farthest-corner |
Oblika gradienta se izračuna na podlagi informacije o razdalji do najbolj oddaljenega kota bloka. |
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:
<div id="elem"></div>
#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:
<div id="elem"></div>
#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:
<div id="elem"></div>
#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:
<div id="elem"></div>
#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:
<div id="elem"></div>
#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:
<div id="elem"></div>
#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:
<div id="elem"></div>
#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:
<div id="elem"></div>
#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:
<div id="elem"></div>
#elem {
background: radial-gradient(circle, red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
Primer . Dodamo pozicijo
K prejšnji kodi dodajmo še pozicijo gradienta:
<div id="elem"></div>
#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:
<div id="elem"></div>
#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:
<div id="elem"></div>
#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:
<div id="elem"></div>
#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:
<div id="elem"></div>
#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:
<div id="elem"></div>
#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:
<div id="elem"></div>
#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:
<div id="elem"></div>
#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:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse closest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Glejte tudi
-
funkcijo
linear-gradient,
ki ustvari linearni gradient -
funkcijo
repeating-linear-gradient,
ki ustvari ponavljajoči se linearni gradient -
funkcijo
repeating-radial-gradient,
ki ustvari ponavljajoči se radialni gradient
