Culoare galben css. Setarea culorii pentru text în CSS

Codurile de culoare CSS sunt folosite pentru a specifica o culoare. De obicei, codurile de culoare sau valorile de culoare sunt folosite pentru a seta o culoare fie pentru prim-planul unui element (de exemplu, culoarea textului, culoarea linkului), fie pentru fundalul unui element (culoarea fundalului, culoarea blocului). Ele pot fi, de asemenea, folosite pentru a schimba culoarea unui buton, chenar, marker, hover și alte efecte decorative.

Puteți seta propriile valori de culoare în diferite formate. Următorul tabel listează toate formatele posibile:

Formatele enumerate sunt descrise mai detaliat mai jos.

Culori CSS - coduri hexazecimale

Cod de culoare hexazecimal este o reprezentare din șase cifre a unei culori. Primele două cifre (RR) reprezintă valoarea roșie, următoarele două reprezintă valoarea verde (GG) și ultimele două reprezintă valoarea albastră (BB).

Culori CSS - coduri hexadecimale scurte

Cod de culoare hexadecimal scurt este forma mai scurtă a notației din șase cifre. În acest format, fiecare cifră este repetată pentru a produce valoarea echivalentă a culorii din șase cifre. De exemplu: # 0F0 devine # 00FF00.

Valoarea hexazecimală poate fi luată din orice software de grafică, cum ar fi Adobe Photoshop, Core Draw etc.

Fiecare cod de culoare hexazecimal din CSS va fi precedat de semnul hash „#”. Următoarele sunt exemple de utilizare a notației hexazecimale.

Culori CSS - Valori RGB

Valoarea RGB este codul de culoare, care este setat folosind proprietatea rgb (). Această proprietate are trei valori, câte una pentru roșu, verde și albastru. Valoarea poate fi un număr întreg, de la 0 la 255 sau un procent.

Notă: nu toate browserele acceptă proprietatea de culoare rgb (), deci nu este recomandat să o folosești.

Mai jos este un exemplu care arată mai multe culori folosind valori RGB.

Generator de coduri de culoare

Puteți crea milioane de coduri de culoare folosind serviciul nostru.

Culori sigure pentru browser

Mai jos este un tabel cu 216 culori care sunt cele mai sigure și mai independente de computer. Aceste culori CSS variază de la 000000 la FFFFFF hexazecimal. Sunt sigure de utilizat deoarece asigură că toate computerele afișează corect culoarea atunci când lucrează cu o paletă de 256 de culori.

Privește cu atenție desenul. Fundalul ferestrei derulante este translucid. Acesta este un truc de design destul de comun. Să ne gândim cum poate fi implementat acest lucru.

Sarcină

Faceți o culoare semi-transparentă încrucișată.

Soluţie

Primul gând în această situație este să folosiți o imagine png24 pentru fundal cu transluciditatea deja setată. Dar această imagine este complet redundantă. Puteți face perfect fără ea (și, prin urmare, fără o solicitare inutilă către server). Să încercăm să găsim soluția optimă.

Al doilea gând este de a folosi. Dar în acest caz nu este foarte convenabil. La urma urmei, atunci nu numai fundalul, ci și inscripțiile vor deveni translucide. Da, de fapt, toată fereastra deodată.

Desigur, puteți încerca să adăugați un container suplimentar și să aplicați opacitate numai acestuia, dar acest element HTML va fi doar pentru decor și va fi evident de prisos. Poți să faci fără ea?

Sigur ca poti! Dacă utilizați RGBA.

Format de descriere a culorilor RGBA

CSS3 vă permite să specificați culoarea folosind funcțiile RGB și RGBA. În același timp, trebuie să indicăm fracția fiecărei componente de culoare, pentru care este alocat un octet (de la 0 la 255, brusc, cine nu știe).

Sintaxa pentru acest caz este foarte simplă:

Fundal: rgb (0, 255, 0); / * verde pur * /

Pentru RGBA, se adaugă un al patrulea parametru - transparența alfa (de la 0 la 1).

Fundal: rgba (255, 0, 0, 0,5); / * roșu pur cu 50% transparență * /

Iată, soluția la problema noastră. Este suficient să setați culoarea de fundal folosind rgba și totul va arăta așa cum avem nevoie. Fără imagini și elemente inutile!

De unde pot obține aceste numere?

Puteți privi componentele de culoare utilizând instrumentul pipetă din Photoshop.

Despre compatibilitatea între browsere

