kurssitilaus

CSS viittausopas

CSS-ominaisuus

Valinnainen kurssi

Kurssivinkki:

CodeW3C.com:n kikkakori

CSS hsl() -funktio

Määrittely ja käyttö

CSS:n hsl() Funktiot käyttävät väriä - saturaatio - kirkkaus -mallia (HSL) värien määrittämiseen. Voit myös lisätä valinnaisen alpha-komponentin (värien läpinäkyvyyden ilmaisemiseksi).

Vinkki:HSL tarkoittaa väriä (Hue), saturaatiota (Saturation) ja kirkkautta (Lightness), ja se edustaa värien kylpytynnyrikoordinaattijärjestelmää.

Huomioitavaa:hsla() Funktiot ovat hsl() Funktioiden vaihtoehdot. Suositellaan käyttämistä hsl() Funktiot.

Esimerkki

Esimerkki 1

Määritä erilaisia HSL(A)-värejä:

#p1 {taustaväri: hsl(120 100% 50%);} /* Vihreä */
#p2 {taustaväri: hsl(120 100% 75%);} /* Keltainen vihreä */
#p3 {taustaväri: hsl(120 100% 25%);} /* Tumma vihreä */
#p4 {taustaväri: hsl(120 100% 25% / 20%);} /* Häivyysarvon oma tumma vihreä */
#p5 {taustaväri: hsl(120 60% 70%);} /* Pehmeä vihreä */
#p6 {taustaväri: hsl(290 100% 50%);} /* Purppura */
#p7 {taustaväri: hsl(290 60% 70%);} /* Pehmeä purppura */
#p8 {taustaväri: hsl(290 60% 70% / 0.3);} /* Häivyysarvon oma pehmeä purppura */

Kokeile itse

Esimerkki 2

Vanha komma-erottelu arvojen syntax

#p1 {background-color:hsl(120, 100%, 50%);} /* Vihreä */
#p2 {background-color:hsl(120, 100%, 75%);} /* Kevyt vihreä */
#p3 {background-color:hsl(120, 100%, 25%);} /* Syvä vihreä */
#p4 {background-color:hsl(120, 60%, 70%);} /* Pehmeä vihreä */
#p5 {background-color:hsl(290, 100%, 50%);} /* Purppura */
#p6 {background-color:hsl(290, 60%, 70%);} /* Pehmeä purppura */

Kokeile itse

CSS syntax

Absoluuttinen arvo syntax

hsl(väriaste kylväisyys valoisaus / A)

arvo	kuvaus
väriaste	Välttämätön. Määrittää asteet väripyörällä (0-360) - 0 (tai 360) on punainen, 120 on vihreä ja 240 on sininen.
kylväisyys	Välttämätön. Määrittää väriä koskevan kylläisyyden; 0% on harmaa ja 100% on täysiverinen (täyskylläisyys). Voit myös käyttää None (samoin kuin 0%).
valoisaus	Välttämätön. Määrittää värikylläisyyden; 0% on musta, 50% on normaali ja 100% on valkoinen. Voit myös käyttää None (samoin kuin 0%).
/ A	Valinnainen. Ilmaisee värikanavan arvon (0% tai 0 - täysin läpinäkyvä asti 100% tai 100 - täysin peittävä). Voit myös käyttää None (merkitsee, että ei ole alpha-kanavaa). Oletusarvo on 100%.

Suhteellinen arvo syntax

hsl(from alkuperäinen väri väriaste kylväisyys valoisaus / A)

arvo	kuvaus
alkuperäinen väri alkuperäinen väri	alkuperäinen väri Tämä on absoluuttinen väri, johon suhteellinen väri perustuu.
väriaste	Välttämätön. Määrittää asteet väripyörällä (0-360) - 0 (tai 360) on punainen, 120 on vihreä ja 240 on sininen.
kylväisyys	Välttämätön. Määrittää väriä koskevan kylläisyyden; 0% on harmaa ja 100% on täysiverinen (täyskylläisyys). Voit myös käyttää None (samoin kuin 0%).
valoisaus	Välttämätön. Määrittää värikylläisyyden; 0% on musta, 50% on normaali ja 100% on valkoinen. Voit myös käyttää None (samoin kuin 0%).
/ A	Valinnainen. Ilmaisee värikanavan arvon (0% tai 0 - täysin läpinäkyvä asti 100% tai 100 - täysin peittävä). Voit myös käyttää None (merkitsee, että ei ole alpha-kanavaa). Oletusarvo on 100%.