Slik lager du en bryter-brukergrensesnitt med CSS-mask

I bildebehandling, maskerings er en teknikk som lar deg skjul et bilde med en annen. En maske brukes til å lage en del av et bilde se gjennom. Du kan utføre maskering ved hjelp av CSS ved hjelp av maskeringsegenskaper.

I dagens innlegg vil vi lage et maskert bilde ved å bruke to PNG-bilder og CSS-maskingsteknikker, og la brukerne håndtere de to tilstandene i bildet (dag og natt) ved hjelp av en bryter UI.

På grunn av noen problemer med nettleserkompatibilitet - ikke alle maskeringsegenskaper støttes i alle nettlesere (fra juni 2016) - jeg vil vise to teknikker for å legge til masker, en for webkitbaserte nettlesere, og en for Firefox. De to første trinnene i denne tre-trinns opplæringen er de samme for hver nettleser, men det vil være en forskjell i det tredje trinnet.

Trinn 1. Opprett en grunnleggende bryter

Siden en typisk bryter har to tilstander med bare en aktivert På en gang kan du bruke en radioknapp gruppe på to å opprette arbeidskomponentene til bryteren. Legg hver radioknapp på venstre og høyre ende av foreldreelementet.

Radioknappgrupper opprettes ved å gi hver radioknapp den samme Navn Egenskap. I en radioknappgruppe, kun en radioknapp kan kontrolleres om gangen.

Vi starter med følgende HTML og CSS:

HTML

CSS

I CSS nedenfor brukte jeg absolutt posisjonering for å plassere radioknappene på skjermen nøyaktig hvor jeg vil.

#outerWrapper bredde: 450px; høyde: 90px; polstring: 10px; margin: 100px auto 0 auto; border-radius: 55px; boks-skygge: 0 0 10px 6px #EAEBED; bakgrunn: #fff;  #innerWrapper høyde: 100%; border-radius: 45 px; flow: hidden; stilling: i forhold;  .radio width: 90px; høyde: 100%; stilling: absolutt; margin: 0; opasitet: 0;  #rightRadio right: 0;  .radio: ikke (: merket) markør: pointer;

Jeg la til opacity: 0 herske til .radio klasse for å skjul radioknappene. Den siste regelen i kodeblokken nedenfor, markør: pointer; viser pekefeltet for den ukontrollerte alternativknappen, slik at brukerne vet hvilken knapp som skal klikkes for å veksle bryterstaten.

Skjermbilde av brytergrensesnittet med radioknapper i Chrome-nettleseren

Trinn 2. Legg skinn på bryteren

I dette trinnet legger vi til to

koder for de to skinnene under radioknappene i vår HTML-fil, og et bakgrunnsbilde til hver hud i vårt CSS.

Jeg bruker "Day" og "Night" som de to tilstandene til bryteren, inspirert av et dribbble-skudd av Minh Killy Le.

HTML

CSS

#daySkin bakgrunnsbilde: url ('day.png');  #nightSkin bakgrunnsbilde: url ('night.png');  .skin bredde: 100%; høyde: 100%; peker-hendelser: ingen; posisjon: absolutt; margin: 0;

De peker-hendelser: ingen; regelen er lagt til skinnene slik at klikkhendelsene på bryteren kan passere gjennom dem, og nå radioknappene.

Med CSS-egenskapen med peker-hendelser kan du angi omstendighetene under hvilke et grafisk element kan være målrettet av mus hendelser.

Som et alternativ for koden ovenfor, to tags (med kildebilder) inne i

Etiketter kan også fungere. De vil være skinn for de to bryterstaten.

Trinn 3a. Legg til maske (Webkit-versjon)

For Chrome og andre Webkit-baserte nettlesere, bruker jeg maske-bilde CSS eiendom, som - som ved skriving av dette innlegget - bare fungerer med -webkit prefiks i webkit nettlesere. De maske-bilde eiendom lar deg spesifiser bildet å bli brukt som maske.

Generelt er det to typer maskering: luminans og alfa.

I luminansmaskering, Den mørke delen av maskebildet skjuler bildet det maskerer: jo mørkere er en del i maskebildet, jo mer skjult den delen er i bildet blir maskert.
I alpha maskering, Den gjennomsiktige delen av maskebildet skjuler bildet som det maskerer: jo mer gjennomsiktig en del er i maskebildet, desto mer skjult den delen er i bildet som maskeres.