Deoarece funcția RGB este mult mai veche decât RGBA și a fost prezentă încă din zilele standardului CSS2, puteți utiliza următoarea construcție duplicat pentru a vă proteja împotriva celor mai vechi browsere:

SomeBlock (fond: rgb (255, 0, 0); fundal: rgba (255, 0, 0, 0,5);)

Cu această abordare, străbunicii browserelor moderne nu vor avea transluciditate, dar culoarea în sine va rămâne corectă.

Va trebui să ne ocupăm de IE separat. Cei de tip măgar până la versiunea 8 nu înțeleg RGBA.

Ca de fiecare dată: pământul țăranilor, fabricile muncitorilor și măgarii la cârjă! La fel de .

Desigur, în condiții de luptă, punem această regulă într-un CSS separat, pe care îl conectăm.

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

Trucul este să specificați culorile de început și de sfârșit la fel (ff0000 - roșu) și să profitați de faptul că pentru gradientul din acest filtru puteți seta canalul alfa (în exemplu, valoarea 80).

Pentru referință: filtrul folosește un sistem hexazecimal și codul FF corespunde unei culori complet opace (în zecimală este 255). În consecință, hexazecimalul 80 este zecimalul 128, adică 50% transparență.

Verificate în:

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

Monitoarele de computer, precum și ecranele telefoanelor mobile, smartphone-urilor și tabletelor, sunt formate din mii de pătrate mici numite pixeli (dacă te uiți atent la monitor, le poți vedea). Când ecranul este oprit, este negru pentru că nu emite lumină, când este pornit, fiecare pixel capătă o culoare diferită, ceea ce creează imaginea pe care o vedem când ne uităm la ecran.

Când setăm culoarea pentru marginea unui element, fundal sau text, atunci setăm culoarea pixelilor din care sunt compuși. Există două abordări generale pentru specificarea unei culori în CSS: după nume sau după valoare. Cel mai simplu ghid este după nume: roșu este roșu, albastru este albastru și așa mai departe, dar CSS nu oferă multe nume de culori din care să aleagă. Pe de altă parte, specificarea unei valori de culoare implică o alegere mult mai largă de nuanțe. Există mai multe moduri de a specifica o valoare a culorii, cele două cele mai comune sunt valorile RGB și hexazecimale. Au făcut parte din CSS încă de la prima versiune și fiecare browser web le acceptă. CSS3 introduce câteva opțiuni suplimentare pentru definirea culorilor: RGBA, HSL și HSLA, care sunt mai puțin cross-browser, dar cele mai recente versiuni de browser le acceptă deja.

Nume de culori

Cel mai simplu și mai evident mod de a specifica o culoare în CSS este să alegeți un nume de culoare predefinit dintr-un set de cuvinte cheie. Sunt disponibile un total de 147 de cuvinte cheie cu nume de culori: 17 nume sunt culori standard care au fost introduse în versiunile timpurii ale HTML (alb, negru, roșu, galben, albastru, verde, portocaliu, violet, gri, argintiu, aqua, fucsia, lime). , maro, bleumarin, măsline și teal), și 130 de altele suplimentare care au fost adăugate în CSS2. Puteți vedea întreaga listă de nume de culori disponibile în secțiunea HTML a tabelului nostru de culori.

RGB și RGBA

RGB folosește trei numere care descriu cantitățile relative de roșu, verde și albastru care sunt amestecate pentru a produce orice nuanță. Numerele pot varia de la 0 la 255. Luați în considerare codul RGB pentru culoarea violet închis: rgb (204, 51, 255), de exemplu, poate fi aplicat proprietății CSS responsabilă pentru culoarea fontului:

Culoare: rgb (205, 51, 255);

Sistemul RGBA adaugă un alt număr care descrie transparența culorii, valoarea putând varia de la 0 (complet transparent) la 1 (complet opac). O valoare de 0,5 face culoarea semitransparentă, luați în considerare o versiune semitransparentă de violet închis, specificată folosind sistemul RGBA:

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

Puteți vedea că valorile pentru roșu, verde și albastru sunt similare cu sistemul RGB. Al patrulea număr - 0,5 este gradul de transparență. Litera „A” din RGBA înseamnă canal alfa, care este un termen de design grafic pentru transparență.

Culorile RGBA sunt utile pentru a crea elemente translucide care fac vizibile elementele de sub ele.

HSL și HSLA

Sistemul HSL (hue, saturation, lightness) descrie culorile bazate pe nuanță, saturație și luminozitate. Iată aceeași culoare violet intens specificată în formatul HSL:

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

