Kaip sukurti jungiklio sąsają naudojant CSS kaukę
Vaizdo apdorojimo srityje, maskavimas yra technika, kuri leidžia jums slėpti vaizdą su kitu. Kaukė naudojama vaizdui sukurti permatyti. Galite užmaskuoti naudojant CSS naudodami maskavimo savybes.
Šiandieniniame pranešime sukursime užmaskuotą vaizdą naudodami du PNG vaizdus ir CSS maskavimo metodus ir leisime naudotojams tvarkyti dvi vaizdų būsenas (dieną ir naktis) su jungiklio UI pagalba.
Dėl kai kurių naršyklės suderinamumo problemų - ne visos maskavimo savybės yra palaikomos kiekvienoje naršyklėje (nuo 2016 m. Birželio mėn.) du būdai, kaip įtraukti kaukes, viena naršyklėms „Webkit“ ir viena „Firefox“. Du pirmieji žingsniai šiame trijų pakopų mokymuose yra tokie patys kiekvienai naršyklei, tačiau trečiame etape bus skirtumas.
1 žingsnis. Sukurkite pagrindinį jungiklį
Kadangi tipinis jungiklis turi dvi būsenas su tik vienas įjungtas vienu metu galite naudoti a radijo mygtukų grupė iš dviejų sukurti jungiklio darbo komponentus. Įdėkite kiekvieną radijo mygtuką į savo pagrindinio elemento kairįjį ir dešinįjį galus.
Radijo mygtukų grupės sukuriamos kiekvienam radijo mygtukui vardas atributas. Radijo mygtukų grupėje, tik vienas radijo mygtukas galima patikrinti vienu metu.
Pradedame nuo šių HTML ir CSS:
HTML
CSS
Toliau pateiktame CSS aš naudoju absoliučią poziciją, kad radijo mygtukai būtų rodomi ekrane tiksliai ten, kur noriu.
#outerWrapper plotis: 450px; aukštis: 90px; paminkštinimas: 10px; paraštė: 100px auto 0 auto; pasienio spindulys: 55px; dėžutės šešėlis: 0 0 10px 6px #EAEBED; fonas: #fff; #innerWrapper aukštis: 100%; pasienio spindulys: 45px; perteklius paslėptas; pozicija: santykinis; .radio plotis: 90px; aukštis: 100%; pozicija: absoliutus; marža: 0; neskaidrumas: 0; #rightRadio right: 0; .radio: ne (: patikrinta) žymeklis: žymeklis;
Aš pridėjau neskaidrumas: 0 taisyklė .radijo klasė paslėpti radijo mygtukus. Paskutinė taisyklė žemiau esančiame kodų bloke, žymeklis: žymeklis; rodo žymeklio žymeklį nepažymintam radijo mygtukui, kad naudotojai žinotų, kurį mygtuką spustelėkite, jei norite perjungti jungiklio būseną.
2 žingsnis. Įjunkite skynelius prie jungiklio
Šiame etape pridėsime du Aš naudoju „Diena“ ir „Naktis“ kaip dvi jungiklio būsenos, įkvėptos „Dribbble“, kurį įkėlė Minh Killy Le. HTML CSS The Su rodyklių įvykių CSS savybe galite nustatyti aplinkybes, kuriomis gali būti grafinis elementas nukreiptas į pelės įvykius. Kaip alternatyvą pirmiau nurodytam kodui, du „Chrome“ ir kitoms „Webkit“ naršyklėms naudosiu Apskritai yra dviejų tipų maskavimas: šviesumas ir alfa. „Chrome“ (kaip versija 51.0.2704.103, Win10) šiuo metu veikia tik alfa. CSS, Čia yra CSS prideda kaukę į „Webkit“ naršyklių foninius vaizdus: CSS Aš naudoju Nakties odai sukūriau skaidrią apskritimą, o likusią konteinerio dalį padariau nepermatomą. Dienos odai, aš padariau priešingą: sukūrė nepermatomas ratas su Nors „Webkit“ naršyklėse ji dar nepalaikoma, pridėjau Kaip matote aukščiau, apskritimo riba nėra labai lygi. Į paslėpti šiurkščius kraštus, Pridėti HTML CSS The nors Taigi, vietoj a Viršuje esantis SVG vaizdas atrodo kaip a baltas stačiakampis ir a juodas apskritimas. Pridėti šį ir kitą su a juodas stačiakampis ir a baltas apskritimas kaip kaukės prie HTML, kurį naudojome „Webkit“ versijoje. HTML Pakeiskite (arba sujunkite) CSS kodą Dabar turime du skirtingus kaukės vaizdus (CSS gradientas ir SVG), du skirtingus kaukių tipus („Alpha & Luminance“) ir „Webkit“ ir „Firefox“ palaikymą. CSS
#daySkin background-image: url ('day.png'); #nightSkin background-image: url ('night.png'); .skin plotis: 100%; aukštis: 100%; rodyklių įvykiai: nėra; pozicija: absoliutus; marža: 0; rodyklių įvykiai: nėra; taisyklė pridedama prie odos, kad paspaudimų įvykiai persijungtų per juos, ir pasiekti radijo mygtukus.
3a žingsnis. Pridėti kaukę (Webkit versija)
kaukė CSS nuosavybė, kuri, rašydama šį pranešimą, veikia tik su -žiniatinklio rinkinys „Webkit“ naršyklėse. The kaukė nuosavybė leidžia jums nurodykite vaizdą bus panaudotas kaip kaukė.alfa ir šviesumas yra vertybės kaukės tipas nuosavybė.#nightSkin background-image: url ('night.png'); kaukės tipas: alfa; / * skaidrus ratas su likusi dalimi nepermatomas * / -webkit-mask-image: radialinis gradientas (apskritimas 45px 45px, rgba (0,0,0,0) 45px, rgba (0,0,0,1) 45px) ; / * Kai pasirinkta dienos oda * / #leftRadio: pažymėta ~ # nightSkin mask-type: alfa; / * nepermatomas ratas su likusia dalimi * / -webkit-mask-image: radialinis gradientas (apskritimas esant 405px 45px, rgba (0,0,0,1) 45px, rgba (0,0,0,0) 45px) ; -webkit-mask-image nuosavybės, kad būtų sukurtas pradinis kaukės vaizdas. Jo vertė naudojama radialinis gradientas () CSS funkcija, naudojama vaizdui sukurti iš iš anksto nustatytos formos, radialinio gradiento ir gradiento centro.radialinis gradientas () funkciją, ir likusi dalis buvo skaidri.kaukės tipas turtą CSS ateityje.
#switchBtnOutline plotis: 90px; aukštis: 100%; pasienio spindulys: 45px; dėžutės šešėlis: 0 0 2px 2px pilkas įdėklas, 0 0 10px pilkas; rodyklių įvykiai: nėra; pozicija: absoliutus; marža: 0; / * Vieta #switchBtnOutline dešinėje pusėje, kai pasirinkta dienos oda * / #leftRadio: pažymėtas ~ # switchBtnOutline right: 0;
3b žingsnis. Pridėti kaukę („Firefox“ versija)
kaukė CSS nuosavybė iš tikrųjų yra a ilgalaikis turtas, ir tai yra trumposios nuosavybės dalis kaukė kuris leidžia jums nurodyti vaizdą, kuris taip pat bus naudojamas kaip kaukė. Nors kaukė „Firefox“ dar nepalaikoma, kaukė yra.kaukė nuosavybė turėtų priimti vaizdą, sukurtą su radialinis gradientas () CSS veikia kaip vertė, kaip ir kaukė „Firefox“ dar nepatvirtino.radialinis gradientas () naudokite SVG vaizdą kaip kaukės vaizdą su kaukės tipu šviesumas.
#nightSkin „Webkit“ versijoje naudojome šį kodą. Ir baigsite.#nightSkin background-image: url ('night.png'); kaukės tipas: šviesumas; kaukė: URL (#leftSwitchMask); #leftRadio: pažymėtas ~ # nightSkin kaukės tipas: šviesumas; kaukė: URL (#rightSwitchMask); Patikrinkite demonstraciją
