Vaaleanharmaa värikoodi. HTML -opiskelija

Vlad Merzhevich

HTML: ssä väri määritetään kahdella tavalla: käyttämällä heksadesimaalikoodia ja joidenkin värien nimellä. Heksadesimaalilukujärjestelmään perustuvaa menetelmää käytetään pääasiassa yleisimmin.

Heksadesimaaliset värit

Heksadesimaalilukuja käytetään värien määrittämiseen HTML -muodossa. Heksadesimaalijärjestelmä, toisin kuin desimaalijärjestelmä, perustuu nimensä mukaisesti numeroon 16. Numerot ovat seuraavat: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 , A, B, C, D, E, F. Numerot 10–15 korvataan latinalaisilla kirjaimilla. Pöytä 6.1 näyttää desimaaliluvun ja heksadesimaaliluvun välisen vastaavuuden.

Heksadesimaalijärjestelmässä suurempia kuin 15 muodostetaan yhdistämällä kaksi numeroa yhdeksi (taulukko 6.2). Esimerkiksi 255 desimaalia on FF -heksadesimaali.

Sekaannusten välttämiseksi numerojärjestelmän määritelmässä hajautusmerkki # sijoitetaan heksadesimaaliluvun eteen, esimerkiksi # aa69cc. Tässä tapauksessa rekisterillä ei ole väliä, joten on sallittua kirjoittaa # F0F0F0 tai # f0f0f0.

Tyypillinen HTML: ssä käytetty väri näyttää tältä.

Tässä verkkosivun taustaväriksi on asetettu # FA8E47. Numeron edessä oleva hash # tarkoittaa, että se on heksadesimaali. Kaksi ensimmäistä numeroa (FA) määrittävät värin punaisen komponentin, kolmannes - neljäs numero (8E) ovat vihreitä ja kaksi viimeistä numeroa (47) ovat sinisiä. Tämän seurauksena saat tämän värin.

Jokainen kolmesta väristä - punainen, vihreä ja sininen - voi ottaa arvoja välillä 00–FF, jolloin saadaan 256 sävyä. Siten värien kokonaismäärä voi olla 256x256x256 = 16.777.216 yhdistelmiä. Punaiseen, vihreään ja siniseen komponenttiin perustuvaa värimallia kutsutaan RGB: ksi (punainen, vihreä, sininen; punainen, vihreä, sininen). Tämä malli on additiivinen (lisäyksestä lisäykseen), jossa kaikkien kolmen komponentin lisääminen muodostaa valkoisen värin.

Jotta heksadesimaaliväreissä liikkuminen olisi helpompaa, ota huomioon muutamat säännöt.

