Pažljivo pogledajte crtež. Pozadina padajućeg prozora je prozirna. Ovo je prilično čest dizajnerski trik. Razmislimo o tome kako se to može provesti.
Zadatak
Napravite poluprozirnu boju za više preglednika.
Riješenje
Prva pomisao u ovoj situaciji je korištenje png24-slike za pozadinu s već postavljenom prozirnošću. Ali ova slika je potpuno suvišna. Savršeno možete bez njega (a samim tim i bez nepotrebnog zahtjeva poslužitelju). Pokušajmo pronaći optimalno rješenje.
Druga misao je korištenje. Ali u ovom slučaju to nije baš zgodno. Uostalom, tada će ne samo pozadina, već i natpisi postati prozirni. Da, zapravo, cijeli prozor odjednom.
Naravno, možete pokušati dodati dodatni spremnik i primijeniti neprozirnost samo na njega, ali ovaj HTML element bit će samo za ukras i očito će biti suvišan. Možete li bez toga?
Naravno, možete! Ako koristite RGBA.
RGBA format opisa boja
CSS3 vam omogućuje da odredite boju pomoću RGB i RGBA funkcija. Istodobno, moramo navesti dio svake komponente boje, za koji je dodijeljen jedan bajt (od 0 do 255, iznenada, tko ne zna).
Sintaksa za ovaj slučaj je vrlo jednostavna:
Pozadina: rgb (0, 255, 0); / * čisto zelena * /
Za RGBA se dodaje četvrti parametar - alfa prozirnost (od 0 do 1).
Pozadina: rgba (255, 0, 0, 0,5); / * čisto crvena s 50% prozirnosti * /
Evo ga, rješenje za naš problem. Dovoljno je postaviti boju pozadine pomoću rgba i sve će izgledati kako nam treba. Bez nepotrebnih slika i elemenata!
Gdje mogu dobiti ove brojeve?
Komponente boje možete pogledati pomoću alata za kapaljku u Photoshopu.
O kompatibilnosti s različitim preglednicima
Budući da je RGB funkcija mnogo starija od RGBA i prisutna je još od dana CSS2 standarda, možete koristiti sljedeću duplikatnu konstrukciju za zaštitu od najstarijih preglednika:
SomeBlock (pozadina: rgb (255, 0, 0); pozadina: rgba (255, 0, 0, 0.5);)
Ovim pristupom pradjedovi modernih preglednika neće imati prozirnost, ali će sama boja ostati ispravna.
Morat ćemo se pobrinuti za IE zasebno. Oni poput magarca do verzije 8 ne razumiju RGBA.
Kao i uvijek: zemlja seljacima, tvornice radnicima, a magarci štakama! Kao .
Naravno, u borbenim uvjetima ovo pravilo stavljamo u poseban CSS koji povezujemo.
SomeBlock (pozadina: prozirna; filtar: progid: DXImageTransform.Microsoft.gradient (startColorstr = # 80ff0000, endColorstr = # 80ff0000); zoom: 1;)
Trik je u tome da početnu i završnu boju navedete iste (ff0000 - crvena) i iskoristite činjenicu da za gradijent u ovom filteru možete postaviti alfa kanal (u primjeru vrijednost 80).
Za referencu: filtar koristi heksadecimalni sustav i FF kod odgovara potpuno neprozirnoj boji (u decimalnom obliku je 255). Prema tome, heksadecimalni 80 je decimalni 128, tj. 50% prozirnosti.
Prijaviti se:
- IE 6-9
- Firefox 3+
- Opera 10+
- Safari 4
- Krom
>> Upravljanje bojama
Heksadecimalne vrijednosti RGB boja
Metode opisivanja i obrade boje međusobno se razlikuju po tome kakvom su konačnom prikazu namijenjene. Usporedimo, na primjer, prikaze boja za tisak i za računalne monitore. U prvom slučaju uzima se osnova Bijeli boja papira na koji se naknadno nanose tri primarne boje: plava, ljubičasta i žuta boja... Miješajući se jedna s drugom i s bijelom bojom papira u različitim omjerima, ove tri osnovne boje daju različite nijanse boja, osim čiste crne, ili, u potpunom odsustvu boje, daju bijelu boju papira. Ako im dodamo crnu, dobivamo CMYK- metoda prikazivanja boja, kada se tražena boja dobije oduzimanjem nedostajućih boja od bijele.
U drugom slučaju uzima se osnova crno boja zaslona monitora, čija svaka ćelija svijetli u jednoj od tri boje: Crvena-Crvena, zelena-zeleno i plava-plava. Zatim, u potpunom odsustvu bilo kakvog sjaja, dobivamo čistu crnu boju ekrana, a bilo koja od traženih boja je postavljena omjerom svake od tri boje. U ovom slučaju dobivamo RGB- metoda prijenosa boja. Primarne boje mogu varirati od 0
prije 255
, ili od 0%
prije 100%
, ili se može predstaviti kao heksadecimalna vrijednost. Na donjoj slici možete vidjeti rezultate miješanja primarnih boja.
Heksadecimalni brojevni sustav, za razliku od decimalnog broja u svom nizu znamenki, nema deset znamenki, već šesnaest - otuda i naziv. Sukladno tome, neponovljive varijante kombinacija dviju znamenki mogu biti samo - 256 , za nastavak niza znamenki nakon 9 pisma od A prije F stoga ć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 određena s tri heksadecimalna broja, od kojih se svaki sastoji od dvije znamenke. Prvi broj određuje intenzitet Crvena boje, prosječne zelena, zadnja stvar- plava boje. Svi brojevi mogu imati vrijednosti u rasponu od 00 prije FF(od 0 do 255). Na primjer: zelena se daje kao # 00FF00, crveno - kao # FF0000, plava - kao # 0000FF, bijela - kao #FFFFFF, potpuni izostanak boje ili crne boje daje se 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 su gradacije crvene, plave i zelene.
| 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 pomoću literala niza
Radi lakšeg korištenja, nekim bojama i njihovim kombinacijama dodijeljena su imena koja prepoznaju svi preglednici, a mnoge od njih postalo je moguće postaviti po imenu. Donja tablica navodi neke od naziva boja:
| pogled | Ime | pogled | Ime | pogled | Ime | pogled | Ime |
| Bijeli | Crvena | naranča | Žuta boja | ||||
| Zelena | Plava | Ljubičasta | Crno | ||||
| Aliceblue | Antiquewhite | Aqua | Akvamarin | ||||
| Azurno | Bež | Čorba | Blanchedalmond | ||||
| Plavoljubičasta | Smeđa | Burlywood | Kadetplavi | ||||
| Chartreuse | Čokolada | Koraljni | Različka plava | ||||
| Kukuruzna svila | Grimizno | cijan | Tamno plava | ||||
| Darkcyan | Tamnozlatna roda | Tamno sivo | Tamnozelene | ||||
| Darkkhaki | Darkmagenta | tamnocrvena | Tamnonarančasta | ||||
| Darkorchid | Tamno crvena | Tamni losos | Tamnozelena | ||||
| Tamnoplava | Darkslatesiva | Tamnotirkizno | Tamnoljubičasta | ||||
| Deeppink | Deepskyblue | Dimgray | Dodgerblue | ||||
| Vatrostalna opeka | Cvjetnobijela | Forestgreen | Fuschia | ||||
| Gainsboro | Ghostwhite | Zlato | Zlatna šipka | ||||
| Siva | Zelenožuti | Medljika | Hotpink | ||||
| indijskocrveno | Indigo | Slonovače | kaki | ||||
| Lavanda | Rumenilo od lavande | Limunšifon | Svijetlo plava | ||||
| Lightcoral | Lightcyan | Svijetlohladnožuta | Svijetlozelena | ||||
| Svijetlo siva | Svijetloružičasta | Lagani losos | Svijetlozelena | ||||
| Svijetloplava | Svijetlosiva | Svijetločeličnoplava | Svijetlo žuto | ||||
| Vapno | Limeta zelena | Posteljina | Magenta | ||||
| Kesten | Srednjekvamarin | Srednjeplava | Srednjemorhidni | ||||
| Srednjeljubičasta | Srednje zelene boje | Srednji škriljastoplavi | Srednjeproljetnozeleno | ||||
| Srednje tirkizno | Srednjeljubičasta | Ponoćnoplava | Krema od metvice | ||||
| Mistiroza | Navajowhite | Mornarica | Oldlace | ||||
| Maslina | Oliverab | Narančasto | Orhideja | ||||
| Palegoldenrod | Palegreen | paletirkizno | Palevioletred | ||||
| Papayawhip | Peachpuff | Peru | Ružičasta | ||||
| Šljiva | Puderplava | Ružičastosmeđa | Kraljevski plava | ||||
| Sedlastosmeđa | Seagreen | Školjka | Sienna | ||||
| Srebro | Plavo nebo | Slateblue | Slategray | ||||
| Snijeg | Springgreen | Čeličnoplava | Tan | ||||
| Teal | čičak | Rajčica | Tirkiz | ||||
| Ljubičasta | Pšenica | Whitesmoke | žutozelena |
Korištenje sigurnog birača boja
Nažalost, na različitim platformama, s različitim postavkama sustava, ispravan prikaz boja je problem. Stvar je u tome što preglednik uvijek pokušava prilagoditi paletu boja dokumenta postavkama sustava i mogućnostima monitora, samostalno miješajući boje i zamjenjujući ih. Kao rezultat toga, ponekad korisnik ne vidi baš ono što mu je web-master želio pokazati. Izlaz iz ove situacije pronađen je u korištenju palete, čija će svaka boja zajamčeno biti ista na svim preglednicima na različitim platformama. Ovo je tzv garantirano paleta, također se naziva sef paleta. Ova paleta uključuje boje čije komponente boje imaju 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 |
| Fffffff | 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 | 3300 CC | 3333CC | 000099 | 000066 | ||||||
| 9999CC | 6666FF | 6666CC | 666699 | 333399 | 333366 | ||||||
| CCCCFF | 9999FF | 6666FF | 6600FF | 330099 | 330066 | ||||||
| 9966CC | 9966FF | 6600 CC | 6633CC | 663399 | 330033 | ||||||
| CC99FF | CC66FF | 9933FF | 9900FF | 660099 | 663366 | ||||||
| CC66FF | CC33FF | CC00FF | 9900 CC | 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 |
CSS kodovi boja koriste se za određivanje boje. Obično se kodovi boja ili vrijednosti boja koriste za postavljanje boje za prednji plan elementa (na primjer, boja teksta, boja veze) ili za pozadinu elementa (boja pozadine, boja bloka). Također se mogu koristiti za promjenu boje gumba, obruba, markera, lebdenja i drugih ukrasnih efekata.
Možete postaviti vlastite vrijednosti boja u različitim formatima. Sljedeća tablica navodi sve moguće formate:
Navedeni formati su detaljnije opisani u nastavku.
CSS boje - heksadecimalni kodovi
Heksadecimalni kod boja je šesteroznamenkasti prikaz boje. Prve dvije znamenke (RR) predstavljaju crvenu vrijednost, sljedeće dvije predstavljaju zelenu vrijednost (GG), a posljednje dvije predstavljaju plavu vrijednost (BB).
CSS boje - kratki heksadecimalni kodovi
Kratki heksadecimalni kod boje je kraći oblik šesteroznamenkastih zapisa. U ovom formatu svaka znamenka se ponavlja kako bi se dobila ekvivalentna šesteroznamenkasta vrijednost boje. Na primjer: # 0F0 postaje # 00FF00.
Heksadecimalna vrijednost može se uzeti iz bilo kojeg grafičkog softvera kao što je Adobe Photoshop, Core Draw, itd.
Svakom heksadecimalnom kodu boje u CSS-u prethodit će hash znak "#". Slijede primjeri korištenja heksadecimalnog zapisa.
CSS boje - RGB vrijednosti
RGB vrijednost je kod boje koji se postavlja pomoću svojstva rgb (). Ovo svojstvo ima tri vrijednosti, po jednu za crvenu, zelenu i plavu. Vrijednost može biti cijeli broj, od 0 do 255, ili postotak.
Bilješka: ne podržavaju svi preglednici svojstvo boje rgb (), pa se ne preporučuje da ga koristite.
Ispod je primjer koji prikazuje više boja pomoću RGB vrijednosti.
Generator kodova boja
Pomoću naše usluge možete stvoriti milijune kodova boja.
Sigurne boje preglednika
Ispod je tablica od 216 boja koje su najsigurnije i najneovisnije o računalu. Ove CSS boje se kreću od 000000 do FFFFFF heksadecimalno. Sigurni su za korištenje jer osiguravaju da sva računala ispravno prikazuju boju kada rade s paletom od 256 boja.
| CSS "sigurna" tablica boja | |||||
| #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 jeziku može se postaviti na različite načine:
- imenom,
- po heksadecimalnoj vrijednosti,
- u RGB i RGBA formatima,
- u HSL i HSLA formatima.
Dodjela boja po imenu
Preglednici podržavaju određivanje nekih boja za elemente po imenu. U ovoj tablici neke ključne riječi (engleski nazivi boja) koje se koriste za postavljanje svojstava boja su RGB kod, heksadecimalni kod (HEX) i HSL kod.
| Ime | Boja | RGB | HEX | Hsl | Opis |
|---|---|---|---|---|---|
| bijelim | rgb (255, 255, 255) | #fffff ili #fff | hsl (0, 0%, 100%) | Bijeli | |
| srebro | rgb (192, 192, 192) | # c0c0c0 | hsl (0, 0%, 75%) | Siva | |
| siva | rgb (128, 128, 128) | #808080 | hsl (0, 0%, 50%) | Tamno siva | |
| crno | rgb (0, 0, 0) | # 000000 ili # 000 | hsl (0, 0%, 0%) | Crno | |
| kesten | rgb (128, 0, 0) | #800000 | hsl (0, 100%, 25%) | Tamno crvena | |
| Crvena | rgb (255, 0, 0) | # ff0000 ili # f00 | hsl (0, 100%, 50%) | Crvena | |
| naranča | rgb (255, 165, 0) | # ffa500 | hsl (38,8, 100%, 50%) | naranča | |
| žuta boja | rgb (255, 255, 0) | # ffff00 ili # ff0 | hsl (60, 100%, 50%) | Žuta boja | |
| maslina | rgb (128, 128, 0) | #808000 | hsl (60, 100%, 25%) | Maslina | |
| vapno | rgb (0, 255, 0) | # 00ff00 ili # 0f0 | hsl (120, 100%, 50%) | Svijetlo zelena | |
| zelena | rgb (0, 128, 0) | #008000 | hsl (120, 100%, 25%) | Zelena | |
| 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%) | Ružičasta | |
| ljubičasta | rgb (128, 0, 128) | #800080 | hsl (300, 100%, 25%) | Ljubičasta |
Ovo je primjer upotrebe naziva boja, naziv boja je preuzet iz proširene tablice.
Ovako radi ovaj kod:
Postavljanje boje pomoću RGB-a
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 možete dobiti nekoliko milijuna nijansi. Sve moguće kombinacije pohranjuju se u memoriju računala.
Prijeđi na stvar.
Za postavljanje svojstava u ovom formatu koristite oznaku rgb (r, g, b), gdje su r, g, b tri kanala za svaku boju (crvena, zelena, plava). Vrijednosti za svaki kanal kreću se od 0 do 255.
Primjer koda.
Da bi sve bilo jasno, dat ću primjer koda:
Ovako bi ovaj primjer trebao funkcionirati:
Sl. 1. Boje u RGB. Objašnjenja na primjer.
Na početku stranice stvaramo klasu div.rgb, potrebna je kako bi blokovi stvoreni oznakom
Zatim u kodu postavljamo boju pozadine bloka
Pokušajte urediti ovaj primjer i navedite svoje vrijednosti, na primjer rgb (100, 100, 100).
Postavljanje boje pomoću RGBA
CSS3 predstavlja novi alat za rad s bojom - RGBA format. Može se nazvati evolucijom RGB modela, ali s dodatkom jednog novog kanala - A ili alfa kanala. Ovaj kanal postavlja prozirnost 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 navedena u prva tri RGB kanala), a srednja vrijednosti, poput 0,4 ili 0,6 - do različitih stupnjeva prozirnosti.
Primjer koda.
Ovako radi:
Ovaj kod je vizualno sličan sljedećem, koji koristi RGB model za postavljanje vrijednosti boje:
Evo 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 rgb (255, 0, 0) crveno.
Heksadecimalna vrijednost (HEX kod)
U svakodnevnom životu koristimo decimalni sustav brojanja. Njegovo podrijetlo je vrlo jednostavno – imamo deset prstiju na rukama, a nekada je u životu bilo zgodno brojati na prste. Ako u decimalnom sustavu ima deset znamenki: od 0 do 9, a broj 10 je već sljedeća znamenka, tada u heksadecimalnom sustavu ima 16 znamenki, a sljedeća znamenka će biti broj 16.
Za označavanje kodova boja kao heksadecimalne znamenke koriste se obične decimalne znamenke od 0 do 9, a za označavanje znamenki od 10 do 15 koriste se latinična slova od A do F, odnosno (0, 1, 2, 3, 4, 5 , 6, 7, 8, 9, A, B, C, D, E, F). Radi jasnoće, sumirajmo ovo u tablicu:
Za pisanje heksadecimalnih brojeva većih od F (15 u decimalnom sustavu), kao i u decimalnom sustavu, također se koristi unija dviju znamenki, ali već heksadecimalna, što je očito. Dakle, za zapisivanje decimalnog broja 255 u heksadecimalnom zapisu koristi se FF.
Heksadecimalni sustav je razumljiviji za računalo, brže obrađuje vrijednosti određene heksadecimalnom vrijednošću.
Da biste naveli boju u heksadecimalnom sustavu, ispred numeričke vrijednosti stavite znak "#", na primjer: # FFC0CB. Sama vrijednost # FFC0CB sastoji se od tri heksadecimalne znamenke FF, C0 i CB. Značenje ove oznake je isto kao i postavljanje RGB boje (rgb (r, g, b)) - svaka heksadecimalna znamenka u HEX kodu označava zasićenost boje u svom RGB kanalu.
Ovaj kod će prikazati sljedeće stavke:
A evo i slike s rezultatom iz odjeljka "Podešavanje boja uz RGB" na ovoj stranici iznad.
Sl. 1. Boje u RGB. Vidimo da su boje identične.
Dopuštena je skraćena oznaka HEX koda u boji: 6-znamenkasti broj može se napisati kao troznamenkasti broj. Ovo vrijedi samo kada se dvije znamenke u vrijednosti boje jednog kanala ponavljaju.
Odnosno, prihvatljiva je sljedeća skraćenica oznake:
Na primjer, boja # ff22aa može se napisati ovako - # f2a, ili se boja # 44aa22 može odrediti kao # 4a2.
Postavljanje boje pomoću HSL-a
CSS3 uvodi novi format za određivanje boja.
HSL je skraćenica od engleskih riječi Hue, Saturate i Lightness.
Nijansa u HSL-u je vrijednost boje na posebnom kotaču boja (slika 2) i određena je u stupnjevima. U analogiji s RGB modelom, 0 ° odgovara crvenoj, 120 ° odgovara zelenoj, a 240 ° odgovara plavoj.
Vrijednost nijanse će se kretati od 0 do 359.
Slika 2. HSL kotač boja. Druga vrijednost je zasićenost (Saturate) postavljena je u postocima. Pri 100% zasićenosti, boja je maksimalno "sočna", kako se indikator zasićenosti pomiče na 0%, boja postaje sve dosadnija i postaje siva.
Treća vrijednost, Lightness, također je postavljena kao postotak. Što je veći postotak, to će boja biti svjetlija. Ekstremne vrijednosti od 0% i 100% značit će crnu (bez svjetla) odnosno bijelu (ispuhanu) boju, bez obzira koja je boja iz kotača boja odabrana u prvom kanalu. Optimalna vrijednost svjetline boje može se smatrati jednakom 50%.
Postavljanje boja s HSLA
HSLA je povezan s HSL-om, baš kao što je RGB i RGBA. U HSLA formatu, kao iu RGBA, dodan je alfa kanal koji je odgovoran za transparentnost boje.
HSL boja je lakša za čitanje. Možemo reći da je intuitivno. Na primjer, hsl (120,60%, 50%) kod može predstavljati konačnu boju ako u memoriji postoji HSL slika kotača u boji. Isto se ne može reći za RGB i HEX formate, kod boja naveden u tim formatima postaje razumljiv tek nakon što se vizualizira na monitoru.
Novi formati u CSS3 (HSL, HSLA i RGBA) rade u preglednicima počevši od verzija: IE 9.0, Opera 10.0 Firefox 3.0. Kako mogu učiniti da stilovi funkcioniraju na starijim preglednicima?
Someblosk (boja pozadine: rgb (255,50,50); boja pozadine: rgba (255,50,50,0.85))
Kada koristite ovaj kod u starijim preglednicima, boja pozadine za klasu .someblosk, iako neće koristiti alfa kanal, bit će prikazana u RGB formatu.
Za postavljanje boja koriste se heksadecimalni brojevi. Heksadecimalni sustav, za razliku od decimalnog sustava, temelji se, kako mu ime govori, na broju 16. Brojevi će biti sljedeći: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 , A, B, C , D, E, F. Brojevi od 10 do 15 zamjenjuju se latiničnim slovima. Brojevi veći od 15 u heksadecimalu nastaju spajanjem dva broja u jedan. Na primjer, 255 decimala jednako je FF heksadecimalno. Kako bi se izbjegla zabuna u definiciji brojevnog sustava, hash simbol # stavlja se ispred heksadecimalnog broja, na primjer # 666999. Svaka od tri boje - crvena, zelena i plava - može se kretati od 00 do FF. Dakle, oznaka boje podijeljena je na tri komponente #rrggbb, gdje prva dva znaka označavaju crvenu komponentu boje, dva srednja - zelenu, a posljednja dva - plavu. Dopušteno je koristiti skraćeni oblik kao što je #rgb, gdje svaki znak treba biti udvostručen. Dakle, unos # fe0 treba tretirati kao # ffee00.
Imenom
| Internet Explorer | Krom | Opera | Safari | Firefox | Android | iOS |
| 4.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
Preglednici podržavaju neke boje po imenu. Stol 1 prikazuje nazive, heksadecimalni kod, RGB, HSL vrijednosti i opis.
| Ime | Boja | Kod | RGB | Hsl | Opis |
|---|---|---|---|---|---|
| bijelim | #fffff ili #fff | rgb (255,255,255) | hsl (0,0%, 100%) | Bijeli | |
| srebro | # c0c0c0 | rgb (192,192,192) | hsl (0,0%, 75%) | Siva | |
| siva | #808080 | rgb (128,128,128) | hsl (0,0%, 50%) | Tamno siva | |
| crno | # 000000 ili # 000 | rgb (0,0,0) | hsl (0,0%, 0%) | Crno | |
| kesten | #800000 | rgb (128,0,0) | hsl (0,100%, 25%) | Tamno crvena | |
| Crvena | # ff0000 ili # f00 | rgb (255,0,0) | hsl (0,100%, 50%) | Crvena | |
| naranča | # ffa500 | rgb (255,165,0) | hsl (38,8,100%, 50%) | naranča | |
| žuta boja | # ffff00 ili # ff0 | rgb (255,255,0) | hsl (60,100%, 50%) | Žuta boja | |
| maslina | #808000 | rgb (128,128,0) | hsl (60,100%, 25%) | Maslina | |
| vapno | # 00ff00 ili # 0f0 | rgb (0.255.0) | hsl (120,100%, 50%) | Svijetlo zelena | |
| zelena | #008000 | rgb (0.128.0) | hsl (120,100%, 25%) | Zelena | |
| 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%) | Ružičasta | |
| ljubičasta | #800080 | rgb (128,0,128) | hsl (300,100%, 25%) | Ljubičasta |
S RGB-om
| Internet Explorer | Krom | Opera | Safari | Firefox | Android | iOS |
| 5.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
Možete odrediti boju pomoću decimalnih vrijednosti crvene, zelene i plave komponente. Svaka od tri komponente boje ima vrijednost od 0 do 255. Također je dopušteno postaviti boju kao postotak, dok će 100% odgovarati broju 255. Prvo je naznačena ključna riječ rgb, a zatim u zagradama komponente boje su označene, odvojene zarezima, na primjer rgb (255, 128, 128) ili rgb (100%, 50%, 50%).
RGBA
| Internet Explorer | Krom | 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 kontrolira transparentnost elementa. Vrijednost 0 odgovara punoj prozirnosti, 1 neprozirnosti, a srednja vrijednost poput 0,5 poluprozirnosti.
RGBA je dodan u CSS3, tako da bi valjanost CSS koda trebala biti obavljena pomoću ove verzije. Treba napomenuti da je CSS3 standard još uvijek u razvoju i da se neke značajke mogu promijeniti. Na primjer, RGB boja dodana svojstvu background-color je potvrđena, ali boja dodana svojstvu pozadine više nije. Istodobno, preglednici sasvim ispravno razumiju boju za oba svojstva.
Hsl
| Internet Explorer | Krom | 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 data je u stupnjevima. 0 ° je crvena, 120 ° je zelena, a 240 ° je plava. Vrijednost nijanse može biti u rasponu od 0 do 359.
Riža. 1. Kotačić u boji
Zasićenost je intenzitet boje, mjeren u postocima od 0% do 100%. Vrijednost od 0% označava bez boje i nijansu sive, 100% je maksimalna vrijednost zasićenja.
Svjetlina postavlja koliko je svijetla boja i prikazuje se u postocima od 0% do 100%. Niske vrijednosti čine boju tamnijom, a visoke vrijednosti posvjetljuju, ekstremne vrijednosti od 0% i 100% odgovaraju crno-bijeloj.
HSLA
| Internet Explorer | Krom | 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 definira transparentnost elementa. Vrijednost 0 odgovara punoj prozirnosti, 1 neprozirnosti, a srednja vrijednost poput 0,5 poluprozirnosti.
Vrijednosti boja u formatima RGBA, HSL i HSLA dodane su u CSS3, stoga svakako provjerite valjanost verzije kada koristite ove formate.
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
Upozorenje
Sve metode za hvatanje lava navedene na stranici su teorijske i temelje se na računskim metodama. Autori ne jamče vašu sigurnost prilikom njihove uporabe i odriču se bilo kakve odgovornosti za rezultat. Zapamtite, lav je grabežljivac i opasna životinja!
Rezultat ovog primjera prikazan je na sl. 2.
Riža. 2. Boje na web stranici
