Vlad Merzhevich

Athari ya uwazi ya kipengele inaonekana wazi katika picha ya usuli na imeenea katika mifumo tofauti ya uendeshaji kwa sababu inaonekana maridadi na nzuri. Katika muundo wa wavuti, uwazi pia hutumiwa na unapatikana kupitia sifa ya uwazi au umbizo la rangi la RGBA ambalo limewekwa kwa mandharinyuma.

Kizuizi cha gradient

Fanya kizuizi kilichoonyeshwa kwenye Mtini. 1. Kizuizi kina fremu ya upinde rangi inayoangaza yenye mandharinyuma ya upinde rangi chini ya kichwa na kielekezi kidogo. Mandharinyuma kwenye ukurasa yametolewa kwa uwazi tu wa athari ya uwazi, unaweza kuonyesha picha yako mwenyewe. Urefu wa chini kabisa wa block ni 100px.

Jinsi ya kufanya safu ya uwazi nusu?

Ili kubadilisha kiwango cha uwazi wa kipengele, tumia sifa ya mtindo wa opacity na thamani kutoka 0 hadi 1, ambapo 0 inalingana na uwazi kamili, na 1, kinyume chake, kwa uwazi wa kitu. Sifa hii haifanyi kazi katika Internet Explorer, kwa hivyo lazima utumie kichujio mahsusi kwa ajili yake, mali ambayo si sehemu ya vipimo vya CSS. Mfano wa 1 unaonyesha jinsi ya kuweka uwazi wa safu kwa vivinjari vyote.

Mandharinyuma angavu

Vlad Merzhevich

Uwazi wa sehemu, unapotumiwa kwa usahihi, unaonekana kuvutia sana katika muundo wa tovuti. Jambo kuu ni kwamba chini ya vitalu vya translucent hakuna muundo wa monochromatic, lakini ni katika kesi hii kwamba uwazi unaonekana. Athari hii inapatikana kwa njia nyingi, na ikiwa unakumbuka yote, ikiwa ni pamoja na mbinu za zamani, ni kutumia picha ya PNG kama mandharinyuma, kuunda picha ya checkered na mali ya uwazi. Lakini mara tu hitaji linapotokea la kutengeneza msingi wa uwazi kwenye kizuizi, njia hizi zina upande mbaya. Nitafanya mapitio mafupi ili kuweka wazi kile tunachozungumzia, na pia kwa wale wasomaji ambao hawajui na chaguzi zisizo za jadi za kuunda athari ya translucent.

Jinsi ya kuweka meza kuwa translucent, lakini baadhi ya seli si?

Ili kubadilisha uwazi wa kipengele, CSS3 hutoa mali ya opacity thamani yake inaweza kutofautiana kutoka 0 hadi 1. Zero inalingana na uwazi kamili wa kipengele, na moja, kinyume chake, opacity. Vivinjari vya kisasa hufanya kazi kwa usahihi kabisa na mali hii, isipokuwa kivinjari cha Internet Explorer, kwa hivyo lazima utumie mali maalum ya kichungi yenye thamani alpha(Opacity=X) , ambapo X inaweza kutofautiana kutoka 0 hadi 100.

Ili kuunda athari ya uwazi katika CSS, tumia mali uwazi.

IE8 na matoleo ya awali yanaunga mkono mali mbadala - filter:alpha(opacity=x) , ambapo " x " inaweza kuanzia 0 hadi 100 , kadiri thamani inavyopungua, ndivyo kipengele kitakavyokuwa wazi zaidi.

Vivinjari vingine vyote vinaunga mkono uwazi wa kawaida wa mali ya CSS, ambayo inaweza kuchukua nambari kutoka 0.0 hadi 1.0 kama thamani, thamani ya chini, kipengele kitakuwa wazi zaidi:

Jaribu »

Uwazi juu ya kuelea

