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

cssselektor {
  background: radial-gradient([kuju tüüp asukoht], värv1 suurus1, värv2 suurus2...);
}

Väärtused

Väärtused tüübile

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:

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

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

Результат:

Näide . Lisame asukoha

Määrame keskpunkti asukoha: 30px - taane vasakult, 100px - taane ülevalt:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Результат:

Näide . Lisame asukoha

Lisame eelmisele koodile veel gradendi asukoha:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Результат:

Vaata ka