Tekstin Värien Muuttaminen CSS:ssä
Aiemmin lisäsimme värejä tekstiin hyvin intuitiivisella ja suoraviivaisella tavalla. Tarkastellaan nyt tarkemmin värien käyttämistä.
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
Huomautus
Löydämme mielenkiintoisia värimalleja osoitteesta https://colorhunt.co/.
Värit määrittävät muodot
Tarkastellaan kutakin muotoa tarkemmin.
Värin nimi
Voimme käyttää varattuja värisanoja. Luettelo 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 ilmaisee punaisen, vihreän ja sinisen (tässä järjestyksessä) voimakkuuden.
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ää (red, green, blue, alpha), jossa alpha määrittää värin peittävyyden tai läpinäkyvyyden tason.
Alpha-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.56Tekstin Vä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ämistä.
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
Huomautus
Löydämme mielenkiintoisia värimalleja osoitteesta https://colorhunt.co/.
Värit määrittävät muodot
Tarkastellaan kutakin muotoa tarkemmin.
Värin nimi
Voimme käyttää varattuja värisanoja. Luettelo 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 ilmaisee punaisen, vihreän ja sinisen (tässä järjestyksessä) voimakkuuden.
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ää (red, green, blue, alpha), jossa alpha määrittää värin peittävyyden tai läpinäkyvyyden tason.
Alpha-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!