I Chrome (fra versjon 51.0.2704.103, Win10) virker bare alpha for øyeblikket å fungere.

I CSS, alfa og luminans er verdiene til masketypen eiendom.

Her er CSS det legger til en maske til bakgrunnsbilder i Webkit-nettlesere:

CSS

#nightSkin bakgrunnsbilde: url ('night.png'); mask-type: a; / * gjennomsiktig sirkel med gjenværende del ugjennomsiktig * / -webkit-mask-bilde: radial-gradient (sirkel ved 45px 45px, rgba (0,0,0,0) 45px, rgba (0,0,0,1) 45px) ;  / * Når dagens hud er valgt * / #leftRadio: sjekket ~ # nightSkin mask-type: alpha; / * ugjennomsiktig sirkel med gjenværende del gjennomsiktig * / -webkit-mask-bilde: radialgradient (sirkel ved 405px 45px, rgba (0,0,0,1) 45px, rgba (0,0,0,0) 45px) ;

Jeg brukte -webkit-maske-bilde egenskap for å opprette det første maskebildet. Dens verdi bruker radial-gradient () CSS-funksjonen som brukes til å lage et bilde fra en forhåndsdefinert form, en radial gradient og midten av gradienten.

For nattens hud skapte jeg en gjennomsiktig sirkel, og jeg gjorde den gjenværende delen av beholderen ugjennomsiktig. For dagens hud gjorde jeg motsatt: skapte en ugjennomsiktig sirkel med radial-gradient () funksjon, og gjort den gjenværende delen gjennomsiktig.

Selv om det ennå ikke er støttet i Webkit-nettlesere, la jeg til masketypen eiendom til CSS for fremtidig referanse.

Skjermbilde av bryter med Natt hud valgt

Som du kan se over, er grensen til sirkelen ikke veldig jevn. Til skjul de grove kanter, Legg til en

etter skinnene i form av en sirkel (samme størrelse som masksirkelen) med en bokseskygge. Skyggen vil gjemme sirkelmaskenes grove kanter.

HTML

CSS

#switchBtnOutline bredde: 90px; høyde: 100%; border-radius: 45 px; boks-skygge: 0 0 2px 2px gråinnsats, 0 0 10px grå; Pekeren-hendelser: ingen; stilling: absolutt; margin: 0;  / * Plasser #switchBtnOutline i høyre ende når dagens hud er valgt * / #leftRadio: sjekket ~ # switchBtnOutline høyre: 0;

Skjermbilde av bryter med maskersirkelens grove kanter skjult

Trinn 3b. Legg til maske (Firefox-versjon)

De maske-bilde CSS eiendom er faktisk a longhand eiendom, og det er en del av shorthandegenskapen maske som lar deg spesifisere bildet som skal brukes som maske også. Samtidig som maske-bilde er ikke støttet i Firefox ennå, maske er.

Selv om maske eiendom bør akseptere et bilde som er opprettet med radial-gradient () CSS funksjon som en verdi, akkurat som maske-bilde Egenskapen gjorde det, det er ingen støtte for det i Firefox ennå.

Så, i stedet for a radial-gradient () bilde, la oss bruke et SVG-bilde som maskebilde med maskintype luminans.

SVG bildet ovenfor ser ut som en kombinasjon av a hvitt rektangel og a svart sirkel. Legg til dette, og en annen med en svart rektangel og a hvit sirkel som masker til HTML-koden vi brukte i Webkit-versjonen.

SVG bilde (hvitt rektangel og svart sirkel for masken)

HTML

Erstatt (eller kombinere med) CSS-koden for #nightSkin Vi brukte i Webkit-versjonen med følgende kode. Og du er ferdig.

Vi har nå to forskjellige maskebilder (CSS gradient & SVG), to forskjellige masketyper (Alpha & Luminance), og både Webkit og Firefox-støtte.

CSS

#nightSkin bakgrunnsbilde: url ('night.png'); maske type: luminans; maske: url (#leftSwitchMask);  #leftRadio: sjekket ~ # nightSkin mask-type: luminans; maske: url (#rightSwitchMask);

Sjekk ut demoen

Demo
Last ned kilde

Slik oppretter du et systemgjenopprettingspunkt i Windows 7

Slik oppretter du et systemgjenopprettingspunkt manuelt i XP

Hvordan lage et sterkt passord (og husk det)