CSS tiesinis gradientas paaiškintas pavyzdžiais

Linijiniame gradiente spalvos teka viena kryptimi, pavyzdžiui, iš kairės į dešinę, iš viršaus į apačią arba bet kurį pasirinktą kampą.

Dviejų spalvų sustojimų gradientas

Sintaksė

Norėdami sukurti tiesinį gradientą, turite apibrėžti bent dvi spalvų pakopas. Tai yra spalvos, tarp kurių sukuriami perėjimai. Jis nurodomas fono arba fono vaizdo savybėse.

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

Jei nenurodyta kryptis, numatytasis perėjimas yra iš viršaus į apačią.

Pavyzdžiai

Nuo viršaus iki apačios:

background: linear-gradient(red, yellow);
Nuo viršaus iki apačios

Palikta r reiso:

Norėdami, kad jis būtų iš kairės į dešinę, pradžios pradžioje pridėkite papildomą parametrą linear-gradient()su žodžiu, į kurį nurodoma kryptis:

background: linear-gradient(to right, red , yellow);
Iš kairės į dešinę

Įstrižieji nuolydžiai :

Taip pat galite perkelti gradientą įstrižai, nurodydami horizontalias ir vertikalias pradines pozicijas, pvz., Viršuje kairėje arba apačioje dešinėje.

Štai gradiento pavyzdys pradedant nuo viršutinio kairio kampo:

 background: linear-gradient(to bottom right, red, yellow);
Viršuje kairėje

Kampų naudojimas norint nustatyti gradiento kryptį

Norėdami tiksliau nurodyti gradiento kryptį, taip pat galite naudoti kampus:

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

Kampas nurodomas kaip kampas tarp horizontalios linijos ir gradiento linijos.

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

Naudojant daugiau nei dvi spalvas

Neapsiribojate tik dviem spalvomis - galite naudoti tiek kableliais atskirtų spalvų, kiek norite.

background: linear-gradient(red, yellow, green); 
3 spalvų sustojimų gradientas

Taip pat galite naudoti kitas spalvų sintakses, tokias kaip RGB arba šešioliktainiai kodai, kad nurodytumėte spalvas.

Kieta spalva sustoja

Galite naudoti ne tik gradientus, kad pereitumėte su blukstančiomis spalvomis, bet ir naudodami juos iškart pakeisdami vieną vientisą spalvą į kitą:

background: linear-gradient(to right,red 15%, yellow 15%);
Kieta spalva sustoja

Daugiau informacijos:

  • CSS vadovas: patogus CSS vadovas kūrėjams