Darasa la uwongo: hover hukuruhusu kubadilisha mwonekano wa vipengee unapoelekeza mshale wa panya juu yao. Tutatumia kipengele hiki kufanya picha ipoteze uwazi inapoelea juu:

Jaribu »

Uwazi wa usuli

Kuna njia mbili zinazowezekana za kufanya kipengele kwa uwazi: sifa ya uwazi iliyoelezwa hapo juu, na kubainisha rangi ya mandharinyuma katika umbizo la RGBA.

Huenda tayari unafahamu modeli ya uwakilishi wa rangi ya RGB. RGB (Nyekundu, Kijani, Bluu - nyekundu, kijani, bluu) ni mfumo wa rangi ambao huamua hue kwa kuchanganya nyekundu, kijani na bluu. Kwa mfano, kuweka rangi ya maandishi kuwa ya manjano, unaweza kutumia tamko lolote kati ya yafuatayo:

Rangi: rgb(255,255,0); rangi: rgb (100%,100%,0);

Rangi zilizobainishwa kwa kutumia RGB zitatofautiana na thamani za hexadecimal tulizotumia hapo awali kwa kuwa zinaruhusu matumizi ya chaneli ya uwazi ya alpha. Hii ina maana kwamba kupitia mandharinyuma ya kipengele kilicho na uwazi wa alpha, kile kilicho chini yake kitaonekana.

Kutangaza rangi ya RGBA ni sawa katika sintaksia kwa sheria za kawaida za RGB. Hata hivyo, tutahitaji pia kutangaza thamani kama RGBA (badala ya RGB) na kubainisha thamani ya ziada ya uwazi ya desimali baada ya thamani ya rangi kati ya 0.0 (uwazi kabisa) na 1 (isiyo wazi kabisa).

Rangi: rgba(255,255,0,0.5); rangi: rgba (100%,100%,0,0.5);

Tofauti kati ya sifa ya uwazi na mali ya RGBA ni kwamba sifa ya opacity inatumika uwazi kwa kipengele kizima, ikimaanisha kuwa maudhui yote ya kipengele huwa wazi. Na RGBA hukuruhusu kuweka uwazi kwa sehemu binafsi za kipengee (kwa mfano, maandishi au usuli tu):

