Liukuvärejä voidaan laittaa päällekkäin käyttämällä useita linear-gradient() -funktioita peräkkäin.
Huomioi seuraavat asiat:
linear-gradient() -funktiot erotetaan toisistaan pilkulla
Ensimmäisenä määritelty liukuväri näkyy päällimmäisenä.
Päällekkäisillä liukuväreillä tulee olla läpinäkyviä alueita, esim. transparent väriä käyttäen. Muuten ensimmäisenä määriteltyy liukuväri peittää alleen sen jälkeen tulevat.
Yhdistelemällä liukuvärejä niiden potentiaali avautuu uudelle tasolle:
2. Säteittäiset liukuvärit
Säteittäiset liukuvärit saadaan aikaan radial-gradient() -funktiolla.
Säteittäiset liukuvärit lähtevät keskipisteestä reunoja kohti säteen muodossa.
background:
radial-gradient(
red,
blue
)
;
Säteittäiset liukuvärit toimivat samalla periaatteella kuin suorat liukuvärit. Määritellään värit ja niiden sijainnit:
background:
radial-gradient(
yellow 0% 30%,
red 50% 100%
)
;
Voit vaihtaa sädettä:
background:
radial-gradient(
circle closest-side,
black 100%,
gray
)
;
Säteen muodon voi määritellä avainsanoilla circle tai ellipse ja sen jälkeen mihin säde ulottuu, vaihtoehtoina closest-corner, closest-side, farthest-corner, tai farthest-side.
Esimerkiksi:
background:
radial-gradient(
circle farthest-side,
black 100%,
gray
)
;
background:
radial-gradient(
ellipse farthest-side,
black 100%,
gray
)
;
Säteen voi määritellä myös prosenttiluvuilla:
background:
radial-gradient(
50% 50%,
black 100%,
gray
)
;
background:
radial-gradient(
30% 10%,
black 100%,
gray
)
;
Keskipisteen sijainnin voi määritellä avainsanalla at jonka jälkeen tulee joko top / center / bottom ja left / center / right:
background:
radial-gradient(
circle at bottom left,
purple,
orange
)
;
...tai prosenttiluvuilla:
background:
radial-gradient(
ellipse at 50% 80%,
purple,
orange
)
;
background:
repeating-radial-gradient(
circle,
black,
white 10%
)
;
background:
repeating-radial-gradient(
circle at top left,
white 0 1px,
transparent 1px 20px
),
repeating-radial-gradient(
circle at bottom left,
white 0 1px,
transparent 1px 20px
),
repeating-radial-gradient(
circle at top right,
white 0 1px,
transparent 1px 20px
),
repeating-radial-gradient(
circle at bottom right,
white 0 1px,
transparent 1px 20px
),
black
;
background-size: 100px 100px;
background:
repeating-conic-gradient(
from 0deg at 50% 100%,
yellow 0.01%,
blue 0.04%
)
;
4. Vinkkejä
Miten koodi kannattaa sisentää?
Sisennyksillä, välilyönneillä ja rivinvaihdoilla ei ole merkitystä koodin toimivuuden kannalta, mutta ne auttavat silmää hahmottamaan, mikä osa koodia kuuluu mihinkin, ja helpottavat virheiden etsimistä sekä koodin ymmärtämistä.
Voit sisentää joko välilyönneillä tai Tab -näppäimellä (näppäin Q kirjaimen vasemmalla puolella).
Rivinvaihdon voi tehdä Enter -näppäimellä.
Esimerkki 1
background: linear-gradient(red, blue);
...on parempi kirjoittaa näin:
background:
linear-gradient(
red,
blue
)
;
Esimerkki 2
Tämä on tärkeää etenkin silloin kun koodinpätkä on pitkä:
background:linear-gradient(black 0% 12.5%, saddlebrown 12.5% 25%, red 25% 37.5%, orange 37.5% 50%, yellow 50% 62.5%, green 62.5% 75%, blue 75% 87.5%, indigo 87.5% 100%);
Vaikka koodinpätkä toimii teknisesti oikein, sitä on huomattavasti vaikeampi lukea ja ymmärtää verrattuna selkeästi sisennettyyn versioon:
background:
linear-gradient(
black 0% 12.5%,
saddlebrown 12.5% 25%,
red 25% 37.5%,
orange 37.5% 50%,
yellow 50% 62.5%,
green 62.5% 75%,
blue 75% 87.5%,
indigo 87.5% 100%
)
;
Tätä voi selkiyttää lisää laittamalla välilyöntejä niin että koodin eri osat alkavat samasta kohtaa:
background:
linear-gradient(
black 0% 12.5% ,
saddlebrown 12.5% 25% ,
red 25% 37.5% ,
orange 37.5% 50% ,
yellow 50% 62.5% ,
green 62.5% 75% ,
blue 75% 87.5% ,
indigo 87.5% 100%
)
;
Mikäli liukuvärisi ei tule näkyviin, koodissasi on virhe. On hyvin tärkeää että kaikki on kirjoitettu pilkuntarkasti oikein koodin rakenteen mukaan. Yleisimpiä virheitä on puuttuva pilkku, sulku tai muu välimerkki, tai sitten väärin kirjoitettu värin määritelmä.
Jokaisen sulkujen sisällä olevan rivin välissä tulee olla pilkku
❌: puuttuva pilkku
background:
linear-gradient(
90deg,
red,
blue
lime,
yellow
)
;
Korjaus: puuttuva sulku linear-gradient( ← lisää ) loppuun ennen ; merkkiä
Miten värejä kannattaa määritellä?
Jos sekoitat keskenään sinistä ja keltaista, minkä värin saat aikaiseksi?
Vastaus on sRGB-väriavaruudessa epäintuitiivisesti harmaa.
background-color:
color-mix(
in srgb,
blue,
yellow
)
;
Miksi? Tämä selittyy sillä miten värit muodostuvat ruudulla.
Näyttöjen ruudut koostuvat miljoonista pikseleistä. Jokainen pikseli on todellisuudessa kolme mikroskooppisen pientä eri väristä valoa vierekkäin: punainen, vihreä ja sininen.
Punaisen, vihreän ja sinisen päävärien sekoituksilla voi aikaansaada melkein minkä tahansa muun värin. Tätä värien skaalaa ja tapaa näyttää värejä kutsutaan sRGB-väriavaruudeksi.
Esimerkiksi: Jos punaiset ja vihreät valot ovat samaan aikaan täysillä, mutta sininen on pois päältä, saamme keltaisen värin.
background: rgb(255 255 0);
rgb(255 255 0) on tapa kuvata keltaista väriä numeerisesti käyttäen punaisen (R), vihreän (G) ja sinisen (B) valon yhdistelmän arvoja. Jokainen väri voi saada arvon väliltä 0 – 255, mikä määrittää kuinka paljon kyseistä väriä sekoitetaan.
Jos R = 0, G = 0 ja B = 0, eli jos valot ovat sammuksissa, saamme mustaa:
background: rgb(0 0 0);
Päinvastoin, jos kaikki valot ovat täysillä, eli jos R = 255, G = 255 ja B = 255, saamme valkoista:
background: rgb(255 255 255);
Miksi keltaisen ja sinisen sekoituksesta tulee sitten harmaa?
Sinisen RGB arvo on rgb(0 0 255) ja keltaisen rgb(255 255 0) — näiden kahden värin keskiarvo on rgb(127 127 127), joka onkin keskiharmaa...!
background: rgb(127 127 127);
Jos kuitenkin haluaa siirtymän sinisestä keltaiseen joka ei muutu keskeltä harmaaksi, paras vaihtoehto lienee lisätä itse ne värit joita haluaa siirtymässä näkyä:
