Ngjyra css e verdhë. Vendosja e ngjyrës për tekstin në CSS

Kodet e ngjyrave CSS përdoren për të specifikuar një ngjyrë. Në mënyrë tipike, kodet e ngjyrave ose vlerat e ngjyrave përdoren për të vendosur një ngjyrë ose për planin e parë të një elementi (për shembull, ngjyra e tekstit, ngjyra e lidhjes) ose për sfondin e një elementi (ngjyra e sfondit, ngjyra e bllokut). Ato mund të përdoren gjithashtu për të ndryshuar ngjyrën e një butoni, kufiri, shënuesi, rri pezull dhe efekte të tjera dekorative.

Ju mund të vendosni vlerat tuaja të ngjyrave në formate të ndryshme. Tabela e mëposhtme liston të gjitha formatet e mundshme:

Formatet e listuara përshkruhen më në detaje më poshtë.

Ngjyrat CSS - Kodet Heksadecimal

Kodi heksadecimal i ngjyraveështë një paraqitje gjashtëshifrore e një ngjyre. Dy shifrat e para (RR) përfaqësojnë vlerën e kuqe, dy të tjerat përfaqësojnë vlerën e gjelbër (GG) dhe dy të fundit përfaqësojnë vlerën blu (BB).

Ngjyrat CSS - Kode të shkurtra Hex

Kodi i shkurtër gjashtëkëndor i ngjyraveështë forma më e shkurtër e shënimit gjashtëshifror. Në këtë format, çdo shifër përsëritet për të prodhuar vlerën ekuivalente të ngjyrës me gjashtë shifra. Për shembull: # 0F0 bëhet # 00FF00.

Vlera heksadecimal mund të merret nga çdo softuer grafik si Adobe Photoshop, Core Draw, etj.

Çdo kod heksadecimal ngjyrash në CSS do të paraprihet nga një shenjë hash "#". Më poshtë janë shembuj të përdorimit të shënimit heksadecimal.

Ngjyrat CSS - Vlerat RGB

Vlera RGBështë kodi i ngjyrës, i cili vendoset duke përdorur veçorinë rgb (). Kjo pronë merr tre vlera, një për të kuqe, jeshile dhe blu. Vlera mund të jetë një numër i plotë, nga 0 në 255, ose një përqindje.

Shënim: Jo të gjithë shfletuesit mbështesin veçorinë e ngjyrave rgb (), kështu që nuk rekomandohet përdorimi i saj.

Më poshtë është një shembull që tregon shumë ngjyra duke përdorur vlerat RGB.

Gjenerator i kodit të ngjyrave

Ju mund të krijoni miliona kode ngjyrash duke përdorur shërbimin tonë.

Ngjyra të sigurta të shfletuesit

Më poshtë është një tabelë me 216 ngjyra që janë më të sigurtat dhe më të pavarura nga kompjuteri. Këto ngjyra CSS variojnë nga 000000 në FFFFFF heksadecimal. Ato janë të sigurta për t'u përdorur sepse sigurojnë që të gjithë kompjuterët të shfaqin saktë ngjyrat kur punojnë me një gamë ngjyrash 256.

Shikoni nga afër vizatimin. Sfondi i dritares rënëse është bërë i tejdukshëm. Ky është një truk mjaft i zakonshëm i dizajnit. Le të mendojmë se si mund të zbatohet kjo.

Detyrë

Bëni një ngjyrë gjysmë transparente me ndërshfletues.

Zgjidhje

Mendimi i parë në këtë situatë është përdorimi i një fotografie png24 për sfondin me tejdukshmërinë e vendosur tashmë. Por kjo foto është krejtësisht e tepërt. Ju mund të bëni në mënyrë të përkryer pa të (dhe për këtë arsye pa një kërkesë të panevojshme për serverin). Le të përpiqemi të gjejmë zgjidhjen optimale.