• Jos värikomponenttien arvot ovat samat (esimerkiksi: # D6D6D6), saat harmaan sävyn. Mitä suurempi numero, sitä vaaleampi väri, arvot vaihtelevat # 000000 (musta) - #FFFFFF (valkoinen).
• Kirkas punainen väri muodostuu, jos punainen komponentti on asetettu maksimiin (FF) ja loput komponentit nollaan. Väri # FF0000 on punaisin mahdollinen punainen sävy. Sama koskee vihreää (# 00FF00) ja sinistä (# 0000FF).
• Keltainen (#FFFF00) saadaan sekoittamalla punaista vihreään. Tämä näkyy selvästi väripyörässä (kuva 6.1), jossa esitetään päävärit (punainen, vihreä, sininen) ja täydentävät tai täydentävät värit. Näitä ovat keltainen, syaani ja violetti (kutsutaan myös magentaksi). Yleensä mikä tahansa väri voidaan saada sekoittamalla lähellä olevia värejä. Syaani (# 00FFFF) saadaan siis yhdistämällä sininen ja vihreä.

Riisi. 6.1. Värirengas

Heksadesimaalivärejä ei tarvitse valita empiirisesti. Tätä tarkoitusta varten sopii graafinen editori, joka voi toimia eri värimallien kanssa, esimerkiksi Adobe Photoshop. Kuviossa 1 6.2 näyttää ikkunan värin valitsemiseksi tässä ohjelmassa, tuloksena oleva heksadesimaalinen nykyisen värin arvo on piirretty viivalla. Voit kopioida ja liittää sen koodiin.

Riisi. 6.2. Värien valintaikkuna Photoshopissa

Verkon värit

Jos asetat näytön värinlaaduksi 8 bitin (256 väriä), sama väri voidaan näyttää eri tavalla eri selaimissa. Tämä johtuu tavasta, jolla grafiikka näytetään, jolloin selain toimii omalla paletillaan eikä voi näyttää väriä, jota sillä ei ole paletissa. Tässä tapauksessa väri korvataan muiden, sen lähellä olevien pikselien yhdistelmällä, jotka jäljittelevät määritettyä väriä. Jotta väri pysyisi muuttumattomana eri selaimissa, otimme käyttöön ns. Verkkovärivalikoiman. Verkkovärit ovat sellaisia ​​värejä, joiden kullekin komponentille - punainen, vihreä ja sininen - asetetaan yksi kuudesta arvosta - 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC ), 255 (FF). Tämän komponentin heksadesimaaliluku ilmoitetaan suluissa. Kaikkien mahdollisten yhdistelmien värien kokonaismäärä antaa 6x6x6 - 216 väriä. Esimerkki verkkoväristä on # 33FF66.

Verkon värin tärkein ominaisuus on, että se näyttää samalta kaikissa selaimissa. Tällä hetkellä verkkovärien merkitys on hyvin pieni, koska monitorien laatu paranee ja niiden ominaisuudet laajenevat.

Värit nimen mukaan

Jotta numerosarja ei jää muistiin, voit käyttää sen sijaan yleisesti käytettyjen värien nimiä. Pöytä 6.3 luettelee suosittujen värinimien nimet.

Ei ole väliä millä tavalla määrität värin - sen nimen perusteella tai käyttämällä heksadesimaalilukuja. Nämä menetelmät ovat toiminnassaan samanarvoisia. Esimerkki 6.1 näyttää verkkosivun taustan ja tekstin värin asettamisen.

Esimerkki 6.1. Taustan ja tekstin väri

Näyteteksti

Tässä esimerkissä taustaväri asetetaan käyttämällä tunnisteen bgcolor -määritettä ja tekstin väri tekstimääritteen kautta. Muutoksen vuoksi tekstimääritteeksi asetetaan heksadesimaaliluku ja bgcolor asetetaan teal -varatulle avainsanalle.

HEX / HTML

HEX -väri on vain RGB -heksadesimaalinen esitys.

Värit esitetään kolmessa heksadesimaalilukuryhmässä, joissa kukin ryhmä vastaa omasta väristään: # 112233, jossa 11 on punainen, 22 on vihreä, 33 on sininen. Kaikkien arvojen on oltava välillä 00 ja FF.

Monissa sovelluksissa heksadesimaalivärien lyhennetty merkintämuoto on sallittu. Jos jokainen kolmesta ryhmästä sisältää samat merkit, esimerkiksi # 112233, ne voidaan kirjoittaa numerona # 123.

1. h1 (väri: # ff0000;) / * punainen * /
2. h2 (väri: # 00ff00;) / * vihreä * /
3. h3 (väri: # 0000ff;) / * sininen * /
4. h4 (väri: # 00f;) / * sama sininen, lyhenne * /

RGB

RGB (punainen, vihreä, sininen) väriavaruus koostuu kaikista mahdollisista väreistä, jotka voidaan saada sekoittamalla punaista, vihreää ja sinistä. Tämä malli on suosittu valokuvauksessa, televisiossa ja tietokonegrafiikassa.

RGB -arvot määritetään kokonaislukuna 0 - 255. Esimerkiksi rgb (0,0255) näytetään sinisenä, koska sininen parametri on asetettu korkeimpaan arvoonsa (255) ja loput arvoon 0.

Jotkin sovellukset (erityisesti verkkoselaimet) tukevat RGB -arvojen prosentuaalista kirjoittamista (0% - 100%).

1. h1 (väri: rgb (255, 0, 0);) / * punainen * /
2. h2 (väri: rgb (0, 255, 0);) / * vihreä * /
3. h3 (väri: rgb (0, 0, 255);) / * sininen * /
4. h4 (väri: rgb (0%, 0%, 100%);) / * sama sininen, prosentuaalinen kirjoitus * /

RGB -väriarvoja tuetaan kaikissa yleisimmissä selaimissa.

RGBA

Viime aikoina nykyaikaiset selaimet ovat oppineet työskentelemään RGBA -värimallin kanssa - RGB -laajennuksella, joka tukee alfa -kanavaa, joka määrittää objektin opasiteetin.

RGBA -väriarvo määritetään seuraavasti: rgba (punainen, vihreä, sininen, alfa). Alfa -parametri on numero välillä 0,0 (täysin läpinäkyvä) - 1,0 (täysin läpinäkymätön).

1. h1 (väri: rgb (0, 0, 255);) / * sininen normaalissa RGB * /
2. h2 (väri: rgba (0, 0, 255, 1);) / * sama sininen RGBA: ssa, koska opasiteetti: 100% * /
3. h3 (väri: rgba (0, 0, 255, 0,5);) / * opasiteetti: 50% * /
4. h4 (väri: rgba (0, 0, 255, .155);) / * opasiteetti: 15,5% * /
5. h5 (väri: rgba (0, 0, 255, 0);) / * täysin läpinäkyvä * /

RGBA: ta tukevat IE9+, Firefox 3+, Chrome, Safari ja Opera 10+.

Hsl

HSL -värimalli on lieriömäinen esitys RGB -mallista. HSL edustaa värejä intuitiivisemmin ja ymmärrettävämmin kuin tavallinen RGB. Mallia käytetään usein grafiikkasovelluksissa, värinvalitsimissa ja kuva -analyyseissä.

HSL tarkoittaa Hue, Saturation, Lightness / Luminance, jota ei pidä sekoittaa kirkkauteen.

Sävy määrittää värin sijainnin väripyörässä (0 - 360). Kylläisyys on prosenttiosuus kylläisyydestä (0% - 100%). Vaaleus on vaaleuden prosenttiosuus (0% - 100%).

1. h1 (väri: hsl (120, 100%, 50%);) / * vihreä * /
2. h2 (väri: hsl (120, 100%, 75%);) / * vaaleanvihreä * /
3. h3 (väri: hsl (120, 100%, 25%);) / * tummanvihreä * /
4. h4 (väri: hsl (120, 60%, 70%);) / * pastellivihreä * /

HSL: ää tukevat IE9 +, Firefox, Chrome, Safari ja Opera 10+.

HSLA

Samoin kuin RGB / RGBA, HSL: llä on HSLA -tila, jossa on alfa -kanava, joka osoittaa kohteen opasiteetin.

HSLA -väriarvo annetaan seuraavasti: hsla (värisävy, kylläisyys, vaaleus, alfa). Alfa -parametri on numero välillä 0,0 (täysin läpinäkyvä) - 1,0 (täysin läpinäkymätön).

1. h1 (väri: hsl (120, 100%, 50%);) / * vihreä normaalissa HSL: ssä * /
2. h2 (väri: hsla (120, 100%, 50%, 1);) / * sama vihreä HSLA: ssa, koska opasiteetti: 100% * /
3. h3 (väri: hsla (120, 100%, 50%, 0,5);) / * opasiteetti: 50% * /
4. h4 (väri: hsla (120, 100%, 50%, .155);) / * opasiteetti: 15,5% * /
5. h5 (väri: hsla (120, 100%, 50%, 0);) / * täysin läpinäkyvä * /

CMYK

CMYK -värimalli liittyy usein väritulostukseen ja tulostamiseen. CMYK (toisin kuin RGB) on vähentävä malli, mikä tarkoittaa, että korkeammat arvot liittyvät tummempiin väreihin.

Värit määritellään syaanin, magentan, keltaisen ja mustan (Key / blacK) suhteella.

Jokainen numero, joka määrittää värin CMYK: ssa, edustaa tietyn värin musteen prosenttiosuutta, joka muodostaa väriyhdistelmän, tai pikemminkin rasteripisteen kokoa, joka on painettu valokuvatulostimelle tietyn värin kalvolle (tai suoraan tulostuslevy CTP: n tapauksessa).

Jos haluat esimerkiksi saada värin PANTONE 7526, sekoita 9 osaa syaania, 83 osaa magentaa, 100 keltaista ja 46 mustaa. Tämä voidaan ilmaista seuraavasti: (9,83,100,46). Joskus he käyttävät tällaisia ​​nimityksiä: C9M83Y100K46 tai (9%, 83%, 100%, 46%) tai (0,09 / 0,83 / 1,0 / 0,46).

HSB / HSV

HSB (tunnetaan myös nimellä HSV) on samanlainen kuin HSL, mutta ne ovat kaksi eri värimallia. Molemmat perustuvat lieriömäiseen geometriaan, mutta HSB / HSV perustuu "hexcone" -malliin, kun taas HSL perustuu "bi-hexcone" -malliin. Taiteilijat käyttävät usein mieluummin tätä mallia, on yleisesti hyväksytty, että HSB / HSV -laite on lähempänä värin luonnollista käsitystä. Erityisesti HSB -värimallia käytetään Adobe Photoshopissa.

HSB / HSV tarkoittaa värisävyä, kylläisyyttä, kirkkautta / arvoa.

Sävy määrittää värin sijainnin väripyörässä (0 - 360). Kylläisyys on prosenttiosuus kylläisyydestä (0% - 100%). Kirkkaus on kirkkauden prosenttiosuus (0% - 100%).

XYZ

XYZ -värimalli (CIE 1931 XYZ) on puhtaasti matemaattinen tila. Toisin kuin RGB-, CMYK- ja muut mallit, XYZ: ssä pääkomponentit ovat "kuvitteellisia", eli et voi yhdistää X: tä, Y: tä ja Z: tä mihinkään sekoitettavaan värisarjaan. XYZ on päämalli lähes kaikille muille tekniikan aloilla käytettäville värimalleille.

LAB

LAB -värimalli (CIELAB, "CIE 1976 L * a * b *") lasketaan CIE XYZ -tilasta. Labia kehitettäessä tavoitteena oli luoda väriavaruus, jossa värin muutos on lineaarisempi ihmisen käsityksen näkökulmasta (verrattuna XYZ: ään), eli niin, että sama muutos värikoordinaattiarvoissa väriavaruuden eri alueet tuottavat saman värimuutoksen.

>> Värinhallinta

Heksadesimaaliset RGB -väriarvot

Värien kuvaus- ja käsittelymenetelmät eroavat toisistaan ​​siinä, mihin lopulliseen esitykseen ne on tarkoitettu. Vertaillaan esimerkiksi tulostusta ja tietokonenäyttöjen värejä. Ensimmäisessä tapauksessa perusta otetaan Valkoinen sen paperin väri, jolle kolme pääväriä myöhemmin levitetään: sininen, violetti ja keltainen... Sekoittamalla keskenään ja paperin valkoisen värin kanssa eri suhteissa nämä kolme pääväriä antavat eri värisävyjä, paitsi puhdasta mustaa, tai jos värit puuttuvat kokonaan, ne antavat paperin valkoisen värin. Jos lisäämme niihin mustaa, saamme CMYK- värintoistomenetelmä, kun vaadittu väri saadaan vähentämällä valkoisesta puuttuvat värit.

Toisessa tapauksessa perusta otetaan musta monitorin näytön väri, jonka jokainen solu hohtaa jollakin kolmesta väristä: punainen-Punainen, vihreä-vihreä ja sininen-sininen. Sitten, ilman hehkua, saamme puhtaan mustan näytön värin, ja kaikki tarvittavat värit asetetaan kunkin kolmen värin suhteella. Tässä tapauksessa saamme RGB-tapa siirtää väriä Päävärit voivat vaihdella 0 ennen 255 tai mistä 0% ennen 100% , tai se voidaan esittää heksadesimaalisena arvona. Alla olevassa kuvassa näet päävärien sekoittamisen tulokset.

Heksadesimaalilukujärjestelmässä, toisin kuin sen numerorivin desimaaliluvussa, ei ole kymmenen numeroa, vaan kuusitoista - tästä nimi. Näin ollen kahden numeron yhdistelmien toistuvat vaihtoehdot voivat olla vain - 256 , jatkaa numerosarjaa sen jälkeen 9 kirjeet A ennen F joten sarja näyttää tältä -

Tässä tapauksessa väri määritetään kolmella heksadesimaaliluvulla, joista jokainen koostuu kahdesta numerosta. Ensimmäinen numero määrittää voimakkuuden punainen värit, keskimäärin vihreä, viimeinen asia- sininen värit. Kaikki numerot voivat ottaa arvoja välillä 00 ennen FF(0-255). Esimerkiksi: vihreä annetaan muodossa # 00FF00, punainen - kuten # FF0000, sininen - kuten # 0000FF, valkoinen - kuten #FFFFFF, täydellinen värin tai mustan puuttuminen annetaan muodossa #000000 .

Alla olevassa lomakkeessa voit asettaa heksadesimaaliset arvot kullekin kolmesta väristä ja nähdä niiden sekoittumisen tulokset napsauttamalla tulostuskenttää.

Esimerkkejä joistakin heksadesimaalisista RGB -väriarvoista ovat punaisen, sinisen ja vihreän sävyt.

Värin määrittäminen merkkijonojen avulla

Käytön helpottamiseksi joillekin väreille ja niiden yhdistelmille on annettu nimet, jotka tunnistavat kaikki selaimet, ja monet niistä on voitu asettaa nimen mukaan. Alla olevassa taulukossa on lueteltu joitakin värien nimiä:

Turvallisen värinvalitsimen käyttö

Valitettavasti eri alustoilla ja eri järjestelmäasetuksilla oikea värintoisto on ongelma. Asia on, että selain yrittää aina säätää asiakirjan väripaletin järjestelmäasetusten ja näytön ominaisuuksien mukaan sekoittamalla värejä itsenäisesti ja korvaamalla ne. Tämän seurauksena joskus käyttäjä ei näe täsmälleen sitä, mitä verkkovastaava halusi näyttää hänelle. Poikkeus tilanteesta löytyi paletin käytöstä, jonka jokaisen värin takaavat tasapuolisesti kaikki selaimet eri alustoilla. Tämä on ns taattu paletti, jota myös kutsuttiin turvallinen paletti. Tämä paletti sisältää värit, joiden värikomponenteilla on seuraavat arvot: 00 ,33 ,66 ,99 , CC,FF, kaikin mahdollisin tavoin 216 niiden yhdistelmät.

Väri CSS -kielellä voidaan asettaa eri tavoilla:

• nimeltä,
• heksadesimaaliluvulla,
• RGB- ja RGBA -muodoissa,
• HSL- ja HSLA -muodoissa.

Värinmääritys nimen mukaan

Selaimet tukevat joidenkin värien määrittämistä elementteille nimen mukaan. Tässä taulukossa joitakin avainsanoja (englanninkielisiä värinimiä), joita käytetään väriominaisuuksien asettamiseen, ovat RGB -koodi, heksadesimaalikoodi (HEX) ja HSL -koodi.

Tämä on esimerkki värinimien käytöstä, värin nimeäminen on otettu laajennetusta taulukosta.

Tämä koodi toimii näin:

Värin asettaminen RGB: llä

RGB on lisävärimalli. Englanniksi lisäys- lisäys. RGB on lyhenne englanninkielisistä sanoista: punainen, vihreä, sininen - punainen, vihreä, sininen). Tästä on selvää, että RGB -mallissa värit syntetisoidaan lisäämällä kolme väriä (punainen, vihreä, sininen) eri määrinä.

Sekoittamalla punaista, vihreää ja sinistä saat useita miljoonia sävyjä. Kaikki mahdolliset yhdistelmät tallennetaan tietokoneiden muistiin.

Mennä asiaan.

Määritä ominaisuudet tässä muodossa käyttämällä rgb (r, g, b) -merkintää, jossa r, g, b ovat kolme kanavaa kullekin värille (punainen, vihreä, sininen). Kunkin kanavan arvot ovat välillä 0 - 255.

Esimerkkikoodi.

Jotta kaikki olisi selvää, annan esimerkkikoodin:

Tämän esimerkin pitäisi toimia näin:

Selityksiä esim.

Sivun alussa luomme luokan div.rgb, jota tarvitaan, jotta tagin luomat lohkot

näytetään halutussa koossa: 240 x 40 kuvapistettä. Rivikorkeuden ominaisuus (rivin korkeus) on asetettu arvoon 40px, eli yhtä suuri kuin lohkon korkeus, jolloin teksti voidaan näyttää lohkossa

pystysuoran keskellä. keskitä teksti vaakasuoraan säännön avulla ( text-align: center;).

Seuraavaksi asetamme koodissa lohkon taustavärin

käyttämällä style -määritettä taustaominaisuuden avulla ja määrittämällä arvot rgb (255, 0, 0), rgb (0, 255, 0) ja rgb (0, 0, 255). Toisin sanoen, teemme vuorotellen yhden kanavan mahdollisimman tyydyttyneeksi, ja jäljellä olevia kanavia ei käytetä synteesiin, koska niiden arvo on nolla.

Yritä muokata tätä esimerkkiä ja antaa omat arvosi, esimerkiksi rgb (100, 100, 100).

Värin asettaminen RGBA: lla

CSS3 esittelee uuden värityökalun - RGBA -muodon. Sitä voidaan kutsua RGB -mallin kehitykseksi, mutta siihen on lisätty yksi uusi kanava - A- tai alfa -kanava. Tämä kanava asettaa värin läpinäkyvyyden. Sen arvot on asetettu välille 0 - 1. Arvo 0 vastaa täyttä läpinäkyvyyttä, 1 - täydellistä opasiteettia (väri on sama kuin kolme ensimmäistä RGB -kanavaa) ja väli arvot, kuten 0,4 tai 0,6 - läpikuultavuus vaihtelevassa määrin.

Esimerkkikoodi.

Näin se toimii:

Tämä koodi on visuaalisesti samanlainen kuin seuraava, joka käyttää RGB -mallia väriarvon asettamiseen:

Tässä tulos:

Alfa -kanavan arvo, joka on nolla, tekee minkä tahansa värin näkymättömäksi - täysin läpinäkyväksi, yhtä vastaava arvo muuntaa RGB -koodin värin ilman muutoksia. Rgba (255,0,0,1.0) -ominaisuus näyttää punaisen (255, 0, 0).

Heksadesimaaliluvun mukaan (HEX -koodi)

Käytämme jokapäiväisessä elämässä desimaalilukujärjestelmää. Sen alkuperä on hyvin yksinkertainen - meillä on kymmenen sormea ​​käsissämme, ja aiemmin oli kätevää laskea sormiin elämässä. Jos desimaalijärjestelmässä on kymmenen numeroa: 0–9 ja numero 10 on jo seuraava numero, heksadesimaalijärjestelmässä on 16 numeroa ja seuraava numero on numero 16.

Värikoodien ilmoittamiseen heksadesimaaliluvuina käytetään tavallisia desimaalilukuja 0–9 ja numeroiden 10–15 käyttämiseen käytetään latinalaisia ​​kirjaimia A – F, eli (0, 1, 2, 3, 4, 5 (6, 7, 8, 9, A, B, C, D, E, F). Selvyyden vuoksi tiivistetään tämä taulukkoon:

Kirjoittaakseen heksadesimaalilukuja, jotka ovat suurempia kuin F (15 desimaalijärjestelmässä), kuten desimaalijärjestelmässä, he käyttävät myös kahden, mutta jo heksadesimaalisen, ketjutusta, mikä on selvää. Joten desimaaliluvun 255 kirjoittamiseen heksadesimaalimerkinnällä FF käytetään.

Heksadesimaalijärjestelmä on tietokoneelle ymmärrettävämpi, se käsittelee heksadesimaaliarvon määrittämät arvot nopeammin.

Voit määrittää värin heksadesimaalijärjestelmässä ennen numeerista arvoa # -merkillä, esimerkiksi: # FFC0CB. # FFC0CB -arvo itsessään koostuu kolmesta heksadesimaaliluvusta FF, C0 ja CB. Tämän merkinnän merkitys on sama kuin RGB -värin asettaminen (rgb (r, g, b)) - jokainen HEX -koodin heksadesimaaliluku osoittaa sen RGB -kanavan värikylläisyyden.

# FF0000

# 00FF00

# 0000FF

Tämä koodi näyttää seuraavat kohteet:

Ja tässä on kuva, jonka tulos on osiosta "Väriasetus RGB: llä" tällä sivulla.

Kuva 1. Värit RGB: ssä.

Näemme, että värit ovat identtiset.

Värin HEX-koodin lyhennetty merkintä on sallittu: 6-numeroinen numero voidaan kirjoittaa 3-numeroisena numerona. Tämä pätee vain, jos yhden kanavan väri -arvossa toistetaan kaksi numeroa.

Toisin sanoen seuraava merkinnän lyhenne on hyväksyttävä:

Esimerkiksi väri # ff22aa voidaan kirjoittaa näin - # f2a tai väri # 44aa22 voidaan määrittää # 4a2.

Väriasetus HSL: llä

CSS3 esittelee uuden muodon värien määrittämiseksi.

HSL on lyhenne englanninkielisistä sanoista Hue, Saturate ja Lightness.

Sävy HSL: ssä on väri -arvo erityisellä väripyörällä (kuva 2) ja se on määritetty asteina. Analogisesti RGB -mallin kanssa 0 ° vastaa punaista, 120 ° vihreää ja 240 ° sinistä.

Värisävy vaihtelee välillä 0 - 359.

Kuva 2. HSL -väripyörä.

Toinen arvo on kylläisyys (kylläisyys) asetetaan prosentteina. 100% kylläisyydellä väri on maksimaalisesti "mehukas", kun kylläisyysindikaattori siirtyy 0%: iin, väri muuttuu yhä himmeämmäksi ja muuttuu harmaaksi.

Kolmas arvo, keveys, asetetaan myös prosentteina. Mitä suurempi prosenttiosuus, sitä kirkkaampi väri. Ääriarvot 0% ja 100% tarkoittavat vastaavasti mustaa (ei valoa) ja valkoista (puhallettua) värejä riippumatta siitä, mikä väri väripyörästä valittiin ensimmäisellä kanavalla. Optimaalista arvoa voidaan pitää 50%: n värin kirkkauden arvona.

Väriasetus HSLA: lla

HSLA liittyy HSL: ään, aivan kuten RGB ja RGBA. HSLA -muodossa, kuten RGBA: ssa, lisätään alfa -kanava, joka vastaa värin läpinäkyvyydestä.

HSL -väri on helpompi lukea. Voimme sanoa, että se on intuitiivinen. Esimerkiksi hsl (120,60%, 50%) -koodi voi edustaa lopullista väriä, jos muistissa on HSL -väripyörän kuva. Samaa ei voida sanoa RGB- ja HEX -muodoista, näissä muodoissa määritetty värikoodi tulee ymmärrettäväksi vasta sen jälkeen, kun se on visualisoitu näytöllä.

Uudet CSS3 -muodot (HSL, HSLA ja RGBA) toimivat selaimissa alkaen versioista: IE 9.0, Opera 10.0 Firefox 3.0. Miten saan tyylit toimimaan vanhemmilla selaimilla?

Somebloсk (taustaväri: rgb (255,50,50); taustaväri: rgba (255,50,50,0,85))

Kun käytät tätä koodia vanhemmissa selaimissa, .somebloсk -luokan taustaväri, vaikka se ei käytä alfa -kanavaa, näytetään RGB -muodossa.

Katso piirustusta tarkasti. Avattavan ikkunan tausta on puoliksi läpinäkyvä. Tämä on melko yleinen suunnittelutemppu. Mietitään, miten tämä voidaan toteuttaa.

Tehtävä

Tee selainten välinen puoliksi läpinäkyvä väri.

Ratkaisu

Ensimmäinen ajatus tässä tilanteessa on käyttää png24 -kuvaa taustalla jo asetetulla läpikuultavuudella. Mutta tämä kuva on täysin turha. Voit tehdä täydellisesti ilman sitä (ja siksi ilman tarpeetonta pyyntöä palvelimelle). Yritetään löytää optimaalinen ratkaisu.

Toinen ajatus on käyttää. Mutta tässä tapauksessa se ei ole kovin kätevää. Loppujen lopuksi paitsi tausta, myös kirjoitukset muuttuvat läpikuultaviksi. Kyllä, kaikki ikkunat kerralla.

Voit tietysti yrittää lisätä ylimääräisen säiliön ja soveltaa siihen vain opasiteettia, mutta tämä HTML -elementti on tarkoitettu vain koristeluun ja on ilmeisesti tarpeeton. Voitko pärjätä ilman sitä?

Varma! Jos käytät RGBA: ta.

RGBA -värin kuvausmuoto

CSS3: n avulla voit määrittää värin käyttämällä RGB- ja RGBA -toimintoja. Samaan aikaan meidän on ilmoitettava jokaisen värikomponentin murto -osa, jolle on varattu yksi tavu (0–255, yhtäkkiä, kuka ei tiedä).

Tässä tapauksessa syntaksi on hyvin yksinkertainen:

Tausta: rgb (0, 255, 0); / * puhdas vihreä * /

RGBA: lle lisätään neljäs parametri - alfa -läpinäkyvyys (0-1).

Tausta: rgba (255, 0, 0, 0,5); / * puhdas punainen ja 50% läpinäkyvyys * /

Tässä se on, ratkaisu ongelmaamme. Riittää, kun asetat taustavärin rgba -painikkeella, ja kaikki näyttää siltä kuin tarvitsemme. Ei turhia kuvia ja elementtejä!

Mistä saan nämä numerot?

Voit tarkastella värikomponentteja Photoshopin pipettityökalulla.

Tietoja selainten välisestä yhteensopivuudesta

Koska RGB -toiminto on paljon vanhempi kuin RGBA ja se on ollut käytössä CSS2 -standardin ajoista lähtien, voit suojautua vanhimmilta selaimilta seuraavalla kaksoiskappaleella:

SomeBlock (tausta: rgb (255, 0, 0); tausta: rgba (255, 0, 0, 0,5);)

Tällä lähestymistavalla nykyaikaisten selainten isoisät eivät ole läpikuultavia, mutta itse väri pysyy oikeana.

Meidän on hoidettava IE erikseen. Aasit eivät ymmärrä RGBA: ta versioon 8 asti.

Kuten aina: maa talonpojille, tehtaat työläisille ja aasit kainalosauvalle! Kuten .

Tietenkin taisteluolosuhteissa laitamme tämän säännön erilliseen CSS: ään, jonka yhdistämme.

SomeBlock (tausta: läpinäkyvä; suodatin: progid: DXImageTransform.Microsoft.gradient (startColorstr = # 80ff0000, endColorstr = # 80ff0000); zoom: 1;)

Temppu on määrittää alku- ja loppuvärit samalla tavalla (ff0000 - punainen) ja hyödyntää sitä tosiasiaa, että tämän suodattimen kaltevuudelle voit asettaa alfa -kanavan (esimerkissä arvo 80).

Viite: suodatin käyttää heksadesimaalijärjestelmää ja FF -koodi vastaa täysin läpinäkymätöntä väriä (desimaaliluvulla 255). Näin ollen heksadesimaali 80 on desimaali 128, eli 50%: n läpinäkyvyys.

Kirjautunut sisään:

• IE 6-9
• Firefox 3+
• Opera 10+
• Safari 4
• Kromi