Funkcija linear-gradient
Funkcija linear-gradient nustato tiesinį
gradientą. Taikoma savybėms, kurios
nustato fono paveikslėlį: background,
background-image
arba sienelės paveikslėlį: border-image,
background-image-source.
Sintaksė
selektorius {
background: linear-gradient([kampas arba kryptis], spalva1 dydis1, spalva2 dydis2...);
}
Reikšmės
| Reikšmė | Aprašas |
|---|---|
| kryptis |
Nustato konkrečią gradiento kryptį bet kokiame kampo vienete
arba raktažodžiais top, left, right, bottom
arba jų kombinacija: top left, top right ir taip toliau.
Žodžių tvarka nesvarbi: galima rašyti top left ir left top,
skirtumo nėra. Parametras neprivalomas: jei jo neparašysite, gradientas bus
nuo viršaus iki apačios (kaip ir su to top). Prieš kryptį rašomas žodis to.
|
| kampas | Kampas bet kokiame kampo vienete. Gali būti teigiamas arba neigiamas. Parametras neprivalomas. Vienu metu gali būti nustatytas arba kampas, arba kryptis (arba nieko). |
| spalva1 | Pradinė gradiento spalva bet kokiame spalvos vienete. |
| spalva2 | Galinė gradiento spalva bet kokiame spalvos vienete. |
| dydis | Nustato tam tikros gradiento spalvos tęsinį bet kokiame dydžio vienete. |
Pavyzdys . Paprasčiausias variantas
Sintaksė:
selektorius {
background: linear-gradient(pradinė spalva, galinė spalva);
}
Pažiūrėkime pavyzdžiu:
<div id="elem"></div>
#elem {
background: linear-gradient(black, red);
width: 200px;
height: 200px;
}
:
Pavyzdys . Pridedame kampą
Sintaksė:
selektorius {
background: linear-gradient(kampas, pradinė spalva, galinė spalva);
}
Pažiūrėkime pavyzdžiu:
<div id="elem"></div>
#elem {
background: linear-gradient(45deg, black, red);
width: 200px;
height: 200px;
}
:
Pavyzdys . Pridedame kryptį
Vietoj kampo galima pridėti kryptį
top, left, right, bottom
arba jų kombinaciją: top left, top right
Prieš kryptį rašomas žodis to.
Sintaksė:
selektorius {
background: linear-gradient(kryptis, pradinė spalva, galinė spalva);
}
Pažiūrėkime pavyzdžiu:
<div id="elem"></div>
#elem {
background: linear-gradient(to left, black, red);
width: 200px;
height: 200px;
}
:
Pavyzdys . Pridedame kryptį
Nurodykime kitą kryptį:
<div id="elem"></div>
#elem {
background: linear-gradient(to top left, black, red);
width: 200px;
height: 200px;
}
:
Pavyzdys . Pridedame dydį
Sintaksė:
selektorius {
background: linear-gradient(spalva1 dydis1, spalva2 dydis2);
}
Kitame pavyzdyje elgsena bus tokia:
gryna raudona spalva bus nuo 0px iki
30px, nuo 30px iki 50px
bus gradientas nuo raudonos iki mėlynos, o
nuo 50px ir iki galo - gryna mėlyna:
<div id="elem"></div>
#elem {
background: linear-gradient(red 30px, blue 50px);
width: 200px;
height: 200px;
}
:
Pavyzdys . Pridedame daugiau nei 2 spalvas
Sintaksė:
selektorius {
background: linear-gradient(spalva1 dydis1, spalva2 dydis2, spalva3 dydis3...);
}
Kitame pavyzdyje elgsena bus tokia:
gryna raudona spalva bus nuo 0px iki
30px, nuo 30px iki 50px
bus gradientas nuo raudonos iki mėlynos, o
nuo 50px iki 70px - gradientas nuo mėlynos
iki žalios, o po 70px - gryna žalia:
<div id="elem"></div>
#elem {
background: linear-gradient(red 30px, blue 50px, green 70px);
width: 200px;
height: 200px;
}
:
Pavyzdys . Staigūs perėjimai
Kitame pavyzdyje elgsena bus tokia:
gryna raudona spalva bus nuo 0px iki
30px, gryna mėlyna - nuo 30px
iki 60px, gryna žalia - po 60px
(red 0px galima ir nerašyti):
<div id="elem"></div>
#elem {
background: linear-gradient(red 0px, red 30px, blue 30px, blue 60px, green 60px);
width: 200px;
height: 200px;
}
:
Pavyzdys . Dydžius galima nustatyti ir procentais
Kitame pavyzdyje elgsena bus tokia:
gryna raudona spalva bus nuo 0% iki
30%, gryna mėlyna - nuo 30%
iki 60%, gryna žalia - po 60%
(red 0% galima ir nerašyti):
<div id="elem"></div>
#elem {
background: linear-gradient(red 0%, red 30%, blue 30%, blue 60%, green 60%);
width: 200px;
height: 200px;
}
:
Pavyzdys . Derinimas su background-size
Kitame pavyzdyje elgsena bus tokia:
gryna raudona spalva bus nuo 0px iki
30px, gryna mėlyna - nuo 30px
iki 60px, o visa tai bus kartojama
dalelėmis po 60px (dėl background-size:
60px;):
<div id="elem"></div>
#elem {
background: linear-gradient(to right, red 30px, blue 30px, blue 60px);
background-size: 60px 60px;
width: 200px;
height: 200px;
}
:
Taip pat žiūrėkite
-
funkciją
radial-gradient,
kuri sukuria radialinį gradientą -
funkciją
repeating-linear-gradient,
kuri sukuria kartojamą tiesinį gradientą -
funkciją
repeating-radial-gradient,
kuri sukuria kartojamą radialinį gradientą