Primul număr este nuanța, exprimată în grade de la 0 la 360, care determină poziția culorii pe roata de culori. Al doilea număr este saturația, definită ca un procent de la 0% la 100%, indicând cât de saturată (luminoasă) va fi culoarea. Al treilea număr este luminozitatea, este definit ca un procent la fel ca saturația, luminozitatea indică cât de deschisă sau închisă va fi culoarea.

HSLA, ca și RGBA, adaugă un al patrulea număr, de la 0 la 1, care determină cât de transparentă ar trebui să fie culoarea. O valoare de 0,5 face culoarea semitransparentă, luați în considerare o versiune semitransparentă de violet închis, specificată folosind sistemul HSLA:

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

Valori de culoare hexazecimale

Codul de culoare hexazecimal este format din șase caractere după simbolul #:

Fiecare set de două caractere reprezintă un număr de la 0 la 255. Deci primele două caractere reprezintă roșu, următoarele două reprezintă verde, iar ultimele două reprezintă albastru. În aceasta, codul hexazecimal este foarte asemănător cu RGB, cu diferența că aici fiecare culoare este specificată în notație hexazecimală în loc de zecimală.

Dacă fiecare pereche de numere constă din aceleași caractere, atunci valoarea culorii poate fi trunchiată. Cu toate acestea, dacă codul hexazecimal arată ca # bbff10, atunci o astfel de intrare nu poate fi prescurtată.

Culoare: # f00; culoare: # ff0000;

Notă: browserele care nu acceptă astfel de valori de culoare (rgba, hsl și hsla) nu asociază nicio culoare cu fundalul sau fontul, ignorând complet anunțul. În acest caz, valoarea implicită este folosită pentru fundalul elementului (devine complet transparent), iar pentru text se folosește fie valoarea implicită (negru) fie culoarea moștenită de la elementul părinte.

Pentru versiunile mai vechi de browsere, ar trebui adăugată o regulă suplimentară pentru a specifica culoarea în format RGB, hexazecimal sau nume. O astfel de regulă trebuie să fie înaintea unei reguli care specifică o culoare în format RGBA, HSL sau HSLA. Aceasta va oferi o poliță de asigurare pentru culoare, deoarece în CSS, atunci când există două reguli care stabilesc o valoare pentru aceeași proprietate, regula stabilită în codul de mai jos are întotdeauna prioritate. Aceasta înseamnă că dacă browserul acceptă formatele RGBA, HSL sau HSLA, atunci va folosi a doua regulă, iar dacă nu o acceptă, atunci prima.

Numerele hexazecimale sunt folosite pentru a seta culorile. Sistemul hexazecimal, spre deosebire de sistemul zecimal, se bazează, după cum sugerează și numele, pe numărul 16. Numerele vor fi după cum urmează: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 , A, B, C , D, E, F. Numerele de la 10 la 15 sunt înlocuite cu litere latine. Numerele mai mari de 15 în hexazecimal sunt formate prin combinarea a două numere într-unul singur. De exemplu, 255 zecimale este egal cu FF hexazecimal. Pentru a evita confuzia în definiția sistemului numeric, simbolul hash # este plasat în fața numărului hexazecimal, de exemplu # 666999. Fiecare dintre cele trei culori - roșu, verde și albastru - poate varia de la 00 la FF. Astfel, desemnarea culorii este împărțită în trei componente #rrggbb, unde primele două caractere marchează componenta roșie a culorii, cele două din mijloc - verde, iar ultimele două - albastru. Este permisă utilizarea unei forme prescurtate precum #rgb, unde fiecare caracter ar trebui să fie dublat. Deci, intrarea # fe0 ar trebui tratată ca #ffee00.

Dupa nume

Browserele acceptă unele culori după nume. Masa 1 arată numele, codul hexazecimal, RGB, valorile HSL și descrierea.

Cu RGB

Puteți determina culoarea folosind valorile zecimale ale componentelor roșii, verzi și albastre. Fiecare dintre cele trei componente de culoare ia o valoare de la 0 la 255. De asemenea, este permisă setarea culorii ca procent, în timp ce 100% va corespunde numărului 255. În primul rând, este indicat cuvântul cheie rgb, iar apoi în paranteze, sunt indicate componentele de culoare, separate prin virgule, de exemplu rgb (255, 128, 128) sau rgb (100%, 50%, 50%).

RGBA

Formatul RGBA este similar ca sintaxă cu RGB, dar include un canal alfa care controlează transparența elementului. O valoare de 0 corespunde transparenței totale, 1 opacității și o valoare intermediară, cum ar fi 0,5, semi-transparenței.

RGBA a fost adăugat în CSS3, așa că validarea codului CSS ar trebui făcută folosind această versiune. Trebuie remarcat faptul că standardul CSS3 este încă în curs de dezvoltare și unele caracteristici se pot schimba. De exemplu, o culoare RGB adăugată la proprietatea culoare de fundal este validată, dar o culoare adăugată la proprietatea de fundal nu mai. În același timp, browserele înțeleg destul de corect culoarea pentru ambele proprietăți.

Hsl

Numele formatului HSL este format dintr-o combinație a primelor litere Hue (nuanță), Saturate (saturație) și Lightness (luminozitate). Nuanța este valoarea unei culori pe roata culorilor (Fig. 1) și este dată în grade. 0 ° este roșu, 120 ° este verde și 240 ° este albastru. Valoarea nuanței poate varia de la 0 la 359.

Orez. 1. Roata de culori

Saturația este intensitatea unei culori, măsurată ca procent de la 0% la 100%. O valoare de 0% indică nicio culoare și o nuanță de gri, 100% este valoarea maximă de saturație.

Luminozitatea stabilește cât de strălucitoare este culoarea și este indicată ca procent de la 0% la 100%. Valorile scăzute fac culoarea mai închisă, iar valorile ridicate se deschid, valorile extreme de 0% și 100% corespund alb-negru.

HSLA

Formatul HSLA este similar ca sintaxă cu HSL, dar include un canal alfa care stabilește transparența elementului. O valoare de 0 corespunde transparenței totale, 1 opacității și o valoare intermediară, cum ar fi 0,5, semi-transparenței.

Valorile de culoare în formatele RGBA, HSL și HSLA au fost adăugate în CSS3, așa că asigurați-vă că verificați validitatea versiunii atunci când utilizați aceste formate.

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

Avertizare

Toate metodele de prindere a leului enumerate pe site sunt teoretice și se bazează pe metode de calcul. Autorii nu vă garantează siguranța atunci când le utilizați și își declină orice responsabilitate pentru rezultat. Amintiți-vă, leul este un prădător și un animal periculos!

Rezultatul acestui exemplu este prezentat în Fig. 2.

Orez. 2. Culori pe pagina web

Îmi exprim recunoștința indirectă față de Google pentru idee și propun colegilor mei ștafeta: este necesar să împărtășesc cu cititorii resurse străine despre dezvoltarea web din fluxul meu RSS, care sunt substanțiale și interesante în scris despre această problemă. Pentru a reduce vorbirea inactivă, sunt necesare o serie de prevederi simple:

1. Pe blogul dvs., publicați o traducere (puteți în mod liber, cu comentarii și completări) a unui articol din resursa prezentată.
2. Traducerile, precum și sursele acestora nu trebuie repetate pentru a asigura acoperirea și diversitatea informațiilor.
3. Faceți referire la bloggerul de la care a primit vestea bună și, dacă este posibil, transmiteți ștafeta.
4. Timpul releului nu este setat; cu siguranță va exista cineva care va opri această orgie.

Această postare este inițial dintr-una dintre postările lui Drew McLellan pe blogul calendarului colectiv 24ways. Merge!

Ce este culoarea RGBA?

Nu voi deschide un secret dacă spun că nuanța de culoare dorită este creată în CSS prin amestecarea în proporțiile necesare roșu, verde și albastru. Există, totuși, un avertisment - indiferent de culoarea pe care o alegem, aceasta va fi întotdeauna solidă și opaca.

CSS3 oferă câteva moduri noi de a defini culoarea, dintre care una este utilizarea modelului de culoare RGBA. Litera „A” din abreviere înseamnă „Alfa”; valoarea sa este responsabilă pentru gradul de transparență a culorii. Cu ajutorul acestui model, putem stabili nu numai combinația necesară de roșu, verde și albastru, ci și să stabilim cât de mult „strălucește” culoarea. Ceva similar poate fi observat atunci când lucrați cu straturi în Photoshop.

Atunci pentru ce este proprietatea opacității?

Ideea este că definiția transparenței pentru o culoare este diferită de setarea opacității pentru un element, setată folosind proprietatea opacitate css. Să vedem un exemplu.

Avem un titlu h1 cu culori specifice pentru text și fundal, situat pe o pagină cu o imagine de fundal.

H1 (culoare: rgb (0, 0, 0); culoare de fundal: rgb (255, 255, 255);)

Prin setarea proprietății de opacitate, puteți aplica transparență întregului element în ansamblu:

