CSS lineaarne gradient selgitatud näidetega

Lineaarses gradientis voolavad värvid ühes suunas, näiteks vasakult paremale, ülevalt alla või mis tahes valitud nurga all.

Kahe värvi peatusega gradient

Süntaks

Lineaarse gradiendi loomiseks peate määrama vähemalt kaks värvipeatust. Need on värvid, mille vahel üleminekud on loodud. See on deklareeritud kas tausta või taustpildi omadustel.

background: linear-gradient(direction, colour-stop1, colour-stop2, ...);

Kui suunda pole määratud, on vaikimisi ülemine ülalt alla.

Näited

Ülevalt alla:

background: linear-gradient(red, yellow);
Ülevalt alla

Vasakul r arem:

Vasakult paremale muutmiseks lisage algusesse täiendav parameeter linear-gradient()sõnaga , millele tähistatakse suunda:

background: linear-gradient(to right, red , yellow);
Vasakult paremale

Diagonaalsed gradientid :

Gradienti saate ka diagonaalselt üle viia, määrates horisontaalse ja vertikaalse lähtepositsiooni, näiteks üleval vasakul või paremal all.

Siin on näide gradientist, mis algab ülevalt vasakult:

 background: linear-gradient(to bottom right, red, yellow);
Üleval vasakul

Nurkade kasutamine gradiendi suuna määramiseks

Gradienti suuna täpsemaks määramiseks võite kasutada ka nurki:

background: linear-gradient(angle, colour-stop1, colour-stop2);

Nurk määratakse horisontaaljoone ja gradientjoone vahelise nurgana.

background: linear-gradient(90deg, red, yellow);
90 kraadi

Kasutades rohkem kui kahte värvi

Te ei piirdu ainult kahe värviga - võite kasutada nii palju komadega eraldatud värve kui soovite.

background: linear-gradient(red, yellow, green); 
3 värvipeatusega gradient

Värvide määramiseks võite kasutada ka muid värvisüntakse, näiteks RGB- või kuuskoodikoode.

Kõva värv peatub

Gradiente saate kasutada mitte ainult pleekivate värvidega üleminekuks, vaid ka seda, et vahetada kohe ühevärviliseks ühevärviliseks:

background: linear-gradient(to right,red 15%, yellow 15%);
Kõva värv peatub

Rohkem informatsiooni:

  • CSS-i käsiraamat: käepärane juhend CSS-i arendajatele