Žuta boja css. Postavljanje boje za tekst u CSS-u

Kodovi boja u CSS-u se koriste za određivanje boja. Obično se kodovi boja ili vrijednosti boja koriste za postavljanje boje za prednji plan elementa (npr. tekst, boja veze) ili pozadinu elementa (pozadina, boja bloka). Također se mogu koristiti za promjenu boje gumba, obruba, markera, lebdenja i drugih ukrasnih efekata.

Možete postaviti svoje vrijednosti boja u različitim formatima. Sljedeća tablica navodi sve moguće formate:

Ti su formati detaljnije opisani u nastavku.

CSS boje - heksadecimalni kodovi

Heksadecimalni kod boja je šesteroznamenkasti prikaz boja. Prve dvije znamenke (RR) su crvena vrijednost, sljedeće dvije su zelena vrijednost (GG), a posljednje dvije su plava vrijednost (BB).

CSS boje - kratki heksadecimalni kodovi

Kratki heksadecimalni kod boja je kraći oblik zapisa od šest znakova. U ovom formatu svaka znamenka se ponavlja kako bi se dobila ekvivalentna šesteroznamenkasta vrijednost boje. Na primjer: #0F0 postaje #00FF00.

Heksadecimalna vrijednost može se uzeti iz bilo kojeg grafičkog softvera kao što je Adobe Photoshop, Core Draw, itd.

Svakom heksadecimalnom kodu boje u CSS-u prethodit će znak "#". Slijede primjeri upotrebe heksadecimalnog zapisa.

CSS boje - RGB vrijednosti

RGB vrijednost je kod boje koji se postavlja pomoću svojstva rgb(). Ovo svojstvo ima tri vrijednosti: po jednu za crvenu, zelenu i plavu. Vrijednost može biti cijeli broj, od 0 do 255, ili postotak.

Bilješka: Ne podržavaju svi preglednici svojstvo boje rgb() pa se ne preporučuje da ga koristite.

Ispod je primjer koji prikazuje više boja pomoću RGB vrijednosti.

Generator kodova boja

Pomoću naše usluge možete stvoriti milijune kodova boja.

Sigurne boje preglednika

Ispod je tablica od 216 boja koje su najsigurnije i neovisne o računalu. Ove boje u CSS-u kreću se od 000000 do FFFFFF heksadecimalnog koda. Sigurni su za korištenje jer osiguravaju da će sva računala ispravno prikazati boju kada rade s paletom boja od 256.

Pažljivo pogledajte crtež. Pozadina padajućeg okvira je prozirna. Ovo je prilično uobičajena tehnika dizajna. Razmislimo o tome kako se to može provesti.

Zadatak

Učinite crossbrowser prozirnom bojom.

Riješenje

Prva pomisao u ovoj situaciji je korištenje png24 slike za pozadinu s već postavljenom prozirnošću. Ali ova slika je potpuno suvišna. Možete se dobro snaći i bez toga (i stoga bez dodatnog zahtjeva poslužitelju). Pokušajmo pronaći najbolje rješenje.

Druga misao je koristiti . Ali u ovom slučaju to nije baš zgodno. Uostalom, tada će ne samo pozadina, već i natpisi postati prozirni. Da, zapravo, cijeli prozor odjednom.

Naravno, možete pokušati dodati dodatni spremnik i primijeniti neprozirnost samo na njega, ali ovaj HTML element bit će samo za ukras i očito će biti suvišan. Je li moguće bez toga?

Naravno! Ako koristite RGBA.

RGBA format opisa boja

CSS3 omogućuje određivanje boje pomoću funkcija RGB i RGBA. Istodobno, moramo navesti udio svake komponente boje, pod kojim je dodijeljen jedan bajt (od 0 do 255, odjednom netko ne zna).

Sintaksa za ovaj slučaj je vrlo jednostavna:

pozadina: rgb(0, 255, 0); /* čista zelena boja */

Za RGBA se dodaje četvrti parametar - alfa prozirnost (od 0 do 1).

Pozadina: rgba(255, 0, 0, 0,5); /* čisto crvena s 50% neprozirnosti */

Evo ga, rješenje za naš problem. Dovoljno je postaviti boju pozadine pomoću rgba i sve će izgledati kako nam treba. Bez dodatnih slika i elemenata!

Gdje mogu dobiti ove brojeve?

Možete pogledati sastavne boje pomoću alata za kapaljku u Photoshopu.

O kompatibilnosti s različitim preglednicima

Budući da je RGB funkcija mnogo starija od RGBA i postoji još od dana CSS2 standarda, možete koristiti sljedeću duplikatnu konstrukciju za zaštitu od najstarijih preglednika:

SomeBlock (pozadina: rgb(255, 0, 0); pozadina: rgba(255, 0, 0, 0.5); )

Ovim pristupom pradjedovi modernih preglednika neće imati prozirnost, ali će sama boja ostati ispravna.

Zasebno, morat ćete se pobrinuti za IE. Oni poput magarca do zaključno 8. verzije ne razumiju RGBA.

Kao i uvijek: zemlja - seljacima, tvornice - radnicima, a magarci - štaka! Kao .

Naravno, u borbenim uvjetima ovo pravilo izvlačimo u poseban CSS, koji uključujemo .

SomeBlock ( background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ff0000,endColorstr=#80ff0000); zoom: 1; )

Trik je u tome da navedete iste početne i završne boje (ff0000 - crvena) i iskoristite činjenicu da možete postaviti alfa kanal za gradijent u ovom filtru (u primjeru, vrijednost je 80).

Za referencu: filtar koristi heksadecimalni sustav i kod FF odgovara potpuno neprozirnoj boji (u decimalnom obliku je 255). Prema tome, heksadecimalni 80 je decimalni 128, tj. 50% prozirnosti.

Provjereno u:

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

Računalni monitori, kao i zasloni mobitela, pametnih telefona i tableta, sastoje se od tisuća malih kvadrata zvanih pikseli (ako pažljivo pogledate u monitor, možete ih vidjeti). Kada je ekran isključen, crn je jer ne emitira svjetlost; kada je uključen, svaki piksel poprima drugu boju, što stvara sliku koju vidimo kada gledamo u ekran.

Kada postavljamo boju za okvir elementa, pozadinu ili tekst, postavljamo boju za piksele od kojih se sastoje. Postoje dva opća pristupa određivanju boja u CSS-u: po imenu ili po vrijednosti. Najjednostavniji je po imenu: crvena je crvena, plava je plava i tako dalje, ali CSS ne nudi mnogo naziva boja za izbor. S druge strane, navođenje vrijednosti boje podrazumijeva puno veći izbor nijansi. Postoji nekoliko načina za određivanje vrijednosti boje, a dva najčešća su RGB i heksadecimalne vrijednosti. Oni su dio CSS-a od prve verzije i svaki ih web preglednik podržava. CSS3 je uveo još nekoliko opcija za definiranje boja: RGBA, HSL i HSLA, manje su višepregledni, ali ih posljednje verzije preglednika već podržavaju.

Nazivi boja

Najjednostavniji i najočitiji način za određivanje boje u CSS-u je odabir unaprijed definiranog naziva boje iz skupa ključnih riječi. Dostupno je ukupno 147 ključnih riječi s nazivima boja: 17 naziva su standardne boje koje su uvedene u ranim verzijama HTML-a (bijela, crna, crvena, žuta, plava, zelena, narančasta, ljubičasta, siva, srebrna, aqua, fuksija, limeta , kestenjasta, tamnoplava, maslinasta i teal) i još 130 dodanih u CSS2. Cijeli popis dostupnih naziva boja možete vidjeti u HTML odjeljku naše tablice boja.

RGB i RGBA

RGB sustav koristi tri broja koji opisuju relativnu količinu crvene, zelene i plave koje su pomiješane kako bi se proizvela bilo koja zadana nijansa. Brojevi mogu biti u rasponu od 0 do 255. Razmotrite RGB kod za tamnoljubičastu boju: rgb(204, 51, 255), koji se može primijeniti na svojstvo boje CSS fonta, na primjer:

Boja: rgb(205, 51, 255);

RGBA sustav dodaje još jedan broj koji opisuje prozirnost boje, vrijednost može biti u rasponu od 0 (potpuno transparentno) do 1 (potpuno neprozirno). Vrijednost od 0,5 čini boju prozirnom, uzmite u obzir prozirnu verziju tamnoljubičaste boje koju daje RGBA sustav:

Boja: rgba(204, 51, 255, 0,5);

Možete vidjeti da su vrijednosti crvene, zelene i plave boje slične RGB sustavu. Četvrti broj - 0,5 je stupanj transparentnosti. "A" u RGBA označava alfa kanal, što je izraz grafičkog dizajna za transparentnost.

RGBA boje su korisne za stvaranje poluprozirnih elemenata koji omogućuju vidljivost elemenata ispod njih.

HSL i HSLA

HSL (h ue, s saturation, lightness) sustav opisuje boje na temelju nijanse, zasićenosti i svjetline. Ovdje je ista tamnoljubičasta boja navedena u HSL formatu:

Boja: hsl (285, 100%, 60%);

Prvi broj je nijansa, izražena u stupnjevima od 0 do 360, koja određuje položaj boje na kotaču boja. Drugi broj je zasićenost, definiran kao postotak od 0% do 100%, što pokazuje koliko će boja biti zasićena (svijetla). Treći broj je svjetlost, definira se kao postotak na isti način kao i zasićenost, svjetlina označava koliko će boja biti svijetla ili tamna.

HSLA sustav, poput RGBA, dodaje četvrti broj između 0 i 1 koji određuje koliko bi boja trebala biti transparentna. Vrijednost od 0,5 čini boju poluprozirnom, uzmite u obzir prozirnu verziju tamnoljubičaste boje koju daje HSLA sustav:

Boja: hsla(285, 100%, 60%, 0,5);

Heksadecimalne vrijednosti boja

Heksadecimalni kod boje je šest znakova iza simbola #:

Svaki skup od dva znaka predstavlja broj od 0 do 255. Dakle, prva dva znaka predstavljaju crvenu boju, sljedeća dva zelenu, a posljednja dva plavu. U ovom heksadecimalnom kodu je vrlo sličan RGB-u, s tom razlikom što je ovdje svaka boja navedena u heksadecimalnom zapisu umjesto decimalnog.

Ako se svaki par znamenki sastoji od istih znakova, tada se vrijednost boje može skratiti. Međutim, ako heksadecimalni kod izgleda ovako, na primjer, #bbff10, tada se takav unos ne može skratiti.

Boja: #f00; boja: #ff0000;

Napomena: Preglednici koji ne podržavaju ove vrijednosti boja (rgba, hsl i hsla) ne povezuju nijednu boju s pozadinom ili fontom, potpuno zanemarujući deklaraciju. U ovom slučaju, pozadina elementa je postavljena na zadanu vrijednost (postaje potpuno prozirna), a tekst je postavljen ili na zadanu vrijednost (crna) ili na boju naslijeđenu od nadređenog elementa.

Za starije preglednike treba dodati dodatno pravilo koje definira boju u RGB formatu, heksadecimalnu vrijednost ili ime. Takvo pravilo mora biti ispred pravila koje specificira RGBA, HSL ili HSLA boju. To će osigurati osiguranje za boju, jer u CSS-u, ako postoje dva pravila koja postavljaju vrijednost za isto svojstvo, pravilo postavljeno ispod u kodu uvijek ima prednost. To znači da ako preglednik podržava RGBA, HSL ili HSLA formate, tada će koristiti drugo pravilo, a ako ne, prvo.

Heksadecimalni brojevi se koriste za određivanje boja. Heksadecimalni sustav, za razliku od decimalnog sustava, temelji se, kako mu ime govori, na broju 16. Brojevi će biti sljedeći: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C , D, E, F. Brojevi od 10 do 15 zamjenjuju se latiničnim slovima. Brojevi veći od 15 u heksadecimalnom sustavu nastaju spajanjem dva broja u jedan. Na primjer, broj 255 u decimalnom obliku odgovara broju FF u heksadecimalnom. Kako bi se izbjegla zabuna u definiciji brojevnog sustava, heksadecimalnom broju prethodi hash simbol #, na primjer #666999. Svaka od tri boje - crvena, zelena i plava - može imati vrijednosti od 00 do FF. Tako je oznaka boje podijeljena na tri komponente #rrggbb, pri čemu prva dva znaka označavaju crvenu komponentu boje, dva srednja zelenu, a posljednja dva plavu. Dopušteno je koristiti skraćeni oblik #rgb, gdje svaki znak treba udvostručiti. Dakle, unos #fe0 treba smatrati #ffee00.

imenom

Preglednici podržavaju neke boje po imenu. U tablici. 1 prikazuje nazive, heksadecimalni kod, vrijednosti u RGB, HSL formatu i opis.

S RGB-om

Možete definirati boju koristeći crvene, zelene i plave vrijednosti u decimalnim terminima. Svaka od tri komponente boje ima vrijednost od 0 do 255. Također je prihvatljivo postaviti boju kao postotak, dok će 100% odgovarati broju 255. Prvo se specificira ključna riječ rgb, a zatim se komponente boje navedeno u zagradama, odvojeno zarezima, na primjer rgb(255, 128, 128) ili rgb(100%, 50%, 50%).

RGBA

RGBA format je po sintaksi sličan RGB-u, ali uključuje alfa kanal koji postavlja transparentnost elementa. Vrijednost 0 je potpuno prozirna, 1 je neprozirna, a srednja vrijednost poput 0,5 je prozirna.

RGBA je dodan u CSS3, tako da valjanost CSS koda treba provesti prema ovoj verziji. Treba napomenuti da je CSS3 standard još uvijek u razvoju i da se neke njegove značajke mogu promijeniti. Na primjer, RGB boja dodana svojstvu background-color prolazi provjeru valjanosti, ali ona dodana svojstvu background-color ne prolazi. Istodobno, preglednici sasvim ispravno razumiju boju za oba svojstva.

HSL

Naziv HSL formata formiran je od kombinacije prvih slova Hue (nijansa), Saturate (zasićenost) i Lightness (svjetlina). Nijansa je vrijednost boje na kotaču boja (slika 1) i određena je u stupnjevima. 0° je crvena, 120° je zelena, a 240° je plava. Vrijednost nijanse može varirati od 0 do 359.

Riža. 1. Kotačić u boji

Zasićenost je intenzitet boje, mjeren u postocima od 0% do 100%. Vrijednost od 0% označava da nema boje i ima nijansu sive, 100% je maksimalna vrijednost zasićenja.

Svjetlost postavlja koliko je svijetla boja i određena je u postocima od 0% do 100%. Male vrijednosti čine boju tamnijom, dok je visoke vrijednosti čine svjetlijom, ekstremne vrijednosti od 0% i 100% odgovaraju crno-bijeloj.

HSLA

HSLA format je po sintaksi sličan HSL-u, ali uključuje alfa kanal koji postavlja transparentnost elementa. Vrijednost 0 je potpuno prozirna, 1 je neprozirna, a srednja vrijednost poput 0,5 je prozirna.

Vrijednosti boja u formatima RGBA, HSL i HSLA dodaju se u CSS3, pa kada koristite ove formate, provjerite valjanost koda u odnosu na verziju.

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

Upozorenje

Sve metode hvatanja lava navedene na stranici su teorijske i temelje se na računskim metodama. Autori ne jamče vašu sigurnost prilikom njihove uporabe i odriču se bilo kakve odgovornosti za rezultat. Zapamtite, lav je grabežljivac i opasna životinja!

Rezultat ovog primjera prikazan je na sl. 2.

Riža. 2. Boje na web stranici

Izražavam neizravnu zahvalnost Googleu na ideji i nudim svojim kolegama palicu: morate sa svojim RSS feedom podijeliti s čitateljima strane resurse o razvoju weba, koji sadržajno i zanimljivo pišu o ovoj temi. Da biste smanjili besposleni razgovor, morate slijediti nekoliko jednostavnih odredbi:

1. Na svom blogu objavite prijevod (besplatan, s komentarima i dodacima) članka iz izvora koji se predstavlja.
2. Prijevodi, kao i njihovi izvori, ne bi se trebali ponavljati kako bi se osigurala pokrivenost i raznolikost informacija.
3. Dobro je spomenuti blogericu od koje je stigla dobra vijest i po mogućnosti prenijeti štafetu dalje.
4. Datumi releja nisu postavljeni; sigurno će se naći netko tko će zaustaviti ovu bakhanaliju.

Izvorni izvor za ovaj post bio je jedan od postova Drewa McLellana na blogu kolektivnog kalendara 24ways. Ići!

Što je RGBA boja?

Neću odati tajnu ako kažem da se potrebna nijansa boje stvara u CSS-u miješanjem crveno zelene i plave u potrebnim omjerima. Postoji, međutim, jedno upozorenje - bez obzira koju boju odabrali, uvijek će biti čvrsta i neprozirna.

CSS3 nudi nekoliko novih načina za određivanje boja, od kojih je jedan korištenje RGBA modela boja. "A" u akronimu znači "Alpha"; njegova je vrijednost zaslužna za količinu prozirnosti boje. Uz pomoć ovog modela možemo odrediti ne samo potrebnu kombinaciju crvene, zelene i plave, već i odrediti koliko boja "sja". Nešto slično se može primijetiti kada radite sa slojevima u Photoshopu.

Čemu onda služi svojstvo neprozirnosti?

Stvar je u tome što se definicija transparentnosti za boju razlikuje od postavke transparentnosti za element, postavljene pomoću css-svojstva neprozirnost. Pogledajmo primjer.

Imamo h1 naslov s određenim bojama za tekst i pozadinu na stranici s pozadinskom slikom.

H1 ( boja: rgb (0, 0, 0); boja pozadine: rgb (255, 255, 255); )

Postavljanjem svojstva neprozirnosti možete primijeniti transparentnost na cijeli element u cjelini:

H1 ( boja: rgb (0, 0, 0); boja pozadine: rgb (255, 255, 255); neprozirnost: 0,5; )

RGBA model nam daje fleksibilniju opciju – kontrolirati samo prozirnost boje, a ne cijeli element. Na primjer, možete postaviti transparentnost samo na boju pozadine:

H1 ( boja: rgb (0, 0, 0); boja pozadine: rgba (255, 255, 255, 0,5); )

Ili ostavite pozadinu nepromijenjenu i dodijelite transparentnost samo tekstu:

H1 ( boja: rgba (0, 0, 0, 0,5); boja pozadine: rgb (255, 255, 255); )

Vjerojatno je rjeđe koristiti sintaksu rgb() za određivanje boje nego heksadecimalni zapis (poput #fff), ali u ovom slučaju to je neobična potreba jer nije moguće napisati RGBA vrijednost u heksadecimalnom zapisu. Stoga postavljamo rgba () točno ovako:

Boja: rgba(255, 255, 255, 0,5);

Baš kao i u rgb(), prve tri vrijednosti su odgovorne za kombinaciju crvene, zelene i plave. Mogu uzeti i cjelobrojne vrijednosti u rasponu od 0-255 i postotke u rasponu od 0 do 100%. Četvrta vrijednost određuje stupanj transparentnosti, u rasponu od 0 (potpuno proziran) do 1 (potpuno neproziran).

Ovu metodu možete sigurno koristiti svugdje gdje obično postavljate boje u CSS-u: za boje pozadine i teksta, za obrube, obrise i tako dalje.

Podrška za preglednik

Većina modernih preglednika (Firefox, Safari, Opera, Google Chrome) podržava RGBA boje, ali ne i Internet Explorer.

Ne preostaje ništa drugo nego odrediti RGBA boje za preglednike koji ih podržavaju, a za ostale da smisle svoje “štake”.

CSS raščlanjivanje radi u preglednicima na takav način da ako se tijekom raščlanjivanja pravila naiđe na bilo koju nepoznatu vrijednost, ona će biti zanemarena. Iskoristimo ovo znanje da preglednicima koji ne razumiju damo uobičajenu neprozirnu boju. Da biste to učinili, dovoljno je navesti boju u prvoj deklaraciji u formatu RGB, a drugi postavite nijansu boje u formatu RGBA— za preglednike koji podržavaju ovaj model boja.

H1 ( boja: rgb (127, 127, 127); boja: rgba (0, 0, 0, 0,5); )

U slučajevima kada želite primijeniti transparentnost na svojstvo boje pozadine, možete posegnuti za korištenjem PNG slike s alfa kanalom kako biste postigli potpuno isti učinak. Naravno, ovo je skuplja metoda, za razliku od “čistog” CSS-a, budući da ćete morati kreirati svoj PNG za svaku razinu transparentnosti, ali nema ribe i raka.

Koristimo isti princip kao u prethodnom primjeru: prvo postavljamo pozadinu za sve preglednike, a zatim prepisujemo niz imajući na umu RGBA.

H1 (pozadina: transparentni url(black50.png); pozadina: rgba(0, 0, 0, 0.5) nema;)

Treba napomenuti da ova konstrukcija funkcionira jer koristimo skraćeni zapis za pozadinu, što nam omogućuje da istovremeno postavimo i boju pozadine i pozadinsku sliku. Preglednici koji naiđu na nepoznatu vrijednost rgba() potpuno će zanemariti drugi redak i obraditi prvu deklaraciju.

Nešto drugo

Glavna prednost RGBA je mogućnost stvaranja različitih dizajnerskih rješenja bez upotrebe crteža. Prednost ovdje nije samo u lakšim (kao rezultat toga, bržim) stranicama, već i u uštedi vremena: stranice koje koriste spomenutu tehnologiju lakše je kreirati i održavati. Pod utjecajem Javascripta ili kao odgovor na radnje korisnika, vrijednosti u CSS-u mogu se lako promijeniti. Crteži u našem slučaju mogu otežati takve transformacije.

Div ( boja: rgba (255, 255, 255, 0.8); boja pozadine: rgba (142, 213, 87, 0.3); ) div: lebdjeti ( boja: rgba (255, 255, 255, 1); background- boja: rgba(142, 213, 87, 0,6); )

Razumna upotreba prozirnosti za boje obruba pomoći će da neki elementi na stranici izgledaju organskije:

Div ( boja: rgb(0, 0, 0); boja pozadine: rgb(255, 255, 255); obrub: 10px čvrsti rgba(255, 255, 255, 0.3); )

Konačno

Kao što je često slučaj, vrhunske CSS inovacije podržavaju vrhunske preglednike. Nadajmo se da će dečki iz Redmonda nešto shvatiti u životu i pridružiti se većini.