Privește cu atenție desenul. Fundalul casetei derulante este translucid. Aceasta este o tehnică de proiectare destul de comună. Să ne gândim cum poate fi implementat acest lucru.
O sarcină
Faceți culoarea translucidă pentru crossbrowser.
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ă. Vă puteți descurca foarte bine fără el (și, prin urmare, fără o solicitare suplimentară către server). Să încercăm să găsim cea mai bună soluție.
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ă-i aplicați opacitate numai acestuia, dar acest element HTML va fi doar pentru decor și va fi evident de prisos. Este posibil să te descurci fără ea?
Desigur! Dacă utilizați RGBA.
Format de descriere a culorilor RGBA
CSS3 permite specificarea culorii folosind funcțiile RGB și RGBA. În același timp, trebuie să indicăm ponderea fiecărei componente de culoare, sub care este alocat un octet (de la 0 la 255, dintr-o dată cineva nu știe).
Sintaxa pentru acest caz este foarte simplă:
fundal: rgb(0, 255, 0); /* culoare 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); /* rosu pur cu 50% opacitate */
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ă poze și elemente suplimentare!
De unde pot obține aceste numere?
Puteți să vă uitați la culorile constitutive utilizând instrumentul pipeta din Photoshop.
Despre compatibilitatea între browsere
Deoarece funcția RGB este mult mai veche decât RGBA și există încă de pe vremea standardului CSS2, puteți utiliza următoarea construcție duplicat pentru a vă proteja împotriva celor mai vechi browsere:
SomeBlock ( fundal: 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ă.
Separat, va trebui să ai grijă de IE. Cei de tip măgar până la versiunea a 8-a inclusiv nu înțeleg RGBA.
Ca întotdeauna: pământ - la țărani, fabrici - la muncitori, și măgari - o cârjă! La fel de .
Desigur, în condiții de luptă, scoatem această regulă într-un CSS separat, pe care îl includem .
SomeBlock ( background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ff0000,endColorstr=#80ff0000); zoom: 1; )
Trucul este să specificați aceleași culori de început și de sfârșit (ff0000 - roșu) și să profitați de faptul că puteți seta canalul alfa pentru gradient în acest filtru (în exemplu, valoarea este 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ță.
Verificat în:
- IE 6-9
- Firefox 3+
- Opera 10+
- Safari 4
- Crom
>> Managementul culorii
Valori hexazecimale de culoare RGB
Metodele de descriere și procesare a culorilor diferă unele de altele prin reprezentarea finală pentru care sunt destinate. Să comparăm, de exemplu, reprezentările culorilor pentru poligrafie și pentru monitoare de computer. În primul caz, baza este alb culoarea hârtiei pe care sunt aplicate ulterior cele trei culori primare: albastru, VioletȘi galben. Amestecându-se între ele și cu culoarea albă a hârtiei în proporții diferite, aceste trei culori primare dau nuanțe de culoare diferite, cu excepția negrului pur, sau în absența completă a culorilor dau hârtie albă. Dacă le adăugăm negru, obținem CMYK- o modalitate de a transmite culoarea atunci cand culoarea dorita este obtinuta prin scaderea culorilor lipsa din alb.
În al doilea caz, baza este negrul culoarea ecranului monitorului, fiecare celulă care strălucește în una dintre cele trei culori: roșu-Roșu, verde-verde și albastru-albastru. Apoi, în absența completă a oricărei străluciri, obținem o culoare neagră pură a ecranului, iar oricare dintre culorile necesare este dată de raportul fiecăreia dintre cele trei culori. În acest caz vom obține RGB- Metoda de transfer de culoare. Culorile primare pot avea semnificații din 0
inainte de 255
, sau de la 0%
inainte de 100%
, sau poate fi reprezentat ca o valoare hexazecimală. În figura de mai jos puteți vedea rezultatele amestecării culorilor primare.
Sistemul de numere hexazecimale, spre deosebire de sistemul de numere zecimal, nu are zece cifre în seria sa de cifre, ci șaisprezece - de unde și numele. În consecință, variantele care nu se repetă ale combinațiilor de două cifre pot fi doar - 256 , pentru a continua seria cifrelor după 9 scrisori de la A inainte de F, deci rândul va arăta așa -
| 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F. |
În acest caz, culoarea este dată de trei numere hexazecimale, fiecare constând din două cifre. Primul număr determină intensitatea roșu culori, medie verde, ultimul lucru- albastru culorile. Toate numerele pot lua valori variind de la 00 inainte de FF(de la 0 la 255). De exemplu: culoarea verde este dată ca #00FF00, roșu - ca #FF0000, albastru - ca #0000FF, alb - ca #FFFFFF, absența completă a culorii sau negru este dat ca #000000 .
În formularul de mai jos, puteți seta orice valoare hexazecimală pentru fiecare dintre cele trei culori și puteți vedea rezultatul amestecării lor făcând clic în câmpul de ieșire.
Exemple de valori de culoare RGB hexazecimale: gradații roșu, albastru și verde.
| vedere | Codul | vedere | Codul | vedere | Codul | vedere | Codul | vedere | Codul | vedere | Codul |
| #010000 | #800000 | #000100 | #008000 | #000001 | #000080 | ||||||
| #100000 | #900000 | #001000 | #009000 | #000010 | #000090 | ||||||
| #200000 | #A00000 | #002000 | #00A000 | #000020 | #0000A0 | ||||||
| #300000 | #B00000 | #003000 | #00B000 | #000030 | #0000B0 | ||||||
| #400000 | #C00000 | #004000 | #00C000 | #000040 | #0000C0 | ||||||
| #500000 | #D00000 | #005000 | #00D000 | #000050 | #0000D0 | ||||||
| #600000 | #E00000 | #006000 | #00E000 | #000060 | #0000E0 | ||||||
| #700000 | #FF0000 | #007000 | #00FF00 | #000070 | #0000FF |
Specificarea unei culori cu literali șir
Pentru ușurință în utilizare, unele culori și combinațiile lor au primit nume care sunt recunoscute de toate browserele și a devenit posibilă setarea multor dintre ele după nume. Tabelul de mai jos prezintă câteva dintre numele culorilor:
| vedere | Nume | vedere | Nume | vedere | Nume | vedere | Nume |
| alb | roșu | portocale | Galben | ||||
| Verde | Albastru | Violet | Negru | ||||
| Alice albastru | alb antic | Aqua | acvamarin | ||||
| Azur | Bej | Bisque | blanchedalmond | ||||
| Albastru violet | Maro | Burlywood | Cadet albastru | ||||
| chartreuse | Ciocolată | Coral | Albastru de colț | ||||
| Matase de porumb | purpuriu | cyan | albastru inchis | ||||
| Darkcyan | vergea de aur închis | gri închis | verde inchis | ||||
| Darkkhaki | magenta închisă | verde întunecat | portocaliu închis | ||||
| Darkorchid | roșu-închis | darksalmon | Darkseagreen | ||||
| albastru ardezie închisă | gri închis ardezie | turcoaz închis | Darkviolet | ||||
| Roz închis | albastru profund al cerului | Dimgray | dodger blue | ||||
| Caramida de foc | Alb floral | padure verde | Fuschia | ||||
| Gainsboro | alb fantomă | Aur | Vergea de Aur | ||||
| gri | Verde galben | Mană | roz fierbinte | ||||
| Roșu indian | Indigo | Fildeş | Kaki | ||||
| Lavandă | Lavenderblush | Lemonchiffon | albastru deschis | ||||
| coral deschis | cyan-deschis | luminarecegalben | verde deschis | ||||
| gri deschis | Roz deschis | somon ușor | Lightsea verde | ||||
| Albastru deschis | Gri ardezie deschis | albastru deschis de oțel | lumină galbenă | ||||
| lămâie verde | Verde lime | lenjerie | Magenta | ||||
| maro | acvamarin mediu | albastru mediu | Orhidee medie | ||||
| Mov mediu | Mediumseagreen | Mediumslateblue | verde mijlociu | ||||
| turcoaz mediu | roșu violet mediu | albastru miezul nopții | cremă de mentă | ||||
| mistyrose | Navajowhite | Marinei | dantelă veche | ||||
| măsline | Olivedrab | portocaliu rosu | Orhidee | ||||
| palegoldenrod | Verde palid | paleturcoaz | paleviolet | ||||
| papayawhip | Peachpuff | Peru | Roz | ||||
| Prună | Pudra albastra | Rosybrown | albastru regal | ||||
| maro de șa | mare verde | scoica de mare | Sienna | ||||
| Argint | cer albastru | Ardezie albastră | Slategray | ||||
| Zăpadă | Springgreen | albastru oțel | bronzat | ||||
| Teal | Ciulin | roșie | Turcoaz | ||||
| violet | Grâu | Fum alb | galben verde |
Utilizarea unui Selector de culori sigur
Din păcate, pe platforme diferite, cu setări de sistem diferite, reproducerea corectă a culorilor este o problemă. Chestia este că browserul încearcă întotdeauna să ajusteze paleta de culori a documentului la setările sistemului și la capacitățile monitorului, amestecând și înlocuind singur culorile. Ca rezultat, uneori utilizatorul nu vede chiar ceea ce webmasterul a vrut să-i arate. Ieșirea din această situație a fost găsită în utilizarea unei palete, fiecare culoare a cărei culoare este garantată a fi redată la fel de către toate browserele de pe platforme diferite. Acest așa-zis garantat paletă, cunoscută și ca sigur paletă. Această paletă include culori ale căror componente de culoare iau următoarele valori: 00 ,33 ,66 ,99 , CC,FF, în tot posibilul 216 combinatiile lor.
| vedere | Codul | vedere | Codul | vedere | Codul | vedere | Codul | vedere | Codul | vedere | Codul |
| FFFFFF | CCCCCC | 999999 | 666666 | 333333 | 000000 | ||||||
| CCCC66 | CCCC33 | 999966 | 999933 | 999900 | 666600 | ||||||
| CCFF66 | CCFF00 | CCFF33 | CCCC99 | 666633 | 333300 | ||||||
| 99FF00 | 99FF33 | 99CC66 | 99CC00 | 99CC33 | 669900 | ||||||
| CCFF99 | 99FF99 | 66CC00 | 66CC33 | 669933 | 336600 | ||||||
| 66FF00 | 66FF33 | 33FF00 | 33CC00 | 339900 | 009900 | ||||||
| 33FF33 | 00FF33 | 00FF00 | 00CC00 | 33CC33 | 00CC33 | ||||||
| CCFFCC | 99CC99 | 66CC66 | 669966 | 336633 | 003300 | ||||||
| 99FF99 | 66FF66 | 33FF66 | 00FF66 | 339933 | 006600 | ||||||
| 66FF99 | 33FF99 | 00FF99 | 33CC66 | 00CC66 | 009933 | ||||||
| 66CC99 | 33CC99 | 00CC99 | 339966 | 009966 | 006633 | ||||||
| 99FFCC | 66FFCC | 33FFCC | 00FFCC | 33CCCC | 009999 | ||||||
| CCFFFF | 99FFFF | 66FFFF | 33FFFF | 00FFFF | 00CCCC | ||||||
| 99CCCC | 66CCCC | 339999 | 669999 | 006666 | 336666 | ||||||
| 66CCFF | 33CCFF | 00CCFF | 3399CC | 0099CC | 003333 | ||||||
| 99CCFF | 3399FF | 0099FF | 6699CC | 336699 | 006699 | ||||||
| 0066FF | 3366CC | 0066CC | 0033FF | 003399 | 003366 | ||||||
| 6699FF | 3366FF | 0000FF | 0000CC | 0033CC | 000033 | ||||||
| 3333FF | 3300FF | 3300CC | 3333CC | 000099 | 000066 | ||||||
| 9999CC | 6666FF | 6666CC | 666699 | 333399 | 333366 | ||||||
| CCCCFF | 9999FF | 6666FF | 6600FF | 330099 | 330066 | ||||||
| 9966CC | 9966FF | 6600CC | 6633CC | 663399 | 330033 | ||||||
| CC99FF | CC66FF | 9933FF | 9900FF | 660099 | 663366 | ||||||
| CC66FF | CC33FF | CC00FF | 9900CC | 996699 | 660066 | ||||||
| CC99CC | CC66CC | CC33CC | CC00CC | 990099 | 993399 | ||||||
| FFCCFF | FF99FF | FF66FF | FF33FF | FF00FF | CC3399 | ||||||
| FF66CC | FF00CC | FF33CC | CC6699 | CC0099 | 990066 | ||||||
| FF99CC | FF3399 | FF0099 | CC0066 | 993366 | 660033 | ||||||
| FF6699 | FF3399 | FF0066 | CC3366 | 996666 | 663333 | ||||||
| CC9999 | CC6666 | CC3333 | CC0000 | 990033 | 330000 | ||||||
| FFCCCC | FF9999 | FF6666 | FF3333 | FF0000 | CC0033 | ||||||
| FF6633 | CC3300 | FF3300 | FF0000 | CC0000 | 990000 | ||||||
| FFCC99 | FFCC66 | FF6600 | CC6633 | 993300 | 660000 | ||||||
| FF9900 | FF9933 | CC9966 | CC6600 | 996633 | 663300 | ||||||
| FFCC66 | FFCC00 | FFCC33 | CC9900 | CC9933 | 996600 | ||||||
| FFFFCC | FFFF99 | FFFF66 | FFFF33 | FFFF00 | CCCC00 |
Codurile de culoare în CSS sunt folosite pentru a specifica culorile. De obicei, codurile de culoare sau valorile de culoare sunt folosite pentru a seta o culoare fie pentru prim-planul unui element (de exemplu, text, culoarea linkului), fie pentru fundalul unui element (fondul, culoarea blocului). Ele pot fi, de asemenea, folosite pentru a schimba culoarea butoanelor, chenarele, marcatorul, hoverul și alte efecte decorative.
Puteți seta valorile culorii în diferite formate. Următorul tabel listează toate formatele posibile:
Aceste formate sunt descrise mai detaliat mai jos.
Culori CSS - coduri hexadecimale
Cod de culoare hexazecimal este o reprezentare de culoare din șase cifre. Primele două cifre (RR) sunt valoarea roșie, următoarele două sunt valoarea verde (GG) și ultimele două sunt valoarea albastră (BB).
Culori CSS - coduri hexadecimale scurte
Cod de culoare hexazecimal scurt este o formă mai scurtă de notație cu șase caractere. Î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 un semn hash „#”. Următoarele sunt exemple de utilizare a notației hexazecimale.
Culori CSS - Valori RGB
Valoarea RGB este un cod 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 cu serviciul nostru.
Culorile browser sigure
Mai jos este un tabel cu 216 culori care sunt cele mai sigure și independente de computer. Aceste culori în CSS variază de la 000000 la codul hexadecimal FFFFFF. Ele sunt sigure de utilizat deoarece asigură că toate computerele vor afișa corect culoarea atunci când lucrează cu paleta de 256 de culori.
| Tabel de culori „sigure” în CSS | |||||
| #000000 | #000033 | #000066 | #000099 | #0000CC | #0000FF |
| #003300 | #003333 | #003366 | #003399 | #0033CC | #0033FF |
| #006600 | #006633 | #006666 | #006699 | #0066CC | #0066FF |
| #009900 | #009933 | #009966 | #009999 | #0099CC | #0099FF |
| #00CC00 | #00CC33 | #00CC66 | #00CC99 | #00CCCC | #00CCFF |
| #00FF00 | #00FF33 | #00FF66 | #00FF99 | #00FFCC | #00FFFF |
| #330000 | #330033 | #330066 | #330099 | #3300CC | #3300FF |
| #333300 | #333333 | #333366 | #333399 | #3333CC | #3333FF |
| #336600 | #336633 | #336666 | #336699 | #3366CC | #3366FF |
| #339900 | #339933 | #339966 | #339999 | #3399CC | #3399FF |
| #33CC00 | #33CC33 | #33CC66 | #33CC99 | #33CCCC | #33CCFF |
| #33FF00 | #33FF33 | #33FF66 | #33FF99 | #33FFCC | #33FFFF |
| #660000 | #660033 | #660066 | #660099 | #6600CC | #6600FF |
| #663300 | #663333 | #663366 | #663399 | #6633CC | #6633FF |
| #666600 | #666633 | #666666 | #666699 | #6666CC | #6666FF |
| #669900 | #669933 | #669966 | #669999 | #6699CC | #6699FF |
| #66CC00 | #66CC33 | #66CC66 | #66CC99 | #66CCCC | #66CCFF |
| #66FF00 | #66FF33 | #66FF66 | #66FF99 | #66FFCC | #66FFFF |
| #990000 | #990033 | #990066 | #990099 | #9900CC | #9900FF |
| #993300 | #993333 | #993366 | #993399 | #9933CC | #9933FF |
| #996600 | #996633 | #996666 | #996699 | #9966CC | #9966FF |
| #999900 | #999933 | #999966 | #999999 | #9999CC | #9999FF |
| #99CC00 | #99CC33 | #99CC66 | #99CC99 | #99CCCC | #99CCFF |
| #99FF00 | #99FF33 | #99FF66 | #99FF99 | #99FFCC | #99FFFF |
| #CC0000 | #CC0033 | #CC0066 | #CC0099 | #CC00CC | #CC00FF |
| #CC3300 | #CC3333 | #CC3366 | #CC3399 | #CC33CC | #CC33FF |
| #CC6600 | #CC6633 | #CC6666 | #CC6699 | #CC66CC | #CC66FF |
| #CC9900 | #CC9933 | #CC9966 | #CC9999 | #CC99CC | #CC99FF |
| #CCCC00 | #CCCC33 | #CCCC66 | #CCCC99 | #CCCCCC | #CCCCFF |
| #CCFF00 | #CCFF33 | #CCFF66 | #CCFF99 | #CCFFCC | #CCFFFF |
| #FF0000 | #FF0033 | #FF0066 | #FF0099 | #FF00CC | #FF00FF |
| #FF3300 | #FF3333 | #FF3366 | #FF3399 | #FF33CC | #FF33FF |
| #FF6600 | #FF6633 | #FF6666 | #FF6699 | #FF66CC | #FF66FF |
| #FF9900 | #FF9933 | #FF9966 | #FF9999 | #FF99CC | #FF99FF |
| #FFCC00 | #FFCC33 | #FFCC66 | #FFCC99 | #FFCCCC | #FFCCFF |
| #FFFF00 | #FFFF33 | #FFFF66 | #FFFF99 | #FFFFCC | #FFFFFF |
Culoarea în CSS poate fi setată în diferite moduri:
- dupa nume,
- prin valoare hexazecimală,
- în formatele RGB și RGBA,
- în formatele HSL și HSLA.
Setați culoarea după nume
Browserele acceptă specificarea anumitor culori pentru elemente după nume. În acest tabel, unele dintre cuvintele cheie (nume de culori în limba engleză) sunt utilizate pentru a seta proprietățile culorii, codul RGB, codul hexazecimal (HEX) și codul HSL.
| Nume | Culoare | RGB | HEX | HSL | Descriere |
|---|---|---|---|---|---|
| alb | rgb(255, 255, 255) | #ffff sau #fff | hsl(0, 0%, 100%) | alb | |
| argint | rgb(192, 192, 192) | #c0c0c0 | hsl(0, 0%, 75%) | gri | |
| gri | rgb(128, 128, 128) | #808080 | hsl(0, 0%, 50%) | Gri inchis | |
| negru | rgb(0, 0, 0) | #000000 sau #000 | hsl(0, 0%, 0%) | Negrul | |
| maro | rgb(128, 0, 0) | #800000 | hsl(0, 100%, 25%) | Roșu-închis | |
| roșu | rgb(255, 0, 0) | #ff0000 sau #f00 | hsl(0, 100%, 50%) | roșu | |
| portocale | rgb(255, 165, 0) | #ffa500 | hsl(38,8, 100%, 50%) | portocale | |
| galben | rgb(255, 255, 0) | #ffff00 sau #ff0 | hsl(60, 100%, 50%) | Galben | |
| măsline | rgb(128, 128, 0) | #808000 | hsl(60, 100%, 25%) | măsline | |
| lămâie verde | rgb(0, 255, 0) | #00ff00 sau #0f0 | hsl(120, 100%, 50%) | verde deschis | |
| verde | rgb(0, 128, 0) | #008000 | hsl(120, 100%, 25%) | Verde | |
| acva | rgb(0, 255, 255) | #00ffff sau #0ff | hsl(180, 100%, 50%) | Albastru | |
| albastru | rgb(0, 0, 255) | #0000ff sau #00f | hsl(240, 100%, 50%) | Albastru | |
| marina | rgb(0,0,128) | #000080 | hsl(240, 100%, 25%) | Albastru inchis | |
| teal | rgb(0, 128, 128) | #008080 | hsl(180, 100%, 25%) | albastru verde | |
| fucsie | rgb(255, 0, 255) | #ff00ff sau #f0f | hsl(300, 100%, 50%) | Roz | |
| Violet | rgb(128, 0, 128) | #800080 | hsl(300, 100%, 25%) | Violet |
Acesta este un exemplu de utilizare a numelor de culori, numele culorilor sunt preluate din tabelul extins.
Iată cum funcționează acest cod:
Setarea culorii cu RGB
RGB este un model de culoare aditiv. În limba engleză plus- adaos. RGB este o abreviere a cuvintelor englezești: Red, Green, Blue - red, green, blue). Din aceasta rezultă clar că în modelul RGB culorile sunt sintetizate prin adăugarea a trei culori (roșu, verde, albastru) în cantități variate.
Amestecând culorile roșu, verde și albastru, puteți obține câteva milioane de nuanțe. Toate combinațiile posibile sunt stocate în memoria computerelor.
Treci la subiect.
Pentru a seta proprietăți în acest format, se folosește notația rgb(r, g, b), unde r, g, b sunt cele trei canale pentru fiecare culoare (roșu, verde, albastru). Valorile pentru fiecare canal sunt setate în intervalul de la 0 la 255.
Exemplu de cod.
Pentru a clarifica totul, voi da un exemplu de cod:
Iată cum ar trebui să funcționeze acest exemplu:
Fig.1. Culori în RGB. Explicatii de exemplu.
La începutul paginii, creăm clasa div.rgb, este necesară pentru ca blocurile create de tag-ul
Apoi, în cod setați culoarea de fundal a blocului
Încercați să editați acest exemplu pentru a include propriile valori, cum ar fi rgb(100, 100, 100) .
Setarea culorii cu RGBA
CSS3 a introdus un nou instrument pentru lucrul cu culoarea - formatul RGBA. Poate fi numită o evoluție a modelului RGB, dar cu adăugarea unui nou canal - A sau canal alfa. Acest canal stabilește transparența culorii. Valorile sale sunt setate în intervalul de la 0 la 1. O valoare egală cu 0 corespunde transparenței totale, 1 - opacității complete (culoarea va fi aceeași cu cea setată în primele trei canale RGB) și valorilor intermediare , cum ar fi 0,4 sau 0,6 - transluciditate în grade diferite.
Exemplu de cod.
Iată cum va funcționa:
Acest cod este vizual similar cu următorul, care utilizează modelul RGB pentru a seta valoarea culorii:
Iată rezultatul lui:
O valoare a canalului alfa egală cu zero face orice culoare invizibilă - absolut transparentă, o valoare egală cu unu traduce culoarea în codul RGB fără modificări. Proprietatea rgba(255,0,0,1.0) arată culoarea roșie rgb(255, 0, 0) .
După valoare hexazecimală (cod HEX)
În viața de zi cu zi, folosim sistemul zecimal de numărare. Originile sale sunt foarte simple - avem zece degete pe mâini și era convenabil să numărăm pe degete în viață. Dacă există zece cifre în sistemul zecimal: de la 0 la 9, iar numărul 10 este următoarea cifră, atunci există 16 cifre în sistemul numeric hexazecimal, iar următoarea cifră va fi numărul 16.
Pentru a indica codurile de culoare, cifrele zecimale obișnuite de la 0 la 9 sunt folosite ca cifre hexazecimale și literele latine de la A la F sunt folosite pentru a indica numerele de la 10 la 15, adică (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F). Pentru claritate, să rezumam acest lucru într-un tabel:
Pentru a scrie numere hexazecimale mai mari decât F (15 zecimale), ca în sistemul zecimal, se folosesc și unirea a două cifre, dar deja hexazecimală, ceea ce este evident. Deci, pentru a scrie numărul zecimal 255 în hexazecimal, se folosește notația FF.
Sistemul hexazecimal este mai ușor de înțeles de computer, procesează mai rapid valorile date de valoarea hexazecimală.
Pentru a specifica o culoare în sistemul hexazecimal, precedați valoarea numerică cu semnul „#”, exemplu: #FFC0CB . Valoarea #FFC0CB în sine constă din trei cifre hexazecimale FF , C0 și CB . Semnificația acestei intrări este aceeași cu setarea culorii în format RGB (rgb(r, g, b) ) - fiecare cifră hexazecimală din codul HEX indică saturația culorii în canalul său de model RGB.
Acest cod va afișa următoarele elemente:
Și iată o imagine cu rezultatul din secțiunea „Setarea culorii cu RGB” din această pagină de mai sus.
Fig.1. Culori în RGB. Vedem că culorile sunt identice.
Este permisă o notație prescurtată pentru codul de culoare HEX: un număr din 6 cifre poate fi scris ca un număr din 3 cifre. Acest lucru este valabil numai dacă două cifre din valoarea culorii aceluiași canal sunt repetate.
Adică, următoarea abreviere este acceptabilă:
De exemplu, culoarea #ff22aa poate fi scrisă ca #f2a , sau culoarea #44aa22 poate fi scrisă ca #4a2 .
Setarea culorii cu HSL
CSS3 are un nou format pentru specificarea culorilor.
Formatul HSL este o abreviere a cuvintelor englezești: Hue (hue), Saturate (saturație) și Lightness (luminozitate).
Nuanța în HSL este o valoare a culorii pe o roată specială de culoare (Figura 2) și este specificată în grade. Dacă trasăm analogii cu modelul RGB, atunci 0° corespunde roșului, 120° corespunde verdelui și 240° corespunde albastrului.
Valoarea nuanței se va schimba de la 0 la 359.
Figura 2. Roata de culori HSL. A doua valoare - saturația (Saturate) este setată ca procent. La 100% saturație, culoarea este cât se poate de „suculentă”, pe măsură ce indicatorul de saturație se deplasează spre 0%, culoarea devine din ce în ce mai ternă și se rostogolește în gri.
A treia valoare - luminozitatea (Lightness) este, de asemenea, setată ca procent. Cu cât procentul este mai mare, cu atât culoarea va fi mai strălucitoare. Valorile extreme de 0% și 100% vor indica, respectiv, culorile negre (lipsa luminii) și alb (expuse), și nu contează ce culoare din roata de culori a fost selectată în primul canal. Valoarea optimă poate fi considerată valoarea luminozității culorii egală cu 50%.
Setarea culorii cu HSLA
Formatul HSLA este legat de HSL, la fel ca RGB și RGBA. În formatul HSLA, precum și în RGBA, se adaugă un canal alfa care este responsabil pentru transparența culorilor.
O culoare specificată în format HSL este mai ușor de citit. Putem spune că este intuitiv. De exemplu, codul hsl(120,60%,50%) poate reprezenta culoarea finală dacă există o imagine a roții de culoare HSL în memorie. Acest lucru nu se poate spune despre formatele RGB și HEX, codul de culoare specificat în aceste formate devine clar doar după ce este redat pe monitor.
Noile formate în CSS3 (HSL, HSLA și RGBA) funcționează în browsere începând cu versiunile: IE 9.0, Opera 10.0 Firefox 3.0. Cum să faci stilurile să funcționeze pe browsere mai vechi?
Someblock (culoare de fundal: rgb(255,50,50); culoare de fundal: rgba(255,50,50,0.85))
Când utilizați acest cod în browsere mai vechi, culoarea de fundal pentru clasa .somebloсk, deși nu utilizează un canal alfa, va fi afișată în format RGB.
Numerele hexazecimale sunt folosite pentru a specifica culorile. Sistemul hexazecimal, spre deosebire de sistemul zecimal, se bazează, după cum sugerează și numele, pe numărul 16. Numerele vor fi următoarele: 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 sistemul hexazecimal sunt formate prin combinarea a două numere într-unul singur. De exemplu, numărul 255 în zecimală corespunde numărului FF în hexazecimal. Pentru a evita confuzia în definiția sistemului numeric, numărul hexazecimal este precedat de simbolul hash #, de exemplu #666999. Fiecare dintre cele trei culori - roșu, verde și albastru - poate lua valori 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 marchează verde, iar ultimele două marchează albastru. Este permisă utilizarea formei prescurtate #rgb, unde fiecare caracter trebuie dublat. Astfel, intrarea #fe0 ar trebui considerată ca #ffee00.
dupa nume
| Internet Explorer | Crom | Operă | safari | Firefox | Android | iOS |
| 4.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
Browserele acceptă unele culori după nume. În tabel. 1 arată numele, codul hex, valorile în format RGB, HSL și descrierea.
| Nume | Culoare | Codul | RGB | HSL | Descriere |
|---|---|---|---|---|---|
| alb | #ffff sau #fff | rgb(255.255.255) | hsl(0,0%,100%) | alb | |
| argint | #c0c0c0 | rgb(192.192.192) | hsl(0,0%,75%) | gri | |
| gri | #808080 | rgb(128.128.128) | hsl(0,0%,50%) | Gri inchis | |
| negru | #000000 sau #000 | rgb(0,0,0) | hsl(0,0%,0%) | Negrul | |
| maro | #800000 | rgb(128,0,0) | hsl(0,100%,25%) | Roșu-închis | |
| roșu | #ff0000 sau #f00 | rgb(255,0,0) | hsl(0,100%,50%) | roșu | |
| portocale | #ffa500 | rgb(255,165,0) | hsl(38,8,100%,50%) | portocale | |
| galben | #ffff00 sau #ff0 | rgb(255,255,0) | hsl(60,100%,50%) | Galben | |
| măsline | #808000 | rgb(128,128,0) | hsl(60,100%,25%) | măsline | |
| lămâie verde | #00ff00 sau #0f0 | rgb(0,255,0) | hsl(120,100%,50%) | verde deschis | |
| verde | #008000 | rgb(0,128,0) | hsl(120,100%,25%) | Verde | |
| acva | #00ffff sau #0ff | rgb(0.255.255) | hsl(180,100%,50%) | Albastru | |
| albastru | #0000ff sau #00f | rgb(0,0,255) | hsl(240,100%,50%) | Albastru | |
| marina | #000080 | rgb(0,0,128) | hsl(240,100%,25%) | Albastru inchis | |
| teal | #008080 | rgb(0.128.128) | hsl(180,100%,25%) | albastru verde | |
| fucsie | #ff00ff sau #f0f | rgb(255,0,255) | hsl(300,100%,50%) | Roz | |
| Violet | #800080 | rgb(128,0,128) | hsl(300,100%,25%) | Violet |
Cu RGB
| Internet Explorer | Crom | Operă | safari | Firefox | Android | iOS |
| 5.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
Puteți defini o culoare folosind valorile roșu, verde și albastru în termeni zecimali. Fiecare dintre cele trei componente de culoare ia o valoare de la 0 la 255. De asemenea, este acceptabil să setați culoarea ca procent, în timp ce 100% va corespunde numărului 255. Mai întâi, este specificat cuvântul cheie rgb, apoi componentele de culoare sunt specificate între paranteze, separate prin virgule, de exemplu rgb(255, 128, 128) sau rgb(100%, 50%, 50%).
RGBA
| Internet Explorer | Crom | Operă | safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 10.0+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
Formatul RGBA este similar ca sintaxă cu RGB, dar include un canal alfa care stabilește transparența elementului. O valoare de 0 este complet transparentă, 1 este opac, iar o valoare intermediară precum 0,5 este translucidă.
RGBA este adăugat la CSS3, astfel încât validarea codului CSS ar trebui să fie efectuată conform acestei versiuni. Trebuie remarcat faptul că standardul CSS3 este încă în curs de dezvoltare și unele dintre caracteristicile sale se pot schimba. De exemplu, o culoare RGB adăugată la proprietatea culoare de fundal trece validarea, dar una adăugată la proprietatea de fundal nu. În același timp, browserele înțeleg destul de corect culoarea pentru ambele proprietăți.
HSL
| Internet Explorer | Crom | Operă | safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 9.6+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
Numele formatului HSL este format dintr-o combinație a primelor litere Hue (nuanță), Saturate (saturație) și Lightness (luminozitate). Nuanța este valoarea culorii de pe roata de culori (Fig. 1) și este specificată î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ă lipsa culorii și o nuanță de gri, 100% este valoarea maximă de saturație.
Luminozitatea setează cât de strălucitoare este culoarea și este specificată ca procent de la 0% la 100%. Valorile mici fac culoarea mai închisă, în timp ce valorile mari o fac mai deschisă, valorile extreme de 0% și 100% corespund alb-negru.
HSLA
| Internet Explorer | Crom | Operă | safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 10.0+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
Formatul HSLA este similar ca sintaxă cu HSL, dar include un canal alfa care stabilește transparența elementului. O valoare de 0 este complet transparentă, 1 este opac, iar o valoare intermediară precum 0,5 este translucidă.
Valorile de culoare în formatele RGBA, HSL și HSLA sunt adăugate la CSS3, așa că atunci când utilizați aceste formate, verificați validitatea codului față de versiune.
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
Un avertisment
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