Mwili ( picha ya usuli: url(img.jpg); ) .prim1 ( upana: 400px; ukingo: 30px 50px; rangi ya usuli: #ffffff; mpaka: 1px nyeusi thabiti; uzani wa fonti: herufi nzito; kutoweka: 0.5; kichujio : alpha(opacity=70); /*kwa IE8 na awali*/ panga maandishi: katikati; ; uzito wa fonti: panga maandishi kwa ujasiri; Jaribu »

Kumbuka: Thamani za RGBA hazitumiki katika IE8 na mapema. Ili kutangaza rangi mbadala kwa vivinjari vya zamani ambavyo havitumii thamani za rangi za alpha, unapaswa kubainisha kwanza kabla ya thamani ya RGBA: usuli: rgb(255,255,0); mandharinyuma: rgba(255,255,0,0.5);

Ili kudhibiti uwazi wa vipengele vya ukurasa, tumia kipengele cha uwazi cha CSS. Kwa mujibu wa vipimo, inatumika kwa aina yoyote ya node na inasaidiwa katika vivinjari vyote vya kisasa. Kwa msaada wake, unaweza kuunda muundo wa kuvutia au kutekeleza mwingiliano rahisi wa mwingiliano wa mtumiaji.

Thamani zinazowezekana

Syntax ya mali ya opacity katika css inaonekana kama hii:

Kiteuzi (kutoweka wazi: 1; ) kiteuzi (kutoweka wazi: 0; ) kiteuzi (usiowazi: 0.4; )

Ingizo hukubali thamani za nambari katika safu kutoka 0 hadi 1. Kigezo kinaweza kuwakilisha sehemu za kitengo, huku nukta ikitumika kama kitenganishi cha desimali katika CSS.

Kipengele chenye uwazi sifuri hakionekani, lakini bado kinaendelea kuchukua nafasi yake kwenye ukurasa na kubakisha uwezo wa kuingiliana na mtumiaji.

Ikiwa thamani ya mali si sifuri, basi uwazi halisi utahesabiwa kama asilimia ya kikomo cha juu zaidi. Katika hali ya kawaida, opacity: 1 huamua opacity kamili ya kipengele.

Uwazi wa nodi za watoto

Hata hivyo, ikiwa kipengele kina mzazi ambaye uwazi wake si mwingine, hesabu hubadilika. Kizazi hakiwezi kuwa "chini ya uwazi" kuliko mababu zake yoyote. Thamani ya sifa ya uwazi ya kizuizi cha mzazi ya CSS inakuwa kikomo cha juu cha uwazi wa nodi ya mtoto.

Mzazi (opacity: 0.7; ) mtoto (opacity: 1;)

Katika hali hii, kipengele cha mtoto kitakuwa wazi kwa 30%, ingawa thamani ya uwazi ni moja.

Mifano ya kutumia

Mfano 1: Uwazi. Inahitajika kwamba mandharinyuma kuu ya block ionekane chini ya kitu kinacholengwa.

Lengo ( mandharinyuma: nyeusi; uwazi: 0.5; )

Sio tu mandharinyuma ya kizuizi kinacholengwa kinakuwa wazi, lakini pia maandishi.

Mfano wa 2: Udhibiti wa uwazi unaobadilika. Thamani ya sifa ya uwazi ya CSS ya kizuizi lengwa hubadilika unapoelea juu yake.

Lengwa ( opacity: 0.2; ) .target:hover ( opacity: 1; )

Uwazi wenye nguvu

Mfano wa mwisho unaonyesha kuwa vipengele vya uwazi vinaendelea kujibu matukio ya ukurasa kama vile kuelea juu. Hii hukuruhusu kutumia javascript kudhibiti sifa ya uwazi ya CSS, na pia kutumia njia za mpito na uhuishaji ili kubadilisha kwa urahisi modi ya onyesho.

Ili kufikia uwazi kutoka kwa hati, unahitaji kufikia kipengee cha mtindo wa kipengele maalum.

// kupata thamani ya sasa ya uwazi var opacity = element.style.opacity; // kuweka kipengele kipya cha thamani.style.opacity = 0.4;

Kutoweka laini kwa kizuizi kunaweza kupatikana kwa kutumia mali ya mpito ya CSS:

Kipengele ( opacity: 0.1; mpito: opacity 1000ms; ) kipengele: hover ( opacity: 0.8; mpito: opacity 2000ms; )

Sasa nodi ya kipengee, inapozungushwa na panya, itabadilisha uwazi kutoka 10 hadi 80% ndani ya sekunde moja, na wakati mshale unapoondoka, itapunguza thamani yake ya awali ndani ya sekunde mbili.

Sifa ya uwazi ya CSS pamoja na utaratibu wa mpito hukuruhusu kuunda athari nzuri.

Alpha channel badala ya opacity

Ujanja kuu wa utaratibu wa opacity katika CSS:

• athari yake inaenea sio tu kwa historia ya kuzuia, lakini pia kwa maudhui yake ya maandishi, ambayo ni vyema kushoto wazi;
• vipengele vya mtoto haviwezi kuwa na uwazi kidogo kuliko vipengele vya wazazi wao.

Ikiwa athari hizi zinatatiza maisha ya mbuni wa mpangilio, badala ya uwazi, unapaswa kutumia mandharinyuma rahisi yenye uwazi, inayofafanua thamani yake katika umbizo la RGBA au HSLA.

pseudo-class:target huchagua kipengele katika hati iliyoelekezwa na kipande cha URL. Kwa mfano, kipande hiki cha maandishi kimefungwa kwa kipengele na kitambulisho #lengwa-jaribio . Ukifuata kiungo, kipengele hicho kitalengwa na pseudo-class:target mitindo itaanza kutumika.

Mwaka jana niliandika kuhusu:target pseudo-class katika makala 5 Viteuzi vya CSS Visivyotumika (Na Jinsi ya Kuvitumia) . Mfano wa kwanza ulikuwa ukitumia pseudo-class:target kuangazia sehemu ya ukurasa ambayo iliangaziwa. Hii inaweza kuwa, kwa mfano, kuongeza rangi ya usuli au mpaka, kama katika mfano na .

Lakini hivi majuzi nilifikia hitimisho kwamba tunaweza kutumia:target pseudo-class kwa manufaa zaidi kwa kuunda vipengele shirikishi kwenye ukurasa bila JavaScript.

Mfano #1: Kuficha na Kuonyesha Maudhui

Mfano rahisi wa kutumia:target pseudo-class itakuwa kuficha na kuonyesha maudhui tunayolenga. Katika blogu, tunaweza hivyo kuonyesha sehemu ya maoni baada ya mtumiaji kubofya. Hii inafanywa kwa kuficha kipengee hadi kiko chini ya:target .

Onyesha Maoni #comments:not(:target) ( display: none; ) #comments:target ( display: block; )

Mfano #2: Urambazaji wa kuvuta nje

Mfano unaofuata ni kuunda upau wa kusogeza wa kuteleza. Tunaweka upau wa kusogeza uliowekwa kulingana na upeo ili kuhakikisha kuwa hakuna kuruka baada ya mtumiaji kubofya.

#nav ( nafasi: isiyobadilika; juu: 0; urefu: 100%; upana: 80%; upana wa juu: 400px; ) #nav:si(:lengwa) ( kulia: -100%; mpito: kulia 1.5s; ) #nav:lengo ( kulia: 0; mpito: sekunde 1 kulia; )

Mfano #3: Dirisha ibukizi la modal

Kuchukua wazo hili zaidi, tunaweza kuunda dirisha la modal ambalo linajaza ukurasa mzima.

#chombo-ya-modal (nafasi: isiyobadilika; juu: 0; kushoto: 0; upana: 100%; urefu: 100%; usuli: rgba(0,0,0,0.8); onyesho: flex; thibitisha-yaliyomo: katikati; pangilia-vipengee: katikati; ) .modali ( upana: 70%; usuli: #fff; pedi: 20px; panga maandishi: katikati; ) #chombo-cha-modal:si(:lengwa) ( uwazi: 0; mwonekano: umefichwa; mpito: opacity 1s, mwonekano 1s ) #chombo cha modal:lengo ( uwazi: 1; mwonekano: unaoonekana; mpito: uangavu wa 1, mwonekano 1s; )

Mfano #4: Kubadilisha Mitindo ya Ulimwenguni

Mfano wa mwisho hauwezi kuitwa sahihi katika suala la semantiki ni matumizi ya pseudo-class:target kwa kipengele ikifuatiwa na kubadilisha mitindo au mpangilio wa ukurasa.

#body:not(:target) ( kuu ( upana: 60%; ) kando ( upana: 30%; ) .show-sidebar-link ( display: none; ) ) #body:target ( kuu ( upana: 100%; ) kando ( onyesha: hakuna; ) .hide-sidebar-link ( display: none; ) )

Vipi kuhusu semantiki na ufikiaji?

Kama nilivyosema tayari katika kifungu "Viungo au vifungo", wakati wa kutumia kipengee kivinjari kinasubiri kuhamia ukurasa mwingine au sehemu nyingine ya ukurasa. Katika mifano yangu (isipokuwa ya mwisho) hii ndio hasa hufanyika. Ujanja pekee ni kwamba katika hali ya kawaida kipengele cha mtindo kimefichwa, kitaonekana kwa nguvu tu katika hali inayolengwa.