linear-gradient-funktio
linear-gradient-funktio määrittää lineaarisen
gradientin. Sitä käytetään ominaisuuksissa, jotka
määrittävät taustakuvan: background,
background-image
tai reunuksen kuvan: border-image,
background-image-source.
Syntaksi
valitsija {
background: linear-gradient([kulma tai suunta], väri1 koko1, väri2 koko2...);
}
Arvot
| Arvo | Kuvaus |
|---|---|
| suunta |
Määrittää gradientin tietyn suunnan millä tahansa kulmayksiköllä
tai avainsanoilla top, left, right, bottom
tai niiden yhdistelmillä: top left, top right ja niin edelleen.
Sanojen järjestyksellä ei ole väliä: voidaan kirjoittaa top left ja left top,
eroa ei ole. Parametri on valinnainen: jos sitä ei kirjoiteta, gradientti menee
ylhäältä alas (kuten to top:lla). Ennen suuntaa laitetaan sana to.
|
| kulma | Kulma millä tahansa kulmayksiköllä. Voi olla positiivinen tai negatiivinen. Parametri on valinnainen. Samanaikaisesti voidaan määrittää joko kulma tai suunta (tai ei mitään). |
| väri1 | Gradientin aloitusväri millä tahansa väriyksiköllä. |
| väri2 | Gradientin lopetusväri millä tahansa väriyksiköllä. |
| koko | Määrittää gradientin tietyn värin laajuuden millä tahansa koko-yksiköllä. |
Esimerkki . Yksinkertaisin vaihtoehto
Syntaksi:
valitsija {
background: linear-gradient(aloitusväri, lopetusväri);
}
Katsotaan esimerkkiä:
<div id="elem"></div>
#elem {
background: linear-gradient(black, red);
width: 200px;
height: 200px;
}
:
Esimerkki . Lisätään kulma
Syntaksi:
valitsija {
background: linear-gradient(kulma, aloitusväri, lopetusväri);
}
Katsotaan esimerkkiä:
<div id="elem"></div>
#elem {
background: linear-gradient(45deg, black, red);
width: 200px;
height: 200px;
}
:
Esimerkki . Lisätään suunta
Kulman sijaan voidaan lisätä suunta
top, left, right, bottom
tai niiden yhdistelmä: top left, top right
Ennen suuntaa laitetaan sana to.
Syntaksi:
valitsija {
background: linear-gradient(suunta, aloitusväri, lopetusväri);
}
Katsotaan esimerkkiä:
<div id="elem"></div>
#elem {
background: linear-gradient(to left, black, red);
width: 200px;
height: 200px;
}
:
Esimerkki . Lisätään suunta
Määritetään toinen suunta:
<div id="elem"></div>
#elem {
background: linear-gradient(to top left, black, red);
width: 200px;
height: 200px;
}
:
Esimerkki . Lisätään koko
Syntaksi:
valitsija {
background: linear-gradient(väri1 koko1, väri2 koko2);
}
Seuraavassa esimerkissä käyttäytyminen on seuraava:
puhdas punainen väri on 0px:stä
30px:iin, 30px:stä 50px:iin
tulee gradientti punaisesta siniseen, ja
50px:stä loppuun - puhdas sininen:
<div id="elem"></div>
#elem {
background: linear-gradient(red 30px, blue 50px);
width: 200px;
height: 200px;
}
:
Esimerkki . Lisätään enemmän kuin 2 väriä
Syntaksi:
valitsija {
background: linear-gradient(väri1 koko1, väri2 koko2, väri3 koko3...);
}
Seuraavassa esimerkissä käyttäytyminen on seuraava:
puhdas punainen väri on 0px:stä
30px:iin, 30px:stä 50px:iin
tulee gradientti punaisesta siniseen, ja
50px:stä 70px:iin - gradientti sinisestä
vihreään, ja 70px:n jälkeen - puhdas vihreä:
<div id="elem"></div>
#elem {
background: linear-gradient(red 30px, blue 50px, green 70px);
width: 200px;
height: 200px;
}
:
Esimerkki . Jyrkät siirtymät
Seuraavassa esimerkissä käyttäytyminen on seuraava:
puhdas punainen väri on 0px:stä
30px:iin, puhdas sininen - 30px:stä
60px:iin, puhdas vihreä - 60px:n jälkeen
(red 0px:ia ei tarvitse kirjoittaa):
<div id="elem"></div>
#elem {
background: linear-gradient(red 0px, red 30px, blue 30px, blue 60px, green 60px);
width: 200px;
height: 200px;
}
:
Esimerkki . Koot voidaan antaa myös prosentteina
Seuraavassa esimerkissä käyttäytyminen on seuraava:
puhdas punainen väri on 0%:sta
30%:iin, puhdas sininen - 30%:sta
60%:iin, puhdas vihreä - 60%:n jälkeen
(red 0%:ia ei tarvitse kirjoittaa):
<div id="elem"></div>
#elem {
background: linear-gradient(red 0%, red 30%, blue 30%, blue 60%, green 60%);
width: 200px;
height: 200px;
}
:
Esimerkki . Yhdistelmä background-size:n kanssa
Seuraavassa esimerkissä käyttäytyminen on seuraava:
puhdas punainen väri on 0px:stä
30px:iin, puhdas sininen - 30px:stä
60px:iin, ja tämä kaikki toistuu
paloina 60px:n välein (background-size:
60px;:n takia):
<div id="elem"></div>
#elem {
background: linear-gradient(to right, red 30px, blue 30px, blue 60px);
background-size: 60px 60px;
width: 200px;
height: 200px;
}
:
Katso myös
-
radial-gradient-funktion,
joka luo radiaalisen gradientin -
repeating-linear-gradient-funktion,
joka luo toistuvan lineaarisen gradientin -
repeating-radial-gradient-funktion,
joka luo toistuvan radiaalisen gradientin