Mendimi i dytë është përdorimi. Por në këtë rast nuk është shumë i përshtatshëm. Në fund të fundit, atëherë jo vetëm sfondi, por edhe mbishkrimet do të bëhen të tejdukshme. Po, në fakt, e gjithë dritarja menjëherë.

Sigurisht, mund të provoni të shtoni një enë shtesë dhe të aplikoni opacitet vetëm në të, por ky element HTML do të jetë vetëm për dekorim dhe padyshim do të jetë i tepërt. Mund të bëni pa të?

Sigurisht! Nëse përdorni RGBA.

Formati i përshkrimit të ngjyrave RGBA

CSS3 ju lejon të specifikoni ngjyrën duke përdorur funksionet RGB dhe RGBA. Në të njëjtën kohë, ne duhet të tregojmë fraksionin e secilit komponent të ngjyrës, për të cilin është ndarë një bajt (nga 0 në 255, papritmas, kush nuk e di).

Sintaksa për këtë rast është shumë e thjeshtë:

Sfondi: rgb (0, 255, 0); / * jeshile e pastër * /

Për RGBA, shtohet një parametër i katërt - transparenca alfa (nga 0 në 1).

Sfondi: rgba (255, 0, 0, 0.5); / * E kuqe e pastër me 50% transparencë * /

Këtu është zgjidhja e problemit tonë. Mjafton të vendosni ngjyrën e sfondit duke përdorur rgba dhe gjithçka do të duket si na nevojitet. Pa foto dhe elementë të panevojshëm!

Ku mund t'i marr këto numra?

Ju mund të shikoni përbërësit e ngjyrave duke përdorur mjetin eyedropper në Photoshop.

Rreth përputhshmërisë së ndër-shfletuesve

Meqenëse funksioni RGB është shumë më i vjetër se RGBA dhe ka qenë i pranishëm që nga ditët e standardit CSS2, mund të përdorni konstruksionin e mëposhtëm të kopjuar për t'u mbrojtur nga shfletuesit më të lashtë:

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

Me këtë qasje, stërgjyshërit e shfletuesve modernë nuk do të kenë tejdukshmëri, por vetë ngjyra do të mbetet e saktë.

Ne do të duhet të kujdesemi për IE veçmas. Ato si gomarët deri në versionin 8 nuk e kuptojnë RGBA.

Si gjithmonë: toka për fshatarët, fabrikat për punëtorët, dhe gomarët për paterica! Si .

Sigurisht, në kushte luftarake, ne e vendosim këtë rregull në një CSS të veçantë, të cilin e lidhim.

