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

Kodovi boja u CSS-u se koriste za specifikaciju 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). Mogu se koristiti i za promjenu boje gumba, ivica, markera, lebdenja i drugih dekorativnih efekata.

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

Ovi formati su detaljnije opisani u nastavku.

CSS Boje - Hex kodovi

Heksadecimalni kod boja je šestocifreni prikaz boja. Prve dvije cifre (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 notacije od šest znakova. U ovom formatu, svaka cifra se ponavlja kako bi se dobila ekvivalentna šestocifrena 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 prethodi heš znak "#". Slijede primjeri upotrebe heksadecimalne notacije.

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 pretraživači svojstvo boje rgb(), pa se ne preporučuje da ga koristite.

Ispod je primjer koji prikazuje više boja koristeći RGB vrijednosti.

Generator kodova boja

Pomoću naše usluge možete kreirati milione kodova boja.

Sigurne boje pretraživača

Ispod je tabela od 216 boja koje su najsigurnije i nezavisne od računara. Ove boje u CSS-u se kreću od 000000 do FFFFFF hex koda. Oni su bezbedni za upotrebu jer obezbeđuju da će svi računari ispravno prikazati boju kada rade sa paletom od 256 boja.

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 implementirati.

Zadatak

Učinite crossbrowser prozirnom bojom.

Rješ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 sasvim dobro i bez toga (a samim tim i bez dodatnog zahtjeva serveru). Pokušajmo pronaći najbolje rješenje.

Druga misao je upotreba . 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 kontejner i primijeniti neprozirnost samo na njega, ali ovaj HTML element će biti samo za dekoraciju i očito će biti suvišan. Da li je moguće bez toga?

Naravno! Ako koristite RGBA.

RGBA format opisa boja

CSS3 omogućava da se boja specificira korištenjem RGB i RGBA funkcija. Istovremeno, moramo navesti udio svake komponente boje, pod kojim je dodijeljen jedan bajt (od 0 do 255, odjednom neko ne zna).

Sintaksa za ovaj slučaj je vrlo jednostavna:

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

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

Pozadina: rgba(255, 0, 0, 0.5); /* čisto crveno sa 50% neprozirnosti */

Evo ga, rješenje za naš problem. Dovoljno je podesiti 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 među pretraživačima

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 pretraživača:

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

Ovim pristupom pradjedovi modernih pretraživača neće imati prozirnost, ali će sama boja ostati ispravna.

Odvojeno, morat ćete se pobrinuti za IE. Magareće do 8. verzije uključujući ne razumiju RGBA.

Kao i uvek: zemlja - seljacima, fabrike - radnicima, a magarci - štaka! Kao .

Naravno, u borbenim uslovima ovo pravilo iznosimo u poseban CSS, koji uključujemo .

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

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

Za referencu: filter koristi heksadecimalni sistem i kod FF odgovara potpuno neprozirnoj boji (u decimalnom broju je 255). Shodno tome, heksadecimalni 80 je decimalni 128, odnosno 50% transparentnosti.

Provjereno u:

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

Računarski monitori, poput ekrana mobilnih telefona, pametnih telefona i tableta, sastoje se od hiljada malih kvadrata zvanih pikseli (ako pažljivo pogledate u monitor, možete ih vidjeti). Kada je ekran isključen, crn je jer ne emituje svetlost; 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šta pristupa određivanju boja u CSS-u: po imenu ili po vrednosti. Najjednostavniji je po imenu: crvena je crvena, plava je plava i tako dalje, ali CSS ne nudi mnogo imena boja za izbor. S druge strane, specificiranje vrijednosti boje podrazumijeva mnogo 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 web pretraživač ih podržava. CSS3 je uveo još nekoliko opcija za definisanje boja: RGBA, HSL i HSLA, oni su manje unakrsni pretraživači, ali ih najnovije verzije pretraživača već podržavaju.

Imena 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. Ukupno je dostupno 147 ključnih riječi s nazivima boja: 17 imena su standardne boje koje su uvedene u ranim verzijama HTML-a (bijela, crna, crvena, žuta, plava, zelena, narandžasta, ljubičasta, siva, srebrna, akva, fuksija, limeta , kestenjasta, tamnoplava, maslinasta i teal) i još 130 dodanih u CSS2. Možete vidjeti potpunu listu dostupnih naziva boja u HTML dijelu naše tabele boja.

RGB i RGBA

RGB sistem koristi tri broja koja opisuju relativnu količinu crvene, zelene i plave koje su pomiješane da bi se proizvela bilo koja data nijansa. Brojevi se mogu kretati od 0 do 255. Uzmite u obzir 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 sistem dodaje još jedan broj koji opisuje prozirnost boje, vrijednost može biti u rasponu od 0 (potpuno transparentan) do 1 (potpuno neproziran). Vrijednost od 0,5 čini boju prozirnom, uzmite u obzir prozirnu verziju tamnoljubičaste boje koju daje RGBA sistem:

Boja: rgba(204, 51, 255, 0.5);

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

RGBA boje su korisne za kreiranje poluprozirnih elemenata koji omogućavaju da elementi ispod njih budu vidljivi.

HSL i HSLA

HSL (h ue, s saturation, lightness) sistem opisuje boje zasnovane na nijansi, zasićenosti i svjetlini. Evo iste tamnoljubičaste boje navedene u HSL formatu:

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

Prvi broj je nijansa, izražena u stepenima od 0 do 360, koja određuje položaj boje na krugu boja. Drugi broj je zasićenost, definisan kao procenat od 0% do 100%, što pokazuje koliko će boja biti zasićena (svetla). 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 sistem, 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 sistem:

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 cifara sastoji od istih znakova, tada se vrijednost boje može skratiti. Međutim, ako heksadecimalni kod izgleda ovako, na primjer, #bbff10, onda 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, ignorirajući deklaraciju u potpunosti. U ovom slučaju, pozadina elementa je postavljena na zadanu vrijednost (postaje potpuno transparentna), a tekst je postavljen ili na zadanu vrijednost (crna) ili na boju naslijeđenu od roditeljskog elementa.

Za starije verzije pretraživača treba dodati dodatno pravilo koje definira boju u RGB formatu, heksadecimalnu vrijednost ili korištenje imena. Takvo pravilo mora biti ispred pravila koje specificira RGBA, HSL ili HSLA boju. Ovo ć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 pretraživač podržava RGBA, HSL ili HSLA formate, onda će koristiti drugo pravilo, a ako ne, prvo.

Heksadecimalni brojevi se koriste za određivanje boja. Heksadecimalni sistem je, za razliku od decimalnog, zasnovan, kao što mu ime govori, na broju 16. Brojevi će biti sledeć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 sistemu formiraju se kombinovanjem dva broja u jedan. Na primjer, broj 255 u decimalnom obliku odgovara broju FF u heksadecimalu. Da bi se izbjegla zabuna u definiciji brojevnog sistema, heksadecimalnom broju prethodi heš 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, gdje prva dva znaka označavaju crvenu komponentu boje, dva srednja zelenu, a posljednja dva plavu. Dozvoljeno je koristiti skraćeni oblik forme #rgb, gdje svaki znak treba udvostručiti. Dakle, unos #fe0 treba smatrati #ffee00.

po imenu

Pretraživači podržavaju neke boje po imenu. U tabeli. 1 prikazuje nazive, heksadecimalni kod, vrijednosti u RGB, HSL formatu i opis.

Sa RGB

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 transparentna, 1 je neprozirna, a srednja vrijednost poput 0,5 je prozirna.

RGBA je dodat u CSS3, tako da valjanost CSS koda treba da se izvrši prema ovoj verziji. Treba napomenuti da je CSS3 standard još uvijek u razvoju i da se neke njegove karakteristike mogu promijeniti. Na primjer, RGB boja dodana svojstvu background-color prolazi provjeru valjanosti, ali ona dodana svojstvu background-a ne. Istovremeno, pretraživači 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 stepenima. 0° je crvena, 120° je zelena, a 240° je plava. Vrijednost nijanse može varirati od 0 do 359.

Rice. 1. Točak boja

Zasićenost je intenzitet boje, mjeren u procentima 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 specificira se kao postotak od 0% do 100%. Male vrednosti čine boju tamnijom, dok je visoke vrednosti čine svetlijom, ekstremne vrednosti od 0% i 100% odgovaraju crno-beloj.

HSLA

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

Vrijednosti boja u formatima RGBA, HSL i HSLA se dodaju 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 bazirane na računskim metodama. Autori ne jamče vašu sigurnost kada ih koristite 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.

Rice. 2. Boje na web stranici

Izražavam indirektnu zahvalnost Guglu na ideji i nudim svojim kolegama štafetu: potrebno je da sa svog RSS feed-a podijelite sa čitaocima strane resurse o razvoju weba, koji na sadržajan i zanimljiv način 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. Prevodi, kao i njihovi izvori, ne bi se trebali ponavljati kako bi se osigurala pokrivenost i raznolikost informacija.
3. Dobro je spomenuti blogera od kojeg je stigla dobra vijest i, ako je moguće, prenijeti štafetu dalje.
4. Datumi releja nisu postavljeni; sigurno će se naći neko ko će zaustaviti ovu vakhanaliju.

Originalni izvor za ovaj post bio je jedan od postova Drewa McLellana na blogu kolektivnog kalendara 24ways. Idi!

Šta je RGBA boja?

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

CSS3 nudi nekoliko novih načina za specificiranje boja, od kojih je jedan korištenje RGBA modela boja. "A" u akronimu znači "Alpha"; njegova vrijednost je odgovorna za količinu transparentnosti boje. Uz pomoć ovog modela možemo odrediti ne samo potrebnu kombinaciju crvene, zelene i plave, već i 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 opacity. Pogledajmo primjer.

Imamo h1 naslov sa određenim bojama za tekst i pozadinu na stranici sa slikom u pozadini.

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 - da kontrolišemo 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); )

Vjerovatno je manje uobičajeno koristiti rgb() sintaksu za određivanje boje nego heksadecimalni zapis (kao #fff), ali u ovom slučaju to je neobična potreba jer nije moguće napisati RGBA vrijednost u heksadecimalnom zapisu. Stoga postavljamo rgba () upravo 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 procente u rasponu od 0 do 100%. Četvrta vrijednost određuje stepen transparentnosti, u rasponu od 0 (potpuno transparentan) do 1 (potpuno neproziran).

Ovu metodu možete bezbedno koristiti svuda gde obično postavljate boje u CSS-u: za boje pozadine i teksta, za ivice, obrise i tako dalje.

Podrška za pretraživač

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

Ne preostaje ništa drugo nego odrediti RGBA boje za pretraživače koji ih podržavaju, a za ostale da smisle svoje "štake".

CSS raščlanjivanje radi u pretraživačima na takav način da ako se naiđe na bilo koju nepoznatu vrijednost tokom raščlanjivanja pravila, ona će biti zanemarena. Iskoristimo ovo znanje da pretraživačima 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 pretraživače 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 pribjeći korištenju PNG slike s alfa kanalom kako biste postigli potpuno isti efekat. Naravno, ovo je skuplja metoda, za razliku od “čistog” CSS-a, jer ćete morati kreirati svoj PNG za svaki nivo transparentnosti, ali postoji riba za bezribe i rak.

Koristimo isti princip kao u prethodnom primjeru: prvo postavljamo pozadinu za sve pretraživače, a zatim prepisujemo string 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, koji nam omogućava da istovremeno postavimo i boju pozadine i pozadinsku sliku. Pretraživači koji naiđu na nepoznatu rgba() vrijednost će u potpunosti zanemariti drugi red 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 uticajem Javascript-a ili kao odgovor na radnje korisnika, vrednosti u CSS-u se lako mogu promeniti. 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); ivica: 10px čvrsta rgba (255, 255, 255, 0.3); )

Konačno

Kao što je često slučaj, najsavremenije CSS inovacije podržavaju najsavremenije pretraživače. Nadajmo se da će momci iz Redmonda nešto shvatiti u životu i pridružiti se većini.