Kako ustvariti stikalo UI s pomočjo CSS maske
V obdelavi slik, maskiranje je tehnika, ki vam omogoča skrij sliko z drugim. Za izdelavo dela slike se uporablja maska videti skozi. Masiranje lahko izvajate s pomočjo CSS s pomočjo maskirnih lastnosti.
V današnji objavi bomo ustvarili maskirano sliko z uporabo dveh slik PNG in tehnik maskiranja CSS ter uporabnikom omogočili rokovanje z dvema stanjima slike (dan in noč) s pomočjo stikala UI.
Zaradi nekaterih težav z združljivostjo brskalnikov - vse lastnosti zakrivanja niso podprte v vsakem brskalniku (od junija 2016) - prikazal bom dve tehniki za dodajanje mask, eno za brskalnike, ki temeljijo na Webkitu, in eno za Firefox. Prva dva koraka v trem korakih so enaka za vsak brskalnik, vendar se bo razlika v tretjem koraku razlikovala.
1. Ustvarite osnovno stikalo
Ker tipično stikalo ima dve državi z samo en omogočeno lahko uporabite a skupina z dvema izbirnima gumboma ustvariti delovne komponente stikala. Vsak izbirni gumb postavite na levo in desno stran matičnega elementa.
Skupine radijskih gumbov ustvarite tako, da vsak izbirni gumb enako ime atribut. V skupini radijskih gumbov, samo en izbirni gumb lahko preverite naenkrat.
Začnemo z naslednjim HTML in CSS:
HTML
CSS
V spodnjem CSS-u sem uporabil absolutno pozicioniranje, da bi radijske gumbe na zaslonu natančno določil tam, kjer želim.
#outerWrapper širina: 450px; višina: 90px; oblazinjenje: 10px; margin: 100px auto 0 auto; obrobni polmer: 55px; polje-senca: 0 0 10px 6px #EAEBED; ozadje: #fff; #innerWrapper višina: 100%; obrobni polmer: 45px; overflow: hidden; položaj: relativna; .radio širina: 90px; višina: 100%; položaj: absolutno; margin: 0; motnost: 0; #rightRadio desno: 0; : .radio: ne (: označeno) kazalec: kazalec;
Dodal sem motnost: 0 pravilo .radio razredu skrij izbirne gumbe. Zadnje pravilo v kodnem bloku spodaj, kazalec: kazalec; prikaže kazalec kazalca za brezkontaktni izbirni gumb, tako da bodo uporabniki vedeli, kateri gumb kliknite, da preklopite stanje stikala.
Korak 2. Dodajte Skins na stikalo
V tem koraku bomo dodali dva Uporabljam "Dan" in "Noč" kot dve steni stikala, ki ju je navdihnil Dribbble Minh Killy Le. HTML CSS The Z lastnostmi CSS pointer-events lahko nastavite okoliščine, v katerih je lahko grafični element dogodkov z miško. Kot alternativo za zgornjo kodo, dve Za Chrome in druge brskalnike, ki temeljijo na Webkitu, bom uporabil Na splošno obstajata dve vrsti maskiranja: svetilnost in alfa. V Chromu (od različice 51.0.2704.103, Win10) trenutno deluje le alfa. V CSS, Tu je CSS doda masko za ozadje v brskalnikih Webkit: CSS Uporabil sem Za nočno kožo sem ustvaril prozoren krog in preostali del posode naredil neprozoren. Za dnevno kožo sem naredil nasprotno: ustvaril sem neprosojni krog z Čeprav še ni podprt v brskalnikih Webkit, sem dodal Kot lahko vidite zgoraj, meja kroga ni zelo gladka. Za skrij grobe robove, dodajte a HTML CSS The Čeprav Torej, namesto a Zgornja slika SVG izgleda kot kombinacija a bel pravokotnik in a črni krog. Dodajte to in še eno z a črni pravokotnik in a bel krog kot maske za HTML, ki smo ga uporabili v različici Webkit. HTML Zamenjajte (ali združite z) kodo CSS za Zdaj imamo dve različni sliki maske (CSS gradient in SVG), dve različni vrsti maske (Alpha & Luminance) ter podporo za Webkit in Firefox.. CSS
#daySkin background-image: url ('day.png'); #nightSkin background-image: url ('night.png'); .skin širina: 100%; višina: 100%; kazalci dogodkov: nič; položaj: absolutno; margin: 0; kazalci dogodkov: nič; Pravilo se doda v preobleke, tako da lahko dogodki klikanja na stikalu skozi njih, in do radijskih gumbov.
Korak 3a. Dodaj masko (različica Webkit)
maska-slika Lastnost CSS, ki - kot pri pisanju te objave - deluje samo z -webkit v brskalnikih Webkit. The maska-slika nepremičnina vam omogoča določite sliko biti uporabljeno kot masko.alfa in svetilnost so vrednosti tip maske nepremičnine.#nightSkin background-image: url ('night.png'); tip maske: alfa; / * pregleden krog z preostalim neprosojnim delom * / -webkit-mask-slika: radialni gradient (krog pri 45px 45px, rgba (0,0,0,0) 45px, rgba (0,0,0,1) 45px) ; / * Ko je dan izbran kožo * / #leftRadio: preverjeno ~ # nightSkin tip maske: alfa; / * neprozoren krog s preostalim delom transparentno * / -webkit-mask-slika: radialni gradient (krog pri 405px 45px, rgba (0,0,0,1) 45px, rgba (0,0,0,0) 45px) ; -webkit-mask-slika lastnost, da ustvarite začetno sliko maske. Njegova vrednost uporablja radialni gradient () Funkcija CSS, ki se uporablja za ustvarjanje slike iz vnaprej določene oblike, radialnega gradienta in središča preliva.radialni gradient () in je preostali del postal pregleden.tip maske za CSS za poznejšo uporabo.
#switchBtnOutline width: 90px; višina: 100%; obrobni polmer: 45px; box-shadow: 0 0 2px 2px siv vložek, 0 0 10px siv; kazalci dogodkov: nič; položaj: absolutno; margin: 0; / * Postavite #switchBtnOutline na desni konec, ko je izbrana koža dneva * / #leftRadio: označeno ~ # switchBtnOutline desno: 0;
Korak 3b. Dodaj masko (različica Firefoxa)
maska-slika Lastnost CSS je pravzaprav a lastnina dolgih rok, in je del stenografskega premoženja masko ki vam omogoča, da določite sliko, ki bo uporabljena tudi kot maska. Medtem maska-slika Firefox še ni podprt, masko je.masko lastnost mora sprejeti sliko, ustvarjeno z radialni gradient () CSS deluje kot vrednost, tako kot maska-slika lastnost ni, za Firefox še ni podpore.radialni gradient () Uporabimo sliko SVG kot sliko maske z vrsto maske svetilnost.
#nightSkin v različici Webkit smo uporabili naslednjo kodo. In končali ste.#nightSkin background-image: url ('night.png'); tip maske: svetilnost; maska: url (#leftSwitchMask); #leftRadio: preverjeno ~ # nightSkin tip maske: svetilnost; maska: url (#rightSwitchMask); Oglejte si predstavitev
