Funkcija linear-gradient
Funkcija linear-gradient definē lineāru
gradientu. Tiek lietota īpašībām, kas
definē fona attēlu: background,
background-image
vai robežas attēlu: border-image,
background-image-source.
Sintakse
selektors {
background: linear-gradient([leņķis vai virziens], krāsa1 izmērs1, krāsa2 izmērs2...);
}
Vērtības
| Vērtība | Apraksts |
|---|---|
| virziens |
Norāda konkrētu gradienta virzienu jebkuros leņķa mērvienībos
vai ar atslēgvārdiem top, left, right, bottom
vai to kombinācijām: top left, top right un tā tālāk.
Vārdu secībai nav nozīmes: var rakstīt top left un left top,
atšķirības nav. Parametrs nav obligāts: ja to neraksta, gradients būs
no augšas uz leju (kā ar to top). Pirms virziena tiek likts vārds to.
|
| leņķis | Leņķis jebkuros leņķa mērvienībos. Var būt pozitīvs vai negatīvs. Parametrs nav obligāts. Vienlaikus var tikt norādīts vai nu leņķis, vai virziens (vai nekas). |
| krāsa1 | Sākuma krāsa gradientam jebkuros krāsas mērvienībos. |
| krāsa2 | Beigu krāsa gradientam jebkuros krāsas mērvienībos. |
| izmērs | Norāda konkrētas gradienta krāsas izmēru jebkuros izmēra mērvienībos. |
Piemērs . Vienkāršākais variants
Sintakse:
selektors {
background: linear-gradient(sākuma krāsa, beigu krāsa);
}
Apskatīsim piemērā:
<div id="elem"></div>
#elem {
background: linear-gradient(black, red);
width: 200px;
height: 200px;
}
:
Piemērs . Pievienojam leņķi
Sintakse:
selektors {
background: linear-gradient(leņķis, sākuma krāsa, beigu krāsa);
}
Apskatīsim piemērā:
<div id="elem"></div>
#elem {
background: linear-gradient(45deg, black, red);
width: 200px;
height: 200px;
}
:
Piemērs . Pievienojam virzienu
Leņķa vietā var pievienot virzienu
top, left, right, bottom
vai to kombināciju: top left, top right
Pirms virziena tiek likts vārds to.
Sintakse:
selektors {
background: linear-gradient(virziens, sākuma krāsa, beigu krāsa);
}
Apskatīsim piemērā:
<div id="elem"></div>
#elem {
background: linear-gradient(to left, black, red);
width: 200px;
height: 200px;
}
:
Piemērs . Pievienojam virzienu
Norādīsim citu virzienu:
<div id="elem"></div>
#elem {
background: linear-gradient(to top left, black, red);
width: 200px;
height: 200px;
}
:
Piemērs . Pievienojam izmēru
Sintakse:
selektors {
background: linear-gradient(krāsa1 izmērs1, krāsa2 izmērs2);
}
Nākamajā piemērā darbība būs šāda:
tīra sarkanā krāsa būs no 0px līdz
30px, no 30px līdz 50px
būs gradients no sarkanās līdz zilajai, un
no 50px līdz beigām - tīra zilā krāsa:
<div id="elem"></div>
#elem {
background: linear-gradient(red 30px, blue 50px);
width: 200px;
height: 200px;
}
:
Piemērs . Pievienojam vairāk kā 2 krāsas
Sintakse:
selektors {
background: linear-gradient(krāsa1 izmērs1, krāsa2 izmērs2, krāsa3 izmērs3...);
}
Nākamajā piemērā darbība būs šāda:
tīra sarkanā krāsa būs no 0px līdz
30px, no 30px līdz 50px
būs gradients no sarkanās līdz zilajai, un
no 50px līdz 70px - gradients no zilās
līdz zaļajai, un pēc 70px - tīra zaļā krāsa:
<div id="elem"></div>
#elem {
background: linear-gradient(red 30px, blue 50px, green 70px);
width: 200px;
height: 200px;
}
:
Piemērs . Asi pārejas
Nākamajā piemērā darbība būs šāda:
tīra sarkanā krāsa būs no 0px līdz
30px, tīra zilā krāsa - no 30px
līdz 60px, tīra zaļā krāsa - pēc 60px
(red 0px var arī nerakstīt):
<div id="elem"></div>
#elem {
background: linear-gradient(red 0px, red 30px, blue 30px, blue 60px, green 60px);
width: 200px;
height: 200px;
}
:
Piemērs . Izmērus var norādīt arī procentos
Nākamajā piemērā darbība būs šāda:
tīra sarkanā krāsa būs no 0% līdz
30%, tīra zilā krāsa - no 30%
līdz 60%, tīra zaļā krāsa - pēc 60%
(red 0% var arī nerakstīt):
<div id="elem"></div>
#elem {
background: linear-gradient(red 0%, red 30%, blue 30%, blue 60%, green 60%);
width: 200px;
height: 200px;
}
:
Piemērs . Kombinācija ar background-size
Nākamajā piemērā darbība būs šāda:
tīra sarkanā krāsa būs no 0px līdz
30px, tīra zilā krāsa - no 30px
līdz 60px, un tas viss atkārtosies
pa gabaliņiem pa 60px (dēļ 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;
}
:
Skatiet arī
-
funkciju
radial-gradient,
kas veido radiālu gradientu -
funkciju
repeating-linear-gradient,
kas veido atkārtojošos lineāru gradientu -
funkciju
repeating-radial-gradient,
kas veido atkārtojošos radiālu gradientu
