Kā izveidot slēdzi UI, izmantojot CSS maska

Attēlu apstrādē, maskēšana ir tehnika, kas ļauj jums slēpt attēlu ar citu. Maska tiek izmantota, lai izveidotu daļu attēla redzēt cauri. Jūs varat veikt maskēšanu, izmantojot CSS, izmantojot maskēšanas īpašības.

Šodienas amatā mēs izveidosim maskētu attēlu, izmantojot divus PNG attēlus un CSS maskēšanas paņēmienus, un ļauj lietotājiem rīkoties ar diviem attēla stāvokļiem (dienā un naktī) ar slēdzi UI.

Dažu pārlūkprogrammu saderības problēmu dēļ - ne visas maskēšanas īpašības tiek atbalstītas katrā pārlūkprogrammā (no 2016. gada jūnija) - es rādīšu divas metodes masku pievienošanai, viena pārlūkprogrammām, kas balstītas uz Webkit, un viena pārlūkprogrammai Firefox. Divi pirmie soļi šajā trīs posmu apmācībā ir vienādi katrai pārlūkprogrammai, bet trešajā solī būs atšķirība.

1. solis. Izveidojiet pamata slēdzi

Tā kā tipiskajam slēdzim ir divas valstis ar tikai viens iespējota vienlaicīgi var izmantot a radio pogu grupa no diviem lai izveidotu slēdža darba komponentus. Novietojiet katru radiopogu vecāku elementa kreisajā un labajā pusē.

Radio pogu grupas tiek izveidotas, piešķirot katrai radiopogu vienai nosaukums atribūts. Radio pogas grupā, tikai viena radio poga var pārbaudīt vienlaicīgi.

Mēs sākam ar šādu HTML un CSS:

HTML

CSS

Zemāk redzamajā CSS es izmantoju absolūtu pozicionēšanu, lai novietotu radio pogas ekrānā tieši tur, kur es vēlos.

#outerWrapper platums: 450px; augstums: 90px; polsterējums: 10px; starpība: 100px auto 0 auto; robežu rādiuss: 55px; kastes ēna: 0 0 10px 6px #EAEBED; fons: #fff;  #innerWrapper augstums: 100%; robežu rādiuss: 45px; pārplūde: slēpta; pozīcija: relatīvais;  .radio platums: 90px; augstums: 100%; pozīcija: absolūta; starpība: 0; dūmainība: 0;  #rightRadio right: 0;  .radio: nav (: pārbaudīts) kursors: rādītājs;  

Es pievienoju dūmainība: 0 noteikums .radio klasē slēpt radio pogas. Pēdējais noteikums zemāk esošajā koda blokā, kursors: rādītājs; rāda rādītāja kursoru nepārbaudītajai radio pogai, lai lietotāji zinātu, kuru pogu noklikšķināt, lai pārslēgtu slēdža stāvokli.

2. solim pievienojiet slēdžus

Šajā solī mēs pievienosim divus

tagi divām ādām, kas atrodas zem mūsu HTML faila radio pogām, un fona attēls katrai ādai mūsu CSS.

Es izmantoju "Dienu" un "Nakts" kā abas slēdža valstis, iedvesmojoties no Minh Killy Le.

HTML

CSS

#daySkin fona attēls: url ('day.png');  #nightSkin fona attēls: url ('night.png');  .skin platums: 100%; augstums: 100%; rādītāju notikumi: nav; pozīcija: absolūta; starpība: 0; 

The rādītāju notikumi: nav; noteikums tiek pievienots ādām, lai spiežot notikumus uz slēdža caur tiem, un sasniegtu radio pogas.

Ar rādītāju notikumu CSS īpašību var iestatīt apstākļus, kādos var būt grafiskais elements mērķtiecīgi ar peles notikumiem.

Kā alternatīvu iepriekš minētajam kodam divas tagi (ar avota attēliem)

tagi var strādāt arī. Tie būs divu slēdžu stāvokļu ādas.

3.a solis. Pievienot maska ​​(Webkit versija)

Chrome un citām Webkit pārlūkprogrammām es izmantosim maskas attēls CSS īpašums, kas, rakstot šo amatu, darbojas tikai ar -webkit prefikss Webkit pārlūkprogrammās. The maskas attēls īpašums ļauj jums norādiet attēlu jāizmanto kā maska.

Kopumā ir divu veidu maskēšana: spilgtums un alfa.

• In spilgtuma maskēšana, maskas attēla tumšā daļa slēpj attēlu, ko tā maskē: tumšāka daļa ir maskas attēlā, jo vairāk paslēpta šī daļa attēlā, kas tiek maskēts.
• In alfa maskēšana, maskas attēla caurspīdīgā daļa slēpj attēlu, ko tā maskē: jo vairāk pārredzama daļa ir maskas attēlā, jo vairāk paslēpta šī daļa ir maskētajā attēlā.

Chrome (kā no versijas 51.0.2704.103, Win10) šobrīd darbojas tikai alfa.

CSS, alfa un spilgtums ir vērtības maska ​​tipa īpašums.

Šeit ir CSS pievieno masku fona attēliem Webkit pārlūkprogrammās:

CSS

#nightSkin fona attēls: url ('night.png'); maska ​​tips: alfa; / * caurspīdīgs aplis ar atlikušo daļu necaurspīdīgs * / -webkit-mask-image: radiālais gradients (aplis 45px 45px, rgba (0,0,0,0) 45px, rgba (0,0,0,1) 45px) ;  / * Ja izvēlēta dienas āda * / #leftRadio: pārbaudīta ~ # nightSkin mask-type: alfa; / * necaurspīdīgs aplis ar atlikušo daļu caurspīdīgs * / -webkit-mask-image: radiālais gradients (aplis pie 405px 45px, rgba (0,0,0,1) 45px, rgba (0,0,0,0) 45px) ; 

Es izmantoju -webkit-mask-image īpašums, lai izveidotu sākotnējo maskas attēlu. Tās vērtība izmanto radiālais slīpums () CSS funkcija, ko izmanto, lai izveidotu attēlu no iepriekš noteiktas formas, radiālā gradienta un slīpuma centra.

Nakts ādai es izveidoju caurspīdīgu apli, un atlikušo konteinera daļu padarīju nepārredzamu. Dienas ādai es darīju pretējo: izveidoju necaurspīdīgu apli ar radiālais slīpums () funkciju un padarīja atlikušo daļu pārredzamu.

Lai gan tas vēl nav atbalstīts Webkit pārlūkprogrammās, es pievienoju maska ​​tipa īpašumu CSS turpmākai izmantošanai.

Kā redzams iepriekš, apļa robeža nav ļoti gluda. Uz slēpt aptuvenas malas, pievienot a

pēc apļa formas apli (tāds pats izmērs kā maskas lokam) ar kastes ēnu. Ēna paslēpj apļa maska ​​neapstrādātās malas.

HTML

CSS

#switchBtnOutline platums: 90px; augstums: 100%; robežu rādiuss: 45px; box-shadow: 0 0 2px pelēks ieliktnis, 0 0 10px pelēks; rādītāju notikumi: nav; pozīcija: absolūta; starpība: 0;  / * Vieta #switchBtnOutline labajā pusē, kad ir izvēlēta dienas āda * / #leftRadio: pārbaudīta ~ # switchBtnOutline right: 0; 

3.b solis. Pievienot maska ​​(Firefox versija)

The maskas attēls CSS īpašums faktiski ir a longhand īpašums, un tas ir daļa no stenogrāfijas īpašuma maska kas ļauj norādīt arī attēlu, kas tiks izmantots arī kā maska. Kamēr maskas attēls Firefox vēl nav atbalstīts, maska ir.

Lai gan maska īpašumam jāpieņem attēls, kas izveidots ar radiālais slīpums () CSS darbojas kā vērtība, tāpat kā maskas attēls īpašums darīja, Firefox vēl neatbalsta to.

Tātad, nevis a radiālais slīpums () izmantojiet SVG attēlu kā maskas attēlu ar maskas veidu spilgtums.

Iepriekš redzamais SVG attēls izskatās kā a balts taisnstūris un a melns aplis. Pievienot šo un vēl vienu ar a melns taisnstūris un a balts aplis kā maskas uz HTML, ko mēs izmantojām Webkit versijā.

HTML

Nomainiet (vai apvienojiet) CSS kodu #nightSkin mēs izmantojām Webkit versijā ar šādu kodu. Un jūs esat pabeidzis.

Tagad mums ir divi dažādi maskas attēli (CSS gradients un SVG), divi dažādi maska ​​veidi (Alpha & Luminance), kā arī Webkit un Firefox atbalsts.

CSS

#nightSkin fona attēls: url ('night.png'); maskas tips: spilgtums; maska: url (#leftSwitchMask);  #leftRadio: pārbaudīts ~ # nightSkin maskas tips: spilgtums; maska: url (#rightSwitchMask); 

Pārbaudiet demo

• Demo
• Lejupielādēt avotu

Kā izveidot sistēmas atjaunošanas punktu sistēmā Windows 7

Kā izveidot sistēmas atjaunošanas punktu manuāli XP

Kā izveidot spēcīgu paroli (un atcerieties to)