Cum se creează un UI de comutare utilizând masca CSS

În procesarea imaginilor, mascare este o tehnică care vă permite să ascunde o imagine cu altul. O mască este utilizată pentru a face o porțiune a unei imagini a vedea printre. Puteți efectua mascarea utilizând CSS cu ajutorul proprietăților de mascare.

În postarea de astăzi vom crea o imagine mascată utilizând două imagini PNG și tehnici de mascare CSS și vom permite utilizatorilor să gestioneze cele două stări ale imaginii (zi și noapte) cu ajutorul unui interfață UI.

Din cauza unor probleme legate de compatibilitatea browserului - nu toate suporturile de mascare sunt acceptate în fiecare browser (din iunie 2016) - voi arăta două tehnici pentru adăugarea de măști, unul pentru browsere bazate pe Webkit și unul pentru Firefox. Primii doi pași din acest tutorial în trei pași sunt aceiași pentru fiecare browser, dar va exista o diferență în al treilea pas.

Pasul 1. Creați un comutator de bază

Întrucât un întrerupător tipic are două stări unul singur activat la un moment dat, puteți utiliza a butonul radio de două pentru a crea componentele de lucru ale comutatorului. Puneți fiecare buton radio de la capetele stânga și dreaptă ale elementului părinte.

Grupurile de butoane radio sunt create prin acordarea fiecărui buton radio la fel Nume atribut. Într-un grup de butoane radio, doar un buton radio pot fi verificate la un moment dat.

Începem cu următoarele coduri HTML și CSS:

HTML

CSS

În CSS de mai jos, am folosit poziția absolută pentru a plasa butoanele radio pe ecran exact unde vreau.

#outerWrapper width: 450px; înălțime: 90px; padding: 10px; marja: 100px auto 0 auto; raza de graniță: 55px; box-shadow: 0 0 10px 6px #EAEBED; fundal: #fff;  #innerWrapper înălțime: 100%; border-radius: 45px; overflow: ascuns; Poziția: relativă;  .radio width: 90px; înălțime: 100%; Poziția: absolută; margin: 0; opacitate: 0;  #rightRadio dreapta: 0;  .radio: nu (: verificat) cursor: pointer;

Am adăugat opacitate: 0 conduce la .radio clasa pentru a ascunde butoanele radio. Ultima regulă din blocul de cod de mai jos, cursor: pointer; arată cursorul cursorului pentru butonul radio necontrolat, astfel încât utilizatorii să știe ce buton să facă clic pentru a comuta starea comutatorului.

Captură de ecran a interfeței UI cu butoane radio din browserul Chrome

Pasul 2. Adăugați Skins la comutator

În acest pas, vom adăuga două

tag-uri pentru cele două skin-uri sub butoanele radio din fișierul nostru HTML și o imagine de fundal pentru fiecare piele din CSS.

Folosesc "Ziua" și "Noaptea" ca cele două stări ale comutatorului, inspirat de o împușcare Dribbble de către Minh Killy Le.

HTML

CSS

# daySkin fundal-imagine: url ('day.png');  #nightSkin fundal-imagine: url ('night.png'); . piele (lățime: 100%; înălțime: 100%; pointer-events: nici unul; poziția: absolută; marja: 0;

pointer-events: nici unul; regula este adăugată la piei, astfel încât evenimentele de clic pe comutator pot trece prin ele, și ajungeți la butoanele radio.

Cu proprietatea CSS a pointer-events puteți seta circumstanțele în care poate fi un element grafic vizate de evenimentele mouse-ului.

Ca o alternativă pentru codul de mai sus, două (cu imagini sursă) în interiorul

tag-urile pot funcționa, de asemenea. Ei vor fi piei pentru cele două stări de comutare.

Captură de ecran a comutării cu skinuri în crom

Pasul 3a. Adăugați masca (versiunea Webkit)

Pentru Chrome și alte browsere bazate pe Webkit, voi folosi masca-imagine Proprietatea CSS, care - la scrierea acestui post - funcționează doar cu -WebKit prefix în browserele Webkit. masca-imagine proprietate vă permite specificați imaginea a fi folosit dupa cum masca.

În general, există două tipuri de mascare: luminanță și alfa.

În mascarea luminanței, porțiunea întunecată a imaginii mască ascunde imaginea pe care o maschează: o porțiune mai întunecată este în imaginea mască, cu atât este mai ascunsă porțiunea în imaginea care este mascată.
În alfa masca, porțiunea transparentă a imaginii mască ascunde imaginea pe care o maschează: cu cât o porțiune mai transparentă este în imaginea mască, cu atât este mai ascunsă o porțiune din imagine care este mascată.

