Tekstin ja Värien Muotoilu
Pyyhkäise näyttääksesi valikon
Aiemmin lisäsimme värejä tekstiin hyvin intuitiivisella ja suoraviivaisella tavalla. Tarkastellaan kuitenkin tarkemmin värien käyttöä.
Väri
Tekstin väri voidaan määrittää tekstielementille CSS:n color-ominaisuudella, jolle voidaan antaa arvo useissa eri muodoissa.
Yleisimmin käytetyt väriarvot ovat RGB, heksadesimaali ja värinimet. Tarkastellaan seuraavaa esimerkkiä, jossa tekstiin lisätään sininen väri.
index.html
styles.css
Väritarkkuuden määrittelymuodot
Tarkastellaan kutakin muotoa tarkemmin.
Värinimi
Voimme käyttää varattuja värisanoja. Luettelo varatuista väreistä löytyy osoitteesta https://htmlcolorcodes.com.
CSS tarjoaa ennalta määritettyjä värinimiä, kuten blue, red, green, purple ja muita. Ne ovat helposti luettavia, mutta värivalikoima on rajallinen.
Hex-muoto
Hex esittää värit kuusinumeroisena koodina, joka koostuu kolmesta kahden numeron parista #-merkin jälkeen. Kukin pari ilmaisee punaisen, vihreän ja sinisen voimakkuuden (tässä järjestyksessä).
Hex-muotoiset arvot vaihtelevat välillä 00 (ei intensiteettiä) ja FF (maksimi intensiteetti).
RGB-muoto
RGB esittää värejä kolmena lukuna, jotka vastaavat punaisen, vihreän ja sinisen (tässä järjestyksessä) intensiteettiä.
RGB-muotoiset arvot vaihtelevat välillä 0 (ei intensiteettiä) ja 255 (maksimi intensiteetti).
Sekä hex- että rgb-arvot ovat laajasti käytössä verkkosuunnittelussa, ja valinta niiden välillä riippuu henkilökohtaisista mieltymyksistä ja projektin vaatimuksista.
Läpinäkyvyys RGBA:n avulla
Läpinäkyvyys rgb-väreissä voidaan saavuttaa käyttämällä rgba-merkintää (red, green, blue, alpha), jossa alpha määrittää värin peittävyyden tai läpinäkyvyyden tason.
Alpha-arvo voi vaihdella välillä 0 (täysin läpinäkyvä) ja 1 (täysin peittävä). Esimerkiksi RGBA-arvo rgba(0, 255, 0, 0.5) edustaa vihreää väriä 50 %:n peittävyydellä.
index.html
styles.css
Kiitos palautteestasi!
Kysy tekoälyä
Kysy tekoälyä
Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme
