Tekstivärien Muuttaminen CSS:ssä
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 punainen väri.
index.html
styles.css
Voimme löytää mielenkiintoisia värimalleja osoitteesta https://colorhunt.co/.
Väriä määrittävät muodot
Tarkastellaan kutakin muotoa yksityiskohtaisesti.
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. Kukin pari ilmaisee punaisen, vihreän ja sinisen voimakkuuden (tässä järjestyksessä).
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 voimakkuutta (tässä järjestyksessä).
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
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
Can you explain the difference between hex, RGB, and color names in CSS?
How do I choose which color format to use in my project?
Can you show more examples of using rgba for transparency?
Mahtavaa!
Completion arvosana parantunut arvoon 2.56Tekstivärien Muuttaminen CSS:ssä
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 punainen väri.
index.html
styles.css
Voimme löytää mielenkiintoisia värimalleja osoitteesta https://colorhunt.co/.
Väriä määrittävät muodot
Tarkastellaan kutakin muotoa yksityiskohtaisesti.
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. Kukin pari ilmaisee punaisen, vihreän ja sinisen voimakkuuden (tässä järjestyksessä).
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 voimakkuutta (tässä järjestyksessä).
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
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!