În Chrome (din versiunea 51.0.2704.103, Win10), numai alfa pare să funcționeze în prezent.

În CSS, alfa și luminanță sunt valorile Tip mască proprietate.

Aici este CSS-ul adaugă o mască la imaginile de fundal în browserele Webkit:

CSS

#nightSkin fundal-imagine: url ('night.png'); mască de tip: alfa; / * cerc transparent cu porțiunea rămasă opacă * / -webkit-mască-imagine: radial-gradient (cerc la 45px 45px, rgba (0,0,0,1) 45px, rgba (0,0,0,1) 45px) ;  / * Când pielea de zi selectată * / #leftRadio: verificat ~ # nightSkin mask-type: alpha; / * cerc opac cu porțiunea rămasă transparentă * / -webkit-mască-imagine: radial-gradient (cerc la 405px 45px, rgba (0,0,0,1) 45px, rgba (0,0,0,0 45px) ;

Am folosit -webkit-masca-imagine proprietăți pentru a crea imaginea inițială a măștii. Valoarea sa utilizează radial gradient () Funcția CSS utilizată pentru a crea o imagine dintr-o formă predefinită, un gradient radial și centrul gradientului.

Pentru pielea de noapte, am creat un cerc transparent și am făcut partea rămasă a recipientului opacă. Pentru pielea zilei, am făcut contrariul: am creat un cerc opac cu radial gradient () funcția și a făcut porțiunea rămasă transparentă.

Deși nu este încă acceptată în browserele Webkit, am adăugat Tip mască proprietate către CSS pentru referințe ulterioare.

Captură de ecran a comutării cu skinul de noapte selectat

Captură de ecran a comutării cu skinul zilei selectat

După cum puteți vedea mai sus, granița cercului nu este foarte netedă. La ascundeți muchiile aspre, adauga o

după piei în formă de cerc (aceeași dimensiune cu cercul de mască) cu o umbra cutie. Umbra va ascunde marginile aspre ale măștii de cerc.

HTML

CSS

#switchBtnOutline width: 90px; înălțime: 100%; border-radius: 45px; box-shadow: 0 0 2px 2px gri inset, 0 0 10px gri; pointer-evenimente: nici una; Poziția: absolută; margin: 0;  / * Locați #switchBtnOutline la sfârșitul drept atunci când este selectată pielea zilei * / #leftRadio: checked ~ # switchBtnOutline dreapta: 0;

Captură de ecran a comutării cu margini groase ale cercului de mască ascunsă

Etapa 3b. Adăugați masca (versiunea Firefox)

masca-imagine Proprietatea CSS este de fapt a lunghand proprietate, și face parte din proprietatea stenografică masca care vă permite să specificați imaginea care va fi utilizată și ca o mască. In timp ce masca-imagine nu este încă acceptată în Firefox, masca este.

desi masca proprietatea ar trebui să accepte o imagine creată cu radial gradient () Funcția CSS este o valoare, la fel ca și masca-imagine proprietatea a făcut, nu există niciun suport pentru asta în Firefox încă.

Deci, în loc de a radial gradient () imagine, să folosim o imagine SVG ca imagine mască cu tipul de mască luminanță.

Imaginea SVG de mai sus arata ca o combinatie de a dreptunghi alb și a negru cerc. Adăugați acest lucru și altul cu un dreptunghi negru și a cerc alb ca mască la HTML-ul folosit în versiunea Webkit.

Imaginea SVG (dreptunghi alb și cerc negru pentru mască)

HTML

Înlocuiți (sau combinați) codul CSS pentru #nightSkin am folosit în versiunea Webkit cu următorul cod. Și ați terminat.

Acum avem două imagini masc diferite (gradient CSS & SVG), două tipuri de mască diferite (Alpha & Luminance) și atât suport Webkit cât și Firefox.

CSS

#nightSkin fundal-imagine: url ('night.png'); mască de tip: luminanță; masca: url (#leftSwitchMask);  #leftRadio: verificat ~ # nightSkin mask-type: luminance; masca: url (#rightSwitchMask);

Verificați Demo-ul

Demo
Descărcați sursa

Cum se creează un punct de restaurare a sistemului în Windows 7

Cum se creează manual un punct de restaurare a sistemului în XP

Cum de a crea o parolă puternică (și amintiți-o)