H1 (culoare: rgb (0, 0, 0); culoare de fundal: rgb (255, 255, 255); opacitate: 0,5;)

Modelul RGBA ne oferă o oportunitate mai flexibilă - de a controla doar transparența culorii, și nu întregul element. De exemplu, puteți seta transparența doar pentru culoarea de fundal:

H1 (culoare: rgb (0, 0, 0); culoare de fundal: rgba (255, 255, 255, 0,5);)

Sau lăsați fundalul neschimbat și setați transparența doar la text:

H1 (culoare: rgba (0, 0, 0, 0,5); culoare de fundal: rgb (255, 255, 255);)

Este probabil mai puțin obișnuit să folosiți sintaxa rgb () pentru a defini o culoare decât notația hexazecimală (cum ar fi #fff), cu toate acestea, în acest caz, este o necesitate de fier, deoarece nu este posibil să scrieți o valoare RGBA în notație hexazecimală. Prin urmare, setăm rgba () exact așa:

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

La fel ca rgb (), primele trei valori sunt responsabile pentru combinația de roșu, verde și albastru. Ele pot lua atât valori întregi în intervalul 0–255, cât și procente în intervalul de la 0 la 100%. A patra valoare definește gradul de transparență, variind de la 0 (complet transparent) la 1 (complet opac).

Puteți utiliza în siguranță această tehnică oriunde setați de obicei culori în CSS: pentru culorile de fundal și text, pentru chenare, contururi și așa mai departe.

Suport pentru browser

Majoritatea browserelor moderne (Firefox, Safari, Opera, Google Chrome) acceptă culorile RGBA, dar nu și Internet Explorer.

Nu mai rămâne decât să specificați culori RGBA pentru browserele care le acceptă, iar pentru restul să vină cu propriile „cârje”.

Analiza CSS funcționează în browsere în așa fel încât dacă se întâlnește vreo valoare necunoscută în timpul analizării regulilor, aceasta va fi ignorată. Să folosim aceste cunoștințe pentru a reda culoarea opacă obișnuită pentru browserele „neînțelegătoare”. Pentru a face acest lucru, este suficient să specificați culoarea în prima declarație în format RGB, iar al doilea setează tonul de culoare în format RGBA- pentru browsere care acceptă acest model de culoare.

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

În cazurile în care doriți să aplicați transparență proprietății de culoare de fundal, puteți recurge la utilizarea unei imagini PNG cu un canal alfa pentru a obține exact același efect. Desigur, aceasta este o modalitate mai scumpă, spre deosebire de CSS „pur”, deoarece va trebui să vă creați propriul PNG pentru fiecare nivel de transparență, dar fără pește și raci.

Folosim același principiu ca în exemplul anterior: mai întâi setăm fundalul pentru toate browserele și apoi rescriem șirul având în vedere RGBA.

H1 (fond: URL transparent (black50.png); fundal: rgba (0, 0, 0, 0.5) niciunul;)

Trebuie remarcat faptul că această construcție funcționează deoarece folosim prescurtarea de fundal, care ne permite să setăm atât culoarea de fundal, cât și imaginea de fundal în același timp. Browserele care întâlnesc o valoare rgba () necunoscută vor ignora în întregime a doua linie și vor procesa prima declarație.

Altceva

Principalul avantaj al RGBA este capacitatea de a crea diverse soluții de proiectare fără a utiliza desene. Beneficiul aici nu este doar în paginile mai ușoare (ca rezultat, mai rapide), ci și în câștigul în timp: site-urile care folosesc această tehnologie sunt mai ușor de creat și întreținut. Influențate de Javascript sau ca răspuns la acțiuni personalizate, valorile CSS se pot schimba cu ușurință. Cifrele în cazul nostru pot complica astfel de transformări.

Div (culoare: rgba (255, 255, 255, 0,8); culoare de fundal: rgba (142, 213, 87, 0,3);) div: hover (culoare: rgba (255, 255, 255, 1); fundal- culoare: rgba (142, 213, 87, 0,6);)

Aplicarea judicioasă a transparenței la culorile cadrului va ajuta unele elemente de pe pagină să pară mai organice:

Div (culoare: rgb (0, 0, 0); culoare de fundal: rgb (255, 255, 255); chenar: 10px rgba solid (255, 255, 255, 0,3);)

In cele din urma

Așa cum este adesea cazul, inovațiile de ultimă oră CSS sunt susținute de browsere de vârf. Să sperăm că băieții de la Redmond sunt conștienți de ceva în viață și se alătură majorității.