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. Može li se bez toga?
Naravno da možete! 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
>>Upravljanje bojama
Heksadecimalne RGB vrijednosti boja
Metode za opisivanje i obradu boja razlikuju se jedna od druge po tome za koju konačnu reprezentaciju su namijenjene. Uporedimo, na primjer, prikaze boja za poligrafiju i za kompjuterske monitore. U prvom slučaju, osnova je Bijelo boja papira na koji se naknadno nanose tri osnovne boje: plava, ljubičasta i žuta. Miješajući se jedna s drugom i sa bijelom bojom papira u različitim proporcijama, ove tri osnovne boje daju različite nijanse boja, osim čisto crne, ili u potpunom odsustvu boja daju bijeli papir. Ako im dodamo crno, dobićemo CMYK- način prenošenja boje kada se željena boja dobije oduzimanjem boja koje nedostaju od bijele.
U drugom slučaju, osnova je crna boja ekrana monitora, čija svaka ćelija svijetli u jednoj od tri boje: crvena-crveni, zeleno-zeleno i plava-plava. Tada, u potpunom odsustvu bilo kakvog sjaja, dobijamo čisto crnu boju ekrana, a bilo koja od traženih boja je data odnosom svake od tri boje. U ovom slučaju ćemo dobiti RGB- Metoda prijenosa boje. Primarne boje mogu imati značenje od 0
prije 255
, ili od 0%
prije 100%
, ili se može predstaviti kao heksadecimalna vrijednost. Na slici ispod možete vidjeti rezultate miješanja primarnih boja.
Heksadecimalni brojevni sistem, za razliku od decimalnog, nema deset cifara u nizu cifara, već šesnaest - otuda i naziv. Shodno tome, neponavljajuće varijante kombinacija dvije cifre mogu biti samo - 256 , za nastavak niza cifara nakon 9 pisma od A prije F, pa će red izgledati ovako -
| 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F. |
U ovom slučaju, boja je data sa tri heksadecimalna broja, od kojih se svaki sastoji od dvije znamenke. Prvi broj određuje intenzitet crvena boje, prosječne zeleno, zadnja stvar- plava boje. Svi brojevi mogu imati vrijednosti u rasponu od 00 prije FF(od 0 do 255). Na primjer: zelena boja je data kao #00FF00, crvena - kao #FF0000, plava - kao #0000FF, bijela - kao #FFFFFF, potpuno odsustvo boje ili crne boje se daje kao #000000 .
U donjem obrascu možete postaviti bilo koje heksadecimalne vrijednosti za svaku od tri boje i vidjeti rezultat njihovog miješanja klikom na polje za izlaz.
Primjeri nekih heksadecimalnih RGB vrijednosti boja: crvena, plava i zelena gradacija.
| pogled | kod | pogled | kod | pogled | kod | pogled | kod | pogled | kod | pogled | kod |
| #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 |
Određivanje boje s literalima niza
Radi lakšeg korišćenja, neke boje i njihove kombinacije dobile su nazive koje prepoznaju svi pretraživači i postalo je moguće postaviti mnoge od njih po imenu. Tabela ispod prikazuje neke od naziva boja:
| pogled | ime | pogled | ime | pogled | ime | pogled | ime |
| Bijelo | Crveni | Narandžasta | Žuta | ||||
| Zeleno | Plava | Ljubičasta | Crno | ||||
| Alice plava | antikno bijelo | Aqua | akvamarin | ||||
| Azure | Bež | Bisque | blanchedalmond | ||||
| Blueviolet | Brown | Burlywood | Cadetblue | ||||
| chartreuse | Čokolada | Coral | Cornflowerblue | ||||
| Cornssilk | Crimson | cijan | tamno plava | ||||
| Darkcyan | darkgoldenrod | tamno siva | tamno zelena | ||||
| Darkkhaki | Darkmagenta | Darkolivegreen | darkrange | ||||
| Darkorchid | tamno crvena | tamni losos | Darkseagreen | ||||
| tamno plava | tamno siva | tamnotirkizno | Darkviolet | ||||
| Deeppink | duboko nebo plavo | Dimgray | dodger blue | ||||
| Vatrogasna cigla | Cvjetno bijela | forestgreen | Fuschia | ||||
| Gainsboro | ghost white | Zlato | Goldenrod | ||||
| siva | Greenyellow | Honeydew | hotpink | ||||
| Indian Red | Indigo | Ivory | Kaki | ||||
| Lavanda | Lavenderblush | Lemonchiffon | svijetlo plavo | ||||
| lagani koral | lightcyan | lightcoldenrodyellow | svijetlo zelena | ||||
| svijetlo siva | Lightpink | lagani losos | Svijetlo zelena | ||||
| Lightskyblue | Svijetlo siva | svijetlo čelično plava | svijetložuta | ||||
| kreč | Limegreen | posteljina | Magenta | ||||
| maroon | srednje akvamarin | srednje plava | Srednja orhideja | ||||
| Srednje ljubičasta | Mediumseagreen | Mediumslateblue | Mediumspringgreen | ||||
| srednje tirkizno | srednjeljubičasta crvena | ponoćno plavo | mintcream | ||||
| mistiroza | Navajowhite | mornarica | oldlace | ||||
| Maslina | Oliverab | narandžasto crvena | Orhideja | ||||
| palegoldenrod | Palegreen | paletirkizno | palevioletred | ||||
| papayawhip | Peachpuff | Peru | Pink | ||||
| Šljiva | Powderblue | Rosybrown | kraljevsko plavo | ||||
| saddlebrown | seagreen | Školjka | Sienna | ||||
| Srebro | nebo plavo | Slate plava | Slategray | ||||
| Snijeg | Springgreen | čelično plava | Tan | ||||
| Teal | Thistle | paradajz | Tirkizna | ||||
| ljubičasta | Pšenica | Whitesmoke | žuto zeleno |
Korištenje sigurnog birača boja
Nažalost, na različitim platformama, sa različitim sistemskim postavkama, ispravna reprodukcija boja je problem. Stvar je u tome što pretraživač uvek pokušava da prilagodi paletu boja dokumenta sistemskim postavkama i mogućnostima monitora, mešanjem i zamenom boja samostalno. Kao rezultat toga, ponekad korisnik ne vidi baš ono što mu je webmaster želio pokazati. Izlaz iz ove situacije pronađen je u korištenju palete, čija je svaka boja zagarantovana ista od strane svih pretraživača na različitim platformama. Ova tzv garantovano paleta, poznata i kao sigurno paleta. Ova paleta uključuje boje čije komponente boje poprimaju sljedeće vrijednosti: 00 ,33 ,66 ,99 , CC,FF, u svemu mogućem 216 njihove kombinacije.
| pogled | kod | pogled | kod | pogled | kod | pogled | kod | pogled | kod | pogled | kod |
| 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 |
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.
| Tabela "sigurnih" boja u CSS-u | |||||
| #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 |
Boja u CSS-u se može postaviti na različite načine:
- po imenu,
- po heksadecimalnoj vrijednosti,
- u RGB i RGBA formatima,
- u HSL i HSLA formatima.
Postavite boju po imenu
Preglednici podržavaju određivanje određenih boja za elemente po imenu. U ovoj tabeli, neke od ključnih reči (engleski nazivi boja) koje se koriste za postavljanje svojstava boja, RGB koda, heksadecimalnog koda (HEX) i HSL koda.
| Ime | Boja | RGB | HEX | HSL | Opis |
|---|---|---|---|---|---|
| bijela | rgb(255, 255, 255) | #fffff ili #ffff | hsl(0, 0%, 100%) | Bijelo | |
| srebro | rgb(192, 192, 192) | #c0c0c0 | hsl(0, 0%, 75%) | Siva | |
| siva | rgb(128, 128, 128) | #808080 | hsl(0, 0%, 50%) | Tamno siva | |
| crna | rgb(0, 0, 0) | #000000 ili #000 | hsl(0, 0%, 0%) | Crno | |
| maroon | rgb(128, 0, 0) | #800000 | hsl(0, 100%, 25%) | Tamno crvena | |
| crvena | rgb(255, 0, 0) | #ff0000 ili #f00 | hsl(0, 100%, 50%) | Crveni | |
| narandžasta | rgb(255, 165, 0) | #ffa500 | hsl(38,8, 100%, 50%) | Narandžasta | |
| žuta | rgb(255, 255, 0) | #ffff00 ili #ff0 | hsl(60, 100%, 50%) | Žuta | |
| maslina | rgb(128, 128, 0) | #808000 | hsl(60, 100%, 25%) | Maslina | |
| kreč | rgb(0, 255, 0) | #00ff00 ili #0f0 | hsl(120, 100%, 50%) | svijetlo zelena | |
| zeleno | rgb(0, 128, 0) | #008000 | hsl(120, 100%, 25%) | Zeleno | |
| aqua | rgb(0, 255, 255) | #00ffff ili #0ff | hsl(180, 100%, 50%) | Plava | |
| plava | rgb(0, 0, 255) | #0000ff ili #00f | hsl(240, 100%, 50%) | Plava | |
| mornarica | rgb(0,0,128) | #000080 | hsl(240, 100%, 25%) | Mornarsko plava | |
| teal | rgb(0, 128, 128) | #008080 | hsl(180, 100%, 25%) | plavo zeleno | |
| fuksija | rgb(255, 0, 255) | #ff00ff ili #f0f | hsl(300, 100%, 50%) | Pink | |
| ljubičasta | rgb(128, 0, 128) | #800080 | hsl(300, 100%, 25%) | Violet |
Ovo je primjer upotrebe naziva boja, nazivi boja su uzeti iz proširene tabele.
Evo kako ovaj kod radi:
Podešavanje boje pomoću RGB
RGB je aditivni model boja. Na engleskom dodatak- dodatak. RGB je skraćenica od engleskih riječi: Red, Green, Blue - crvena, zelena, plava). Iz ovoga je jasno da se u RGB modelu boje sintetiziraju dodavanjem tri boje (crvena, zelena, plava) u različitim količinama.
Miješanjem crvene, zelene i plave boje možete dobiti nekoliko miliona nijansi. Sve moguće kombinacije su pohranjene u memoriji računara.
Pređi na stvar.
Za postavljanje svojstava u ovom formatu koristi se notacija rgb(r, g, b), gdje su r, g, b tri kanala za svaku boju (crvena, zelena, plava). Vrijednosti za svaki kanal su postavljene u rasponu od 0 do 255.
Primjer koda.
Da sve bude jasno, dat ću primjer koda:
Ovako bi ovaj primjer trebao funkcionirati:
Fig.1. Boje u RGB. Objašnjenja na primjer.
Na početku stranice kreiramo klasu div.rgb, potrebna je kako bi blokovi kreirani tagom
Zatim u kodu postavite boju pozadine bloka
Pokušajte urediti ovaj primjer kako biste uključili vlastite vrijednosti, kao što je rgb(100, 100, 100) .
Podešavanje boje pomoću RGBA
CSS3 je predstavio novi alat za rad sa bojom - RGBA format. Može se nazvati evolucijom RGB modela, ali uz dodatak jednog novog kanala - A ili alfa kanala. Ovaj kanal postavlja transparentnost boje. Njegove vrijednosti su postavljene u rasponu od 0 do 1. Vrijednost jednaka 0 odgovara punoj transparentnosti, 1 - punoj neprozirnosti (boja će biti ista kao što je postavljena u prva tri RGB kanala), a srednje vrijednosti , kao 0,4 ili 0,6 - translucencija u različitim stepenima.
Primjer koda.
Evo kako će to raditi:
Ovaj kod je vizualno sličan sljedećem, koji koristi RGB model za postavljanje vrijednosti boje:
Evo njegovog rezultata:
Vrijednost alfa kanala jednaka nuli čini bilo koju boju nevidljivom - apsolutno transparentnom, vrijednost jednaka jedan prevodi boju u RGB kodu bez promjena. Svojstvo rgba(255,0,0,1.0) pokazuje crvenu boju rgb(255, 0, 0) .
Po heksadecimalnoj vrijednosti (HEX kod)
U svakodnevnom životu koristimo decimalni sistem brojanja. Njegovo porijeklo je vrlo jednostavno - imamo deset prstiju na rukama i bilo je zgodno računati na prste u životu. Ako u decimalnom sistemu ima deset cifara: od 0 do 9, a broj 10 je sljedeća znamenka, tada u heksadecimalnom brojevnom sistemu ima 16 cifara, a sljedeća cifra će biti broj 16.
Za označavanje kodova boja, obične decimalne cifre od 0 do 9 koriste se kao heksadecimalne cifre, a latinična slova od A do F se koriste za označavanje brojeva od 10 do 15, odnosno (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F). Radi jasnoće, sumiramo ovo u tabeli:
Za pisanje heksadecimalnih brojeva većih od F (15 decimala), kao u decimalnom sistemu, oni takođe koriste uniju dve cifre, ali već heksadecimalne, što je očigledno. Dakle, da bi se decimalni broj 255 zapisao u heksadecimalu, koristi se oznaka FF.
Heksadecimalni sistem je razumljiviji računaru, brže obrađuje vrijednosti koje daje heksadecimalna vrijednost.
Da biste naveli boju u heksadecimalnom sistemu, prethodite numeričkoj vrijednosti znakom "#", na primjer: #FFC0CB . Sama vrijednost #FFC0CB sastoji se od tri heksadecimalne cifre FF, C0 i CB. Značenje ovog unosa je isto kao i podešavanje boje u RGB formatu (rgb(r, g, b)) - svaka heksadecimalna cifra u HEX kodu označava zasićenost boje u svom kanalu RGB modela.
Ovaj kod će prikazati sljedeće elemente:
A evo i slike sa rezultatom iz odeljka "Podešavanje boje sa RGB" na ovoj stranici iznad.
Fig.1. Boje u RGB. Vidimo da su boje identične.
Dozvoljena je skraćena notacija za HEX kod boje: 6-cifreni broj se može napisati kao trocifreni broj. Ovo vrijedi samo ako se dvije cifre u vrijednosti boje istog kanala ponavljaju.
Odnosno, sljedeća skraćenica je prihvatljiva:
Na primjer, boja #ff22aa može biti napisana kao #f2a , ili boja #44aa22 može biti napisana kao #4a2 .
Postavljanje boje pomoću HSL-a
CSS3 ima novi format za određivanje boja.
HSL format je skraćenica od engleskih riječi: Hue (nijansa), Saturate (zasićenost) i Lightness (svjetlina).
Nijansa u HSL-u je vrijednost boje na posebnom kotaču boja (slika 2) i određena je u stepenima. Ako povučemo analogije sa RGB modelom, onda 0° odgovara crvenoj, 120° odgovara zelenoj, a 240° odgovara plavoj.
Vrijednost nijanse će se promijeniti od 0 do 359.
Slika 2. HSL točak boja. Druga vrijednost - zasićenost (Saturate) je postavljena kao postotak. Pri 100% zasićenosti, boja je što je moguće "sočnija", kako se indikator zasićenosti pomiče prema 0%, boja postaje sve dosadnija i postaje siva.
Treća vrijednost - lakoća (Lightness) je također postavljena kao procenat. Što je veći procenat, to će boja biti svetlija. Ekstremne vrijednosti od 0% i 100% će ukazati na crnu (nedostatak svjetla) i bijelu (izložena) boje, i nije bitno koja je boja iz kotača boja odabrana u prvom kanalu. Optimalna vrijednost može se smatrati vrijednost svjetline boje jednaka 50%.
Podešavanje boja sa HSLA
HSLA format je povezan sa HSL-om, kao što je RGB i RGBA. U HSLA formatu, kao iu RGBA, dodat je alfa kanal koji je odgovoran za transparentnost boja.
Boja specificirana u HSL formatu je lakša za čitanje. Možemo reći da je intuitivno. Na primjer, kod hsl(120,60%,50%) može predstavljati konačnu boju ako postoji slika HSL kotača boja u memoriji. To se ne može reći za RGB i HEX formate, kod boja naveden u ovim formatima postaje jasan tek nakon što se prikaže na monitoru.
Novi formati u CSS3 (HSL, HSLA i RGBA) rade u pretraživačima od verzija: IE 9.0, Opera 10.0 Firefox 3.0. Kako natjerati stilove da rade na starijim pretraživačima?
Neki blok (boja pozadine: rgb(255,50,50); boja pozadine: rgba(255,50,50,0.85))
Kada koristite ovaj kod u starijim pretraživačima, boja pozadine za klasu .someblosk, iako ne koristi alfa kanal, biće prikazana u RGB formatu.
Heksadecimalni brojevi se koriste za određivanje boja. Heksadecimalni sistem, za razliku od decimalnog, baziran je, 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 #rgb, gdje svaki znak treba udvostručiti. Dakle, unos #fe0 treba smatrati #ffee00.
po imenu
| Internet Explorer | Chrome | Opera | safari | Firefox | Android | iOS |
| 4.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
Pretraživači podržavaju neke boje po imenu. U tabeli. 1 prikazuje nazive, heksadecimalni kod, vrijednosti u RGB, HSL formatu i opis.
| Ime | Boja | Šifra | RGB | HSL | Opis |
|---|---|---|---|---|---|
| bijela | #fffff ili #ffff | rgb(255,255,255) | hsl(0,0%,100%) | Bijelo | |
| srebro | #c0c0c0 | rgb(192,192,192) | hsl(0,0%,75%) | Siva | |
| siva | #808080 | rgb(128,128,128) | hsl(0,0%,50%) | Tamno siva | |
| crna | #000000 ili #000 | rgb(0,0,0) | hsl(0,0%,0%) | Crno | |
| maroon | #800000 | rgb(128,0,0) | hsl(0,100%,25%) | Tamno crvena | |
| crvena | #ff0000 ili #f00 | rgb(255,0,0) | hsl(0,100%,50%) | Crveni | |
| narandžasta | #ffa500 | rgb(255,165,0) | hsl(38.8,100%,50%) | Narandžasta | |
| žuta | #ffff00 ili #ff0 | rgb(255,255,0) | hsl(60,100%,50%) | Žuta | |
| maslina | #808000 | rgb(128,128,0) | hsl(60,100%,25%) | Maslina | |
| kreč | #00ff00 ili #0f0 | rgb(0,255,0) | hsl(120,100%,50%) | svijetlo zelena | |
| zeleno | #008000 | rgb(0,128,0) | hsl(120,100%,25%) | Zeleno | |
| aqua | #00ffff ili #0ff | rgb(0,255,255) | hsl(180,100%,50%) | Plava | |
| plava | #0000ff ili #00f | rgb(0,0,255) | hsl(240,100%,50%) | Plava | |
| mornarica | #000080 | rgb(0,0,128) | hsl(240,100%,25%) | Mornarsko plava | |
| teal | #008080 | rgb(0,128,128) | hsl(180,100%,25%) | plavo zeleno | |
| fuksija | #ff00ff ili #f0f | rgb(255,0,255) | hsl(300,100%,50%) | Pink | |
| ljubičasta | #800080 | rgb(128,0,128) | hsl(300,100%,25%) | Violet |
Sa RGB
| Internet Explorer | Chrome | Opera | safari | Firefox | Android | iOS |
| 5.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
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
| Internet Explorer | Chrome | Opera | safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 10.0+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
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 validaciju, ali boja dodana svojstvu background-color ne prolazi. Istovremeno, pretraživači sasvim ispravno razumiju boju za oba svojstva.
HSL
| Internet Explorer | Chrome | Opera | safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 9.6+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
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 vrijednosti čine boju tamnijom, dok je visoke vrijednosti čine svjetlijom, ekstremne vrijednosti od 0% i 100% odgovaraju crno-bijeloj.
HSLA
| Internet Explorer | Chrome | Opera | safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 10.0+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
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