SomeBlock (sfondi: transparent; filtri: progid: DXImageTransform.Microsoft.gradient (startColorstr = # 80ff0000, endColorstr = # 80ff0000); zmadhimi: 1;)

Truku është të specifikoni ngjyrat e fillimit dhe të fundit të njëjta (ff0000 - e kuqe) dhe të përfitoni nga fakti që për gradientin në këtë filtër mund të vendosni kanalin alfa (në shembull, vlera 80).

Për referencë: filtri përdor një sistem heksadecimal dhe kodi FF korrespondon me një ngjyrë plotësisht të errët (në dhjetor është 255). Prandaj, heksadecimal 80 është dhjetor 128, pra transparencë 50%.

Regjistruar:

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

Monitorët e kompjuterëve, si dhe ekranet e telefonave celularë, smartfonëve dhe tabletëve, përbëhen nga mijëra katrorë të vegjël të quajtur piksel (nëse shikoni me vëmendje monitorin, mund t'i shihni ato). Kur ekrani fiket, ai është i zi sepse nuk lëshon dritë; kur ndizet, çdo piksel merr një ngjyrë të ndryshme, e cila krijon imazhin që shohim kur shikojmë ekranin.

Kur vendosim ngjyrën për kufirin e një elementi, sfondi ose teksti, atëherë vendosim ngjyrën për pikselët nga të cilët përbëhen. Ekzistojnë dy mënyra të përgjithshme për të specifikuar një ngjyrë në CSS: me emër ose me vlerë. Udhëzimi më i thjeshtë është me emër: e kuqja është e kuqe, bluja është blu, e kështu me radhë, por CSS nuk ofron shumë emra ngjyrash nga të cilat mund të zgjidhni. Nga ana tjetër, përcaktimi i një vlere ngjyrash nënkupton një zgjedhje shumë më të gjerë të nuancave. Ka disa mënyra për të specifikuar një vlerë ngjyre, dy më të zakonshmet janë vlerat RGB dhe Hexadecimal. Ata kanë qenë pjesë e CSS që në versionin e parë dhe çdo shfletues ueb i mbështet ato. CSS3 prezanton disa opsione të tjera për përcaktimin e ngjyrave: RGBA, HSL dhe HSLA, të cilat janë më pak ndër-shfletues, por versionet më të fundit të shfletuesit tashmë i mbështesin ato.

Emrat e ngjyrave

Mënyra më e thjeshtë dhe më e dukshme për të specifikuar një ngjyrë në CSS është të zgjidhni një emër të paracaktuar të ngjyrës nga një grup fjalësh kyçe. Janë të disponueshme gjithsej 147 fjalë kyçe me emra ngjyrash: 17 emra janë ngjyra standarde që u prezantuan në versionet e hershme të HTML (e bardhë, e zezë, e kuqe, e verdhë, blu, jeshile, portokalli, vjollcë, gri, argjendi, aqua, fuchsia, lime , ngjyrë gështenjë, marinë, ulliri dhe kafe), dhe 130 të tjera që u shtuan në CSS2. Ju mund të shihni të gjithë listën e emrave të ngjyrave të disponueshme në seksionin HTML të tabelës sonë të ngjyrave.

RGB dhe RGBA

RGB përdor tre numra që përshkruajnë sasitë relative të së kuqes, jeshiles dhe blusë që janë të përziera së bashku për të prodhuar ndonjë nuancë. Numrat mund të ndryshojnë nga 0 në 255. Konsideroni kodin RGB për ngjyrën vjollce të errët: rgb (204, 51, 255), për shembull, mund të aplikohet në vetinë CSS përgjegjëse për ngjyrën e shkronjave:

Ngjyra: rgb (205, 51, 255);

Sistemi RGBA shton një numër tjetër që përshkruan transparencën e ngjyrës, vlera mund të variojë nga 0 (plotësisht transparente) në 1 (plotësisht e errët). Një vlerë prej 0.5 e bën ngjyrën gjysmë transparente, merrni parasysh një version gjysmë transparent të vjollcës së errët, të specifikuar duke përdorur sistemin RGBA:

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

Ju mund të shihni se vlerat për të kuqe, jeshile dhe blu janë të ngjashme me sistemin RGB. Numri i katërt - 0.5 është shkalla e transparencës. Shkronja "A" në RGBA qëndron për kanalin alfa, i cili është një term i dizajnit grafik për transparencë.

Ngjyrat RGBA janë të dobishme për krijimin e elementeve të tejdukshëm që i bëjnë të dukshëm elementët poshtë tyre.

HSL dhe HSLA

Sistemi HSL (h ue, s aturation, lightness) përshkruan ngjyrat bazuar në nuancën, ngopjen dhe butësinë. Këtu është e njëjta ngjyrë vjollcë e thellë e specifikuar në formatin HSL:

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

Numri i parë është nuanca, e shprehur në gradë nga 0 në 360, e cila përcakton pozicionin e ngjyrës në rrotën e ngjyrave. Numri i dytë është ngopja, e përcaktuar si përqindje nga 0% në 100%, duke treguar se sa e ngopur (e ndritshme) do të jetë ngjyra. Numri i tretë është butësia, përcaktohet si përqindje ashtu si ngopja, butësia tregon se sa e lehtë ose e errët do të jetë ngjyra.

HSLA, si RGBA, shton një numër të katërt, që varion nga 0 në 1, që përcakton se sa transparente duhet të jetë ngjyra. Një vlerë prej 0.5 e bën ngjyrën gjysmë transparente, merrni parasysh një version gjysmë transparent të vjollcës së errët, të specifikuar duke përdorur sistemin HSLA:

Ngjyra: hsla (285, 100%, 60%, 0.5);

Vlerat heksadecimal të ngjyrave

Kodi heksadecimal i ngjyrës është gjashtë karakteret pas simbolit #:

Çdo grup prej dy karakteresh përfaqëson një numër nga 0 në 255. Pra, dy karakteret e para përfaqësojnë të kuqe, dy të tjerat përfaqësojnë jeshile dhe dy të fundit përfaqësojnë blunë. Në këtë, kodi heksadecimal është shumë i ngjashëm me RGB, me ndryshimin se këtu secila ngjyrë është specifikuar në shënimin heksadecimal në vend të dhjetorit.

Nëse çdo çift numrash përbëhet nga të njëjtat karaktere, atëherë vlera e ngjyrës mund të shkurtohet. Megjithatë, nëse kodi heksadecimal duket si # bbff10, atëherë një hyrje e tillë nuk mund të shkurtohet.

Ngjyra: # f00; ngjyra: # ff0000;

Shënim: shfletuesit që nuk mbështesin vlera të tilla ngjyrash (rgba, hsl dhe hsla) nuk lidhin asnjë ngjyrë me sfondin ose fontin, duke injoruar plotësisht reklamën. Në këtë rast, vlera e paracaktuar përdoret për sfondin e elementit (ai bëhet plotësisht transparent), dhe për tekstin përdoret vlera e paracaktuar (e zezë) ose ngjyra e trashëguar nga elementi prind.

Për versionet më të vjetra të shfletuesve, duhet të shtohet një rregull shtesë për të specifikuar ngjyrën në formatin RGB, heksadecimal ose emrin. Një rregull i tillë duhet të vijë përpara një rregulli që specifikon një ngjyrë në formatin RGBA, HSL ose HSLA. Kjo do të sigurojë një politikë sigurimi për ngjyrën, sepse në CSS, kur ka dy rregulla që vendosin një vlerë për të njëjtën pronë, rregulli i vendosur në kodin më poshtë ka gjithmonë përparësi. Kjo do të thotë që nëse shfletuesi mbështet formatet RGBA, HSL ose HSLA, atëherë do të përdorë rregullin e dytë, dhe nëse nuk e mbështet, atëherë të parin.

Numrat heksadecimal përdoren për të vendosur ngjyrat. Sistemi heksadecimal, ndryshe nga sistemi dhjetor, bazohet, siç sugjeron emri i tij, në numrin 16. Numrat do të jenë si më poshtë: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9. , A, B, C , D, E, F. Numrat nga 10 deri në 15 zëvendësohen me shkronja latine. Numrat më të mëdhenj se 15 në heksadecimal formohen duke kombinuar dy numra në një. Për shembull, 255 dhjetore është e barabartë me FF heksadecimal. Për të shmangur konfuzionin në përkufizimin e sistemit të numrave, simboli hash # vendoset përpara numrit heksadecimal, për shembull # 666999. Secila nga tre ngjyrat - e kuqe, jeshile dhe blu - mund të variojë nga 00 në FF. Kështu, emërtimi i ngjyrës ndahet në tre komponentë #rrggbb, ku dy karakteret e para shënojnë përbërësin e kuq të ngjyrës, dy të mesit - jeshile dhe dy të fundit - blu. Lejohet përdorimi i një forme të shkurtuar si #rgb, ku çdo karakter duhet të dyfishohet. Pra, hyrja # fe0 duhet të trajtohet si # ffee00.

Me emër

Shfletuesit mbështesin disa ngjyra me emër. Tabela 1 tregon emrat, kodin heksadecimal, vlerat RGB, HSL dhe përshkrimin.

Me RGB

Ju mund të përcaktoni ngjyrën duke përdorur vlerat dhjetore të përbërësve të kuq, jeshil dhe blu. Secili nga tre komponentët e ngjyrave merr një vlerë nga 0 në 255. Gjithashtu lejohet të vendoset ngjyra si përqindje, ndërsa 100% do t'i korrespondojë numrit 255. Së pari, specifikohet fjala kyçe rgb dhe më pas në kllapa, Komponentët e ngjyrave tregohen, të ndarë me presje, për shembull rgb (255 , 128, 128) ose rgb (100%, 50%, 50%).

RGBA

Formati RGBA është i ngjashëm në sintaksë me RGB, por përfshin një kanal alfa që kontrollon transparencën e elementit. Një vlerë prej 0 korrespondon me transparencën e plotë, 1 me transparencën dhe një vlerë të ndërmjetme si 0.5 me gjysmëtransparencë.

RGBA u shtua në CSS3, kështu që vërtetimi i kodit CSS duhet të bëhet duke përdorur këtë version. Duhet të theksohet se standardi CSS3 është ende në zhvillim e sipër dhe disa veçori mund të ndryshojnë. Për shembull, një ngjyrë RGB e shtuar në vetinë e ngjyrës së sfondit vërtetohet, por një ngjyrë e shtuar në veçorinë e sfondit jo më. Në të njëjtën kohë, shfletuesit e kuptojnë saktë ngjyrën për të dy vetitë.

Hsl

Emri i formatit HSL është formuar nga një kombinim i shkronjave të para Hue (hue), Saturate (ngopje) dhe Lightness (lehtësi). Hue është vlera e një ngjyre në rrotën e ngjyrave (Fig. 1) dhe jepet në gradë. 0 ° është e kuqe, 120 ° është e gjelbër dhe 240 ° është blu. Vlera e nuancës mund të variojë nga 0 në 359.

Oriz. 1. Rrota me ngjyra

Ngopja është intensiteti i një ngjyre, i matur si përqindje nga 0% në 100%. Një vlerë prej 0% tregon pa ngjyrë dhe një nuancë gri, 100% është vlera maksimale e ngopjes.

Lehtësia përcakton se sa e ndritshme është ngjyra dhe tregohet si përqindje nga 0% në 100%. Vlerat e ulëta e bëjnë ngjyrën më të errët, dhe vlerat e larta të ndriçojnë, vlerat ekstreme prej 0% dhe 100% korrespondojnë me të zezën dhe të bardhën.

HSLA

Formati HSLA është i ngjashëm në sintaksë me HSL, por përfshin një kanal alfa që përcakton transparencën e elementit. Një vlerë prej 0 korrespondon me transparencën e plotë, 1 me transparencën dhe një vlerë të ndërmjetme si 0.5 me gjysmëtransparencë.

Vlerat e ngjyrave në formatet RGBA, HSL dhe HSLA janë shtuar në CSS3, prandaj sigurohuni që të kontrolloni për vlefshmërinë e versionit kur përdorni këto formate.

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

Nje paralajmerim

Të gjitha metodat për kapjen e një luani të listuara në faqe janë teorike dhe të bazuara në metoda llogaritëse. Autorët nuk garantojnë sigurinë tuaj kur i përdorni dhe mohojnë çdo përgjegjësi për rezultatin. Mos harroni, luani është një grabitqar dhe një kafshë e rrezikshme!

Rezultati i këtij shembulli është paraqitur në Fig. 2.

Oriz. 2. Ngjyrat në faqen e internetit

I shpreh mirënjohjen time indirekte Google për idenë dhe u propozoj kolegëve të mi stafetën: është e nevojshme të ndaj me lexuesit burime të huaja për zhvillimin e uebit nga burimi im RSS, të cilat janë thelbësore dhe interesante për të shkruar për këtë çështje. Për të reduktuar bisedat e kota, kërkohen një sërë dispozitash të thjeshta:

1. Në blogun tuaj, publikoni një përkthim (mundeni lirisht, me komente dhe shtesa) të një artikulli nga burimi i paraqitur.
2. Përkthimet si dhe burimet e tyre nuk duhet të përsëriten për të siguruar mbulimin dhe diversitetin e informacionit.
3. Referojuni blogerit nga i cili u mor lajmi i mirë dhe, nëse është e mundur, kaloni stafetën.
4. Koha e stafetës nuk është vendosur; patjetër do të ketë dikush që do ta ndalojë këtë orgji.

Ky postim është fillimisht nga një prej postimeve të Drew McLellan në blogun e kalendarit kolektiv 24ways. Shkoni!

Çfarë është ngjyra RGBA?

Nuk do të hap sekret nëse them se nuanca e dëshiruar e ngjyrave krijohet në CSS duke përzier në përmasat e nevojshme të kuqe, jeshile dhe blu. Sidoqoftë, ekziston një paralajmërim - pavarësisht se çfarë ngjyre zgjedhim, ajo do të jetë gjithmonë e fortë dhe e errët.

CSS3 ofron disa mënyra të reja për të përcaktuar ngjyrën, njëra prej të cilave është përdorimi i modelit të ngjyrave RGBA. Shkronja "A" në shkurtim qëndron për "Alfa"; vlera e saj është përgjegjëse për sasinë e transparencës së ngjyrës. Me ndihmën e këtij modeli, ne mund të vendosim jo vetëm kombinimin e kërkuar të së kuqes, jeshiles dhe blusë, por edhe të përcaktojmë se sa "shkëlqen" ngjyra. Diçka e ngjashme mund të vërehet kur punoni me shtresa në Photoshop.

Për çfarë është vetia e opacitetit atëherë?

Çështja është se përkufizimi i transparencës për një ngjyrë është i ndryshëm nga përcaktimi i opacitetit për një element, i vendosur duke përdorur veçorinë opacity css. Le të shohim një shembull.

Ne kemi një titull h1 me ngjyra specifike për tekstin dhe sfondin, të vendosur në një faqe me një imazh të sfondit.

H1 (ngjyra: rgb (0, 0, 0); ngjyra e sfondit: rgb (255, 255, 255);)

Duke vendosur vetinë e opacitetit, mund të aplikoni transparencë për të gjithë elementin në tërësi:

H1 (ngjyra: rgb (0, 0, 0); ngjyra e sfondit: rgb (255, 255, 255); errësirë: 0,5;)

Modeli RGBA na ofron një mundësi më fleksibël - të kontrollojmë vetëm transparencën e ngjyrave, dhe jo të gjithë elementin. Për shembull, mund të vendosni transparencën vetëm për ngjyrën e sfondit:

H1 (ngjyra: rgb (0, 0, 0); ngjyra e sfondit: rgba (255, 255, 255, 0.5);)

Ose lini sfondin të pandryshuar dhe vendosni transparencën vetëm tek teksti:

H1 (ngjyra: rgba (0, 0, 0, 0.5); ngjyra e sfondit: rgb (255, 255, 255);)

Ndoshta është më pak e zakonshme të përdoret sintaksa rgb () për të përcaktuar një ngjyrë sesa shënimi heksadecimal (si #fff), megjithatë, në këtë rast është një domosdoshmëri e hekurt pasi nuk është e mundur të shkruhet një vlerë RGBA në shënimin heksadecimal. Prandaj, ne vendosëm rgba () pikërisht kështu:

Ngjyra: rgba (255, 255, 255, 0.5);

Ashtu si rgb (), tre vlerat e para janë përgjegjëse për kombinimin e së kuqes, jeshiles dhe blusë. Ata mund të marrin të dy vlerat e numrave të plotë në rangun 0-255 dhe përqindjet në intervalin nga 0 në 100%. Vlera e katërt përcakton shkallën e transparencës, duke filluar nga 0 (plotësisht transparente) në 1 (plotësisht opake).

Mund ta përdorni me siguri këtë teknikë kudo që vendosni zakonisht ngjyrat në CSS: për ngjyrat e sfondit dhe tekstit, për kufijtë, skicat, etj.

Mbështetja e shfletuesit

Shumica e shfletuesve modernë (Firefox, Safari, Opera, Google Chrome) mbështesin ngjyrat RGBA, por jo Internet Explorer.

Nuk ka mbetur gjë tjetër veçse të specifikohen ngjyrat RGBA për shfletuesit që i mbështesin dhe që pjesa tjetër të dalë me "patericat" e tyre.

Analizimi i CSS funksionon në shfletues në atë mënyrë që nëse ndeshet ndonjë vlerë e panjohur gjatë analizimit të rregullave, ajo do të injorohet. Le ta përdorim këtë njohuri për të dhënë ngjyrën e zakonshme të errët për shfletuesit "të pakuptueshëm". Për ta bërë këtë, mjafton të specifikoni ngjyrën në deklaratën e parë në format RGB, dhe e dyta vendos tonin e ngjyrës në format RGBA- për shfletuesit që mbështesin këtë model ngjyrash.

H1 (ngjyra: rgb (127, 127, 127); ngjyra: rgba (0, 0, 0, 0.5);)

Në rastet kur dëshironi të aplikoni transparencë në veçorinë e ngjyrës së sfondit, mund të përdorni një imazh PNG me një kanal alfa për të arritur të njëjtin efekt. Sigurisht, kjo është një mënyrë më e shtrenjtë, në ndryshim nga CSS "e pastër", pasi do t'ju duhet të krijoni PNG-në tuaj për çdo nivel transparence, por pa peshk dhe karavidhe.

Ne përdorim të njëjtin parim si në shembullin e mëparshëm: së pari vendosim sfondin për të gjithë shfletuesit dhe më pas rishkruajmë vargun me RGBA në mendje.

H1 (sfondi: url transparent (black50.png); sfondi: rgba (0, 0, 0, 0.5) asnjë;)

Duhet të theksohet se ky ndërtim funksionon sepse ne përdorim stenografinë e sfondit, i cili na lejon të vendosim njëkohësisht ngjyrën e sfondit dhe imazhin e sfondit. Shfletuesit që hasin një vlerë të panjohur rgba () do të injorojnë tërësisht rreshtin e dytë dhe do të përpunojnë deklaratën e parë.

Diçka tjetër

Avantazhi kryesor i RGBA është aftësia për të krijuar zgjidhje të ndryshme të projektimit pa përdorur vizatime. Përfitimi këtu nuk është vetëm në faqet më të lehta (si rezultat, më të shpejta), por edhe në fitimin në kohë: faqet që përdorin këtë teknologji janë më të lehta për t'u krijuar dhe mirëmbajtur. Të ndikuar nga Javascript ose në përgjigje të veprimeve të personalizuara, vlerat CSS mund të ndryshojnë lehtësisht. Shifrat në rastin tonë mund të komplikojnë transformime të tilla.

Div (ngjyra: rgba (255, 255, 255, 0.8); ngjyra e sfondit: rgba (142, 213, 87, 0.3);) div: rri pezull (ngjyra: rgba (255, 255, 255, 1); sfond- ngjyra: rgba (142, 213, 87, 0.6);)

Zbatimi i matur i transparencës në ngjyrat e kornizës do të ndihmojë që disa elementë në faqe të duken më organikë:

Div (ngjyra: rgb (0, 0, 0); ngjyra e sfondit: rgb (255, 255, 255); kufiri: 10 px solid rgba (255, 255, 255, 0.3);)

Së fundi

Siç ndodh shpesh, risitë e fundit CSS mbështeten nga shfletuesit kryesorë. Le të shpresojmë që djemtë nga Redmond të jenë të vetëdijshëm për diçka në jetë dhe t'i bashkohen shumicës.