Funkcija radial-gradient
Funkcija radial-gradient nustato radialinį
gradientą. Ši funkcija taikoma savybėms, kurios
nustato fono paveikslėlį: background,
background-image
arba rėmelio paveikslėlį: border-image,
background-image-source.
Sintaksė
selektorius {
background: radial-gradient([forma tipas pozicija], spalva1 dydis1, spalva2 dydis2...);
}
Reikšmės
| Reikšmė | Aprašas |
|---|---|
| forma |
Priimamos reikšmės:
ellipse elipsinis gradientas (numatytasis),
circle apskritimo gradientas.
|
| tipas |
Nustato gradiento išsidėstymą.
Priimamos reikšmės:
closest-side, closest-corner,
farthest-side, farthest-corner.
|
| pozicija |
Po raktažodžio at
nurodoma pozicija bet kuriais dydžio vienetais
arba naudojant raktažodžius top, bottom,
left, right, center
įvairiose kombinacijose.
|
| spalva1 | Pradinė gradiento spalva bet kuriais spalvų vienetais. |
| spalva2 | Galinė gradiento spalva bet kuriais spalvų vienetais. |
| dydis | Nustato tam tikros gradiento spalvos išsidėstymą bet kuriais dydžio vienetais. |
Tipų reikšmės
| Reikšmė | Aprašas |
|---|---|
closest-side |
Gradiento forma sutampa su artimiausia bloko puse. |
closest-corner |
Gradiento forma apskaičiuojama remiantis informacija apie atstumą iki artimiausio bloko kampo. |
farthest-side |
Gradientas išsiplečia iki tolimiausios bloko pusės. |
farthest-corner |
Gradiento forma apskaičiuojama remiantis informacija apie atstumą iki tolimiausio bloko kampo. |
Pastaba
Tipą ir formą galima keisti vietomis, tačiau pozicija turi būti pirmojo parametro pabaigoje. Gradiento tipas ir jo dydis neveikia kartu (logiška, juk jie konfliktuoja). Laimi dydis.
Pavyzdys . Paprasčiausias variantas
Tiesiog nustatykime pradinę ir galinę spalvas:
<div id="elem"></div>
#elem {
background: radial-gradient(red, blue);
width: 200px;
height: 200px;
}
:
Pavyzdys . Pridėkime poziciją
Nustatykime centro padėtį:
30px - atitraukimas kairėje, 100px - atitraukimas viršuje:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30px 100px, red, blue);
width: 200px;
height: 200px;
}
:
Pavyzdys . Pozicija procentais
Nustatykime centro padėtį procentais:
30% - atitraukimas kairėje, 50% - atitraukimas viršuje:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30% 50%, red, blue);
width: 200px;
height: 200px;
}
:
Pavyzdys . Pozicija raktažodžiu
Galima naudoti raktažodžius
top, bottom, left,
right, center įvairiose
kombinacijose. Pavyzdžiui, pastatykime gradientą
dešinėje centre:
<div id="elem"></div>
#elem {
background: radial-gradient(at right center, red, blue);
width: 200px;
height: 200px;
}
:
Pavyzdys . Gradiento dydis
Šiuo atveju gradientas veiks taip:
nuo 0px iki 20px bus gryna
raudona spalva, nuo 20px iki 60px - gradientas
nuo raudonos iki mėlynos, po 60px - gryna
mėlyna:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 60px);
width: 200px;
height: 200px;
}
:
Pavyzdys . Kelios spalvos iš eilės
Šiuo atveju gradientas veiks taip:
nuo 0px iki 20px bus gryna
raudona spalva, nuo 20px iki 40px
bus gryna mėlyna spalva, nuo 40px
iki 60px - gradientas nuo mėlynos iki žalios,
po 60px - gryna žalia:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 20px, blue 40px, green 60px);
width: 200px;
height: 200px;
}
:
Pavyzdys . Dydis + pozicija
Vienu metu nustatykime dydžius skirtingoms spalvoms ir gradiento centro poziciją:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30px 60px, red 20px, blue 60px);
width: 200px;
height: 200px;
}
:
Pavyzdys . Gradiento forma
Gradiento forma nustatoma pirmu parametru
ir gali priimti 2 reikšmes: circle
(apskritimo gradientas) arba ellipse (elipsinis
gradientas, pagal nutylėjimą). Kodėl iki šiol
nematėme elipsinių gradientų, nors
jis nustatomas pagal nutylėjimą? Todėl, kad iki šiol
blokų forma buvo kvadratinė. Jei pakeisime
formą į stačiakampę, pamatysime elipsinį
gradientą:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
Pavyzdys . Apskritimo gradientas
Sukurkime apskritimo gradientą stačiakampiame
bloke. Tam nustatykime pirmu parametru
gradiento formą naudodami raktažodį
circle:
<div id="elem"></div>
#elem {
background: radial-gradient(circle, red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
Pavyzdys . Pridėkime poziciją
Prie ankstesnio kodo pridėkime dar ir gradiento poziciją:
<div id="elem"></div>
#elem {
background: radial-gradient(circle at 30px 60px, red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
Pavyzdys . Tipas farthest-corner + circle
Gradiento forma apskaičiuojama remiantis informacija apie atstumą iki tolimiausio bloko kampo:
<div id="elem"></div>
#elem {
background: radial-gradient(circle farthest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Pavyzdys . Tipas farthest-corner + ellipse
Gradiento forma apskaičiuojama remiantis informacija apie atstumą iki tolimiausio bloko kampo:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse farthest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Pavyzdys . Tipas farthest-side + circle
Gradientas išsiplečia iki tolimiausios bloko push2s:
<div id="elem"></div>
#elem {
background: radial-gradient(circle farthest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Pavyzdys . Tipas farthest-side + ellipse
Gradientas išsiplečia iki tolimiausios bloko push2s:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse farthest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Pavyzdys . Tipas closest-corner + circle
Gradiento forma apskaičiuojama remiantis informacija apie atstumą iki artimiausio bloko kampo:
<div id="elem"></div>
#elem {
background: radial-gradient(circle closest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Pavyzdys . Tipas closest-corner + ellipse
Gradiento forma apskaičiuojama remiantis informacija apie atstumą iki artimiausio bloko kampo:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse closest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Pavyzdys . Tipas closest-side + circle
Gradiento forma sutampa su artimiausia puse bloko:
<div id="elem"></div>
#elem {
background: radial-gradient(circle closest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Pavyzdys . Tipas closest-side + ellipse
Gradiento forma sutampa su artimiausia puse bloko:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse closest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Taip pat žiūrėkite
-
funkciją
linear-gradient,
kuri sukuria linijinį gradientą -
funkciją
repeating-linear-gradient,
kuri sukuria kartojamą linijinį gradientą -
funkciją
repeating-radial-gradient,
kuri sukuria kartojamą radialinį gradientą
