Funktsioon radial-gradient
Funktsioon radial-gradient määrab radiaalse
gradiendi. Seda funktsiooni rakendatakse omadustele, mis
määravad taustapildi: background,
background-image
või piiri pildi: border-image,
background-image-source.
Süntaks
selektor {
background: radial-gradient([kuju tüüp asukoht], värv1 suurus1, värv2 suurus2...);
}
Väärtused
| Väärtus | Kirjeldus |
|---|---|
| kuju |
Võimalikud väärtused:
ellipse elliptiline gradient (vaikimisi),
circle ringikujuline gradient.
|
| tüüp |
Määrab gradendi venituse.
Võimalikud väärtused:
closest-side, closest-corner,
farthest-side, farthest-corner.
|
| asukoht |
Pärast võtmesõna at
määratakse asukoht mis tahes suuruse ühikutes
või võtmesõnadega top, bottom,
left, right, center
erinevates kombinatsioonides.
|
| värv1 | Gradendi algvärv mis tahes värvi ühikutes. |
| värv2 | Gradendi lõppvärv mis tahes värvi ühikutes. |
| suurus | Määrab gradendi kindla värvi ulatuse mis tahes suuruse ühikutes. |
Väärtused tüübile
| Väärtus | Kirjeldus |
|---|---|
closest-side |
Gradendi kuju ühtib sellele lähima ploki küljega. |
closest-corner |
Gradendi kuju arvutatakse lähtuvalt infoist kaugusest lähima ploki nurgani. |
farthest-side |
Gradient ulatub ploki kaugema küljeni. |
farthest-corner |
Gradendi kuju arvutatakse lähtuvalt infoist kaugusest kaugema ploki nurgani. |
Märkus
Tüüpi ja kuju saab omavahel vahetada, kuid asukoht peab jääma esimese parameetri lõppu. Gradendi tüüp ja selle suurus ei tööta üksteisega kokku (loogiline, nad ju konflikteerivad). Võidab suurus.
Näide . Kõige lihtsam variant
Määrame lihtsalt alg- ja lõppvärvi:
<div id="elem"></div>
#elem {
background: radial-gradient(red, blue);
width: 200px;
height: 200px;
}
:
Näide . Lisame asukoha
Määrame keskpunkti asukoha:
30px - taane vasakult, 100px - taane ülevalt:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30px 100px, red, blue);
width: 200px;
height: 200px;
}
:
Näide . Asukoht protsentides
Määrame keskpunkti asukoha protsentides:
30% - taane vasakult, 50% - taane ülevalt:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30% 50%, red, blue);
width: 200px;
height: 200px;
}
:
Näide . Asukoht võtmesõnaga
Saab kasutada võtmesõnu
top, bottom, left,
right, center erinevates
kombinatsioonides. Paneme näiteks gradendi
paremale keskele:
<div id="elem"></div>
#elem {
background: radial-gradient(at right center, red, blue);
width: 200px;
height: 200px;
}
:
Näide . Gradendi suurus
Sel juhul töötab gradient järgmiselt:
alates 0px kuni 20px on puhas
punane värv, alates 20px kuni 60px - gradient
punasest siniseks, pärast 60px - puhas
sinine:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 60px);
width: 200px;
height: 200px;
}
:
Näide . Mitu värvi järjest
Sel juhul töötab gradient järgmiselt:
alates 0px kuni 20px on puhas
punane värv, alates 20px kuni 40px
on puhas sinine värv, alates 40px
kuni 60px - gradient sinisest roheliseks,
pärast 60px - puhas roheline:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 20px, blue 40px, green 60px);
width: 200px;
height: 200px;
}
:
Näide . Suurus + asukoht
Määrame korraga erinevate värvide jaoks suurused ja gradendi keskpunkti asukoha:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30px 60px, red 20px, blue 60px);
width: 200px;
height: 200px;
}
:
Näide . Gradendi kuju
Gradendi kuju määratakse esimese parameetriga
ja võib võtta 2 väärtust: circle
(ringikujuline gradient) või ellipse (elliptiline
gradient, vaikimisi). Miks me siis varem
elliptilisi gradente ei näinud, kuigi
see määratakse vaikimisi? Sellepärast, et varem
olid plokid ruudukujulised. Kui muudame
kuju ristkülikukujuliseks, siis näeme elliptilist
gradienti:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
Näide . Ringikujuline gradient
Teeme ringikujulise gradendi ristkülikukujulises
plokis. Selleks määrame esimese parameetriga
gradendi kuju võtmesõnaga
circle:
<div id="elem"></div>
#elem {
background: radial-gradient(circle, red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
Näide . Lisame asukoha
Lisame eelmisele koodile veel gradendi asukoha:
<div id="elem"></div>
#elem {
background: radial-gradient(circle at 30px 60px, red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
Näide . Tüüp farthest-corner + circle
Gradendi kuju arvutatakse lähtuvalt infoist kaugusest ploki kaugema nurgani:
<div id="elem"></div>
#elem {
background: radial-gradient(circle farthest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Näide . Tüüp farthest-corner + ellipse
Gradendi kuju arvutatakse lähtuvalt infoist kaugusest ploki kaugema nurgani:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse farthest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Näide . Tüüp farthest-side + circle
Gradient ulatub ploki kaugema küljeni:
<div id="elem"></div>
#elem {
background: radial-gradient(circle farthest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Näide . Tüüp farthest-side + ellipse
Gradient ulatub ploki kaugema küljeni:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse farthest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Näide . Tüüp closest-corner + circle
Gradendi kuju arvutatakse lähtuvalt infoist kaugusest ploki lähima nurgani:
<div id="elem"></div>
#elem {
background: radial-gradient(circle closest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Näide . Tüüp closest-corner + ellipse
Gradendi kuju arvutatakse lähtuvalt infoist kaugusest ploki lähima nurgani:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse closest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Näide . Tüüp closest-side + circle
Gradendi kuju ühtib sellele lähima ploki küljega:
<div id="elem"></div>
#elem {
background: radial-gradient(circle closest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Näide . Tüüp closest-side + ellipse
Gradendi kuju ühtib sellele lähima ploki küljega:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse closest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Vaata ka
-
funktsiooni
linear-gradient,
mis loob lineaarse gradendi -
funktsiooni
repeating-linear-gradient,
mis loob korduva lineaarse gradendi -
funktsiooni
repeating-radial-gradient,
mis loob korduva radiaalse gradendi
