Funktsioon linear-gradient
Funktsioon linear-gradient määrab lineaarne
gradient. Rakendatakse omadustele, mis
määravad taustapildi: background,
background-image
või piiri pildi: border-image,
background-image-source.
Süntaks
selektor {
background: linear-gradient([nurk või suund], värv1 suurus1, värv2 suurus2...);
}
Väärtused
| Väärtus | Kirjeldus |
|---|---|
| suund |
Määrab kindla gradendi suuna mis tahes nurgaühikutes
või märksõnadega top, left, right, bottom
või nende kombinatsioon: top left, top right ja nii edasi.
Sõnade järjekord ei ole oluline: võib kirjutada top left ja left top,
erinevust pole. Parameeter on valikuline: kui seda ei kirjutata, on gradient
ülevalt alla (nagu to top puhul). Suuna ees seisab sõna to.
|
| nurk | Nurk mis tahes nurgaühikutes. Võib olla positiivne või negatiivne. Parameeter on valikuline. Samal ajal võib olla määratud kas nurk või suund (või mitte midagi). |
| värv1 | Gradendi algvärv mis tahes värviühikutes. |
| värv2 | Gradendi lõppvärv mis tahes värviühikutes. |
| suurus | Määrab kindla gradendi värvi ulatuse mis tahes suuruseühikutes. |
Näide . Kõige lihtsam variant
Süntaks:
selektor {
background: linear-gradient(algvärv, lõppvärv);
}
Vaatame näidet:
<div id="elem"></div>
#elem {
background: linear-gradient(black, red);
width: 200px;
height: 200px;
}
:
Näide . Lisame nurga
Süntaks:
selektor {
background: linear-gradient(nurk, algvärv, lõppvärv);
}
Vaatame näidet:
<div id="elem"></div>
#elem {
background: linear-gradient(45deg, black, red);
width: 200px;
height: 200px;
}
:
Näide . Lisame suuna
Nurga asemel võib lisada suuna
top, left, right, bottom
või nende kombinatsiooni: top left, top right
Suuna ees seisab sõna to.
Süntaks:
selektor {
background: linear-gradient(suund, algvärv, lõppvärv);
}
Vaatame näidet:
<div id="elem"></div>
#elem {
background: linear-gradient(to left, black, red);
width: 200px;
height: 200px;
}
:
Näide . Lisame suuna
Täpsustame teist suunda:
<div id="elem"></div>
#elem {
background: linear-gradient(to top left, black, red);
width: 200px;
height: 200px;
}
:
Näide . Lisame suuruse
Süntaks:
selektor {
background: linear-gradient(värv1 suurus1, värv2 suurus2);
}
Järgmises näites on käitumine järgmine:
puhas punane värv on alates 0px kuni
30px, alates 30px kuni 50px
on gradient punasest kuni siniseks, ja
alates 50px kuni lõpuni - puhas sinine:
<div id="elem"></div>
#elem {
background: linear-gradient(red 30px, blue 50px);
width: 200px;
height: 200px;
}
:
Näide . Lisame rohkem kui 2 värvi
Süntaks:
selektor {
background: linear-gradient(värv1 suurus1, värv2 suurus2, värv3 suurus3...);
}
Järgmises näites on käitumine järgmine:
puhas punane värv on alates 0px kuni
30px, alates 30px kuni 50px
on gradient punasest kuni siniseks, ja
alates 50px kuni 70px - gradient sinisest
roheliseni, ja pärast 70px - puhas roheline:
<div id="elem"></div>
#elem {
background: linear-gradient(red 30px, blue 50px, green 70px);
width: 200px;
height: 200px;
}
:
Näide . Teravad üleminekud
Järgmises näites on käitumine järgmine:
puhas punane värv on alates 0px kuni
30px, puhas sinine - alates 30px
kuni 60px, puhas roheline - pärast 60px
(red 0px võib ka mitte kirjutada):
<div id="elem"></div>
#elem {
background: linear-gradient(red 0px, red 30px, blue 30px, blue 60px, green 60px);
width: 200px;
height: 200px;
}
:
Näide . Suurusi saab määrata ka protsentides
Järgmises näites on käitumine järgmine:
puhas punane värv on alates 0% kuni
30%, puhas sinine - alates 30%
kuni 60%, puhas roheline - pärast 60%
(red 0% võib ka mitte kirjutada):
<div id="elem"></div>
#elem {
background: linear-gradient(red 0%, red 30%, blue 30%, blue 60%, green 60%);
width: 200px;
height: 200px;
}
:
Näide . Kombinatsioon background-size'iga
Järgmises näites on käitumine järgmine:
puhas punane värv on alates 0px kuni
30px, puhas sinine - alates 30px
kuni 60px, kusjuures kõik see kordub
tükkidena iga 60px järel (tänu 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;
}
:
Vaata ka
-
funktsiooni
radial-gradient,
mis loob radiaalse gradendi -
funktsiooni
repeating-linear-gradient,
mis loob korduva lineaarse gradendi -
funktsiooni
repeating-radial-gradient,
mis loob korduva radiaalse gradendi
