Tekstivärien Muuttaminen CSS:ssä
Aiemmin lisäsimme värejä tekstiin hyvin intuitiivisella ja suoraviivaisella tavalla. Tarkastellaan nyt 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 punainen väri.
index.html
styles.css
Huomio
Mielenkiintoisia värimalleja löytyy osoitteesta https://colorhunt.co/.
Väriä määrittävät muodot
Tarkastellaan kutakin muotoa tarkemmin.
Värin nimi
Voidaan käyttää varattuja värisanoja. Lista varatuista väreistä löytyy osoitteesta https://htmlcolorcodes.com.
Hex-muoto
Hex esittää värit kuusinumeroisena koodina, joka koostuu kolmesta kahden numeron parista. Jokainen pari kuvaa punaisen, vihreän ja sinisen (tässä järjestyksessä) voimakkuutta.
Hex-muodon arvot vaihtelevat välillä 00 (ei voimakkuutta) ja FF (maksimivoimakkuus).
RGB-muoto
RGB esittää värit kolmena lukuna, jotka vastaavat punaisen, vihreän ja sinisen (tässä järjestyksessä) voimakkuutta.
RGB-muodon arvot vaihtelevat välillä 0 (ei intensiteettiä) ja 255 (maksimi intensiteetti).
Huomio
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
Läpinäkyvyys rgb-väreissä voidaan saavuttaa käyttämällä rgba-merkintää (punainen, vihreä, sininen, alfa), jossa alfa tarkoittaa värin peittävyyden tai läpinäkyvyyden tasoa.
Alfa-arvo voi olla 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
Awesome!
Completion rate improved to 2.56Tekstivärien Muuttaminen CSS:ssä
Pyyhkäise näyttääksesi valikon
Aiemmin lisäsimme värejä tekstiin hyvin intuitiivisella ja suoraviivaisella tavalla. Tarkastellaan nyt 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 punainen väri.
index.html
styles.css
Huomio
Mielenkiintoisia värimalleja löytyy osoitteesta https://colorhunt.co/.
Väriä määrittävät muodot
Tarkastellaan kutakin muotoa tarkemmin.
Värin nimi
Voidaan käyttää varattuja värisanoja. Lista varatuista väreistä löytyy osoitteesta https://htmlcolorcodes.com.
Hex-muoto
Hex esittää värit kuusinumeroisena koodina, joka koostuu kolmesta kahden numeron parista. Jokainen pari kuvaa punaisen, vihreän ja sinisen (tässä järjestyksessä) voimakkuutta.
Hex-muodon arvot vaihtelevat välillä 00 (ei voimakkuutta) ja FF (maksimivoimakkuus).
RGB-muoto
RGB esittää värit kolmena lukuna, jotka vastaavat punaisen, vihreän ja sinisen (tässä järjestyksessä) voimakkuutta.
RGB-muodon arvot vaihtelevat välillä 0 (ei intensiteettiä) ja 255 (maksimi intensiteetti).
Huomio
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
Läpinäkyvyys rgb-väreissä voidaan saavuttaa käyttämällä rgba-merkintää (punainen, vihreä, sininen, alfa), jossa alfa tarkoittaa värin peittävyyden tai läpinäkyvyyden tasoa.
Alfa-arvo voi olla 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!
