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 asettaa 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äriä määrittävät muodot
Tarkastellaan kutakin muotoa tarkemmin.
Värin nimi
Voidaan 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. Jokainen pari ilmaisee punaisen, vihreän ja sinisen voimakkuuden (tässä järjestyksessä).
Hex-muodon arvot vaihtelevat välillä 00 (ei intensiteettiä) ja FF (maksimi-intensiteetti).
RGB-muoto
RGB esittää värit kolmena lukuna, jotka vastaavat punaisen, vihreän ja sinisen (tässä järjestyksessä) intensiteettiä.
RGB-muodon 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
