Kako stvoriti Switch UI koristeći CSS masku
U obradi slike, maskiranje je tehnika koja vam omogućuje sakriti sliku s drugim. Maska se koristi za izradu dijela slike vidjeti kroz. Možete izvesti maskiranje pomoću CSS-a pomoću svojstava maskiranja.
U današnjem postu izradit ćemo maskiranu sliku pomoću dvije PNG slike i CSS masking tehnike i omogućiti korisnicima da obrađuju dva stanja slike (dan i noć) uz pomoć prekidačkog korisničkog sučelja.
Zbog nekih problema s kompatibilnošću preglednika - nisu sva svojstva maskiranja podržana u svakom pregledniku (od lipnja 2016.) - prikazat ću dvije tehnike dodavanja maski, jedan za Webkit-temeljene preglednike, a drugi za Firefox. Dva prva koraka u ovom vodiču u tri koraka su isti za svaki preglednik, ali u trećem koraku bit će razlika.
Korak 1. Stvorite osnovni prekidač
Budući da tipični prekidač ima dva stanja s samo jedan omogućeno u isto vrijeme možete koristiti a radio gumb grupa od dva stvoriti radne komponente prekidača. Postavite svaki radio gumb na lijevi i desni kraj svog osnovnog elementa.
Grupe radio gumba stvaraju se tako da svaki radio gumb bude isti Ime atribut. U skupini radio gumba, samo jedan radio gumb može se provjeriti istodobno.
Počinjemo sa sljedećim HTML-om i CSS-om:
HTML
CSS
U CSS-u ispod, koristio sam apsolutno pozicioniranje za postavljanje radio gumba na zaslon točno tamo gdje želim.
#outerWrapper width: 450px; visina: 90px; obloga: 10px; margina: 100px auto 0 auto; granični polumjer: 55px; kutija-sjena: 0 0 10px 6px #EAEBED; pozadina: #fff; #innerWrapper visina: 100%; granična radijus: 45 piksela; overflow: hidden; Položaj: relativna; .radio širina: 90px; visina: 100%; Položaj: na; margin: 0; neprozirnost: 0; #rightRadio desno: 0; .radio: nije (: označeno) pokazivač: pokazivač;
Dodao sam Neprozirnost: 0 pravilo .radio klasa kako bi sakriti radio gumbe. Posljednje pravilo u bloku koda u nastavku, pokazivač: pokazivač; prikazuje pokazivač pokazivača za neprovjereni radio gumb, tako da korisnici znaju kojim gumbom kliknuti za uključivanje stanja prekidača.
Korak 2. Dodajte Skins na Switch
U ovom koraku dodat ćemo dvije Koristim "Dan" i "Noć" kao dva stanja prekidača, inspirirani Dribbble snimkom Minh Killy Le. HTML CSS S CSS svojstvom pointer-events možete postaviti okolnosti pod kojima grafički element može biti koje ciljaju događaji s mišem. Kao alternativu gore navedenom kodu, dvije Za preglednike Chrome i druge webkit preglednike koristit ću Općenito, postoje dvije vrste maskiranja: osvjetljenje i alfa. U Chromeu (od verzije 51.0.2704.103, Win10) trenutno funkcionira samo alfa. U CSS-u, Ovdje je CSS dodaje masku za pozadinske slike u Webkit preglednicima: CSS Koristio sam Za noćnu kožu stvorio sam prozirni krug, a preostali dio posude napravio sam neprozirnim. Za dan kože, učinio sam suprotno: stvorio je neprozirni krug s Iako još nije podržan u Webkit preglednicima, dodao sam Kao što možete vidjeti gore, granica kruga nije vrlo glatka. Do sakrij grube rubove, dodati HTML CSS iako Dakle, umjesto a Gornja SVG slika izgleda kao kombinacija a bijeli pravokutnik i a crni krug. Dodajte ovo i još jednu s a crni pravokutnik i a bijeli krug kao maske HTML-u koji smo koristili u verziji Webkita. HTML Zamijenite (ili kombinirajte s) CSS kod za Sada imamo dvije različite slike maske (CSS gradijent i SVG), dvije različite vrste maski (Alpha & Luminance), a i Webkit i Firefox podrška. CSS
#daySkin background-image: url ('day.png'); #nightSkin background-image: url ('night.png'); .skin širina: 100%; visina: 100%; pointer-događaji: nema; položaj: apsolutni; margina: 0; pointer-događaji: nema; Pravilo se dodaje u skinove tako da događaji klika na prekidaču mogu proći kroz njih, i dođite do radio gumba.
Korak 3a. Dodaj masku (Webkit verzija)
maska slika CSS svojstvo, koje - od pisanja ovog posta - radi samo s -WebKit prefiks u Webkit preglednicima. maska slika vlasništvo vam omogućuje odredite sliku koji će se koristiti kao maska.alfa i osvjetljenje su vrijednosti maska tipa svojstvo.#nightSkin background-image: url ('night.png'); Maska tipa: alfa; / * prozirni krug s ostatkom neprozirnog dijela * / -webkit-mask-slika: radijalni gradijent (krug na 45px 45px, rgba (0,0,0,0) 45px, rgba (0,0,0,1) 45px) ; / * Kada je dan odabran koža * / #leftRadio: označeno ~ # nightSkin vrsta maske: alfa; / * neproziran krug s preostalim dijelom transparentan * / -webkit-mask-slika: radijalni gradijent (krug na 405px 45px, rgba (0,0,0,1) 45px, rgba (0,0,0,0) 45px) ; -WebKit-maska-slike za stvaranje početne slike maske. Njegova vrijednost koristi radijalnim gradijent () CSS funkcija koja se koristi za stvaranje slike iz unaprijed definiranog oblika, radijalnog gradijenta i središta gradijenta.radijalnim gradijent () i učinio preostali dio transparentnim.maska tipa za CSS za buduću referencu.
#switchBtnOutline width: 90px; visina: 100%; granična radijus: 45 piksela; kutija-sjena: 0 0 2px 2px sivi umetak, 0 0 10px siva; Pokazivač-događanja: none; Položaj: na; margin: 0; / * Upišite #switchBtnOutline na desnoj strani kad je odabrana dnevna koža * / #leftRadio: označeno ~ # switchBtnOutline right: 0;
Korak 3b. Dodaj masku (verzija Firefoxa)
maska slika CSS svojstvo je zapravo a dugotrajno vlasništvo, i to je dio skraćenog vlasništva maska koji vam omogućuje određivanje slike koja će se koristiti i kao maska. Dok maska slika još nije podržan u Firefoxu, maska je.maska svojstvo treba prihvatiti sliku stvorenu sa radijalnim gradijent () CSS funkcionira kao vrijednost, baš kao i maska slika vlasništvo nije, nema podrške za to u Firefoxu još.radijalnim gradijent () Koristimo SVG sliku kao sliku maske s tipom maske osvjetljenje.
#nightSkin koristili smo u verziji Webkit sljedeći kod. I gotovi ste.#nightSkin background-image: url ('night.png'); tip maske: osvjetljenje; Maska: URL (#leftSwitchMask); #leftRadio: označeno ~ # nightSkin vrsta maske: svjetlina; Maska: URL (#rightSwitchMask); Provjerite demo
