Sådan oprettes en switch-brugerflade med CSS-mask
Ved billedbehandling, maskering er en teknik, der giver dig mulighed for skjul et billede med en anden. En maske bruges til at lave en del af et billede se igennem. Du kan udføre maskering ved hjælp af CSS ved hjælp af maskeringsegenskaber.
I dagens post skaber vi et maskeret billede ved at bruge to PNG-billeder og CSS-maskeringsteknikker, og tillade brugere at håndtere de to tilstande af billedet (dag og nat) ved hjælp af en switch UI.
På grund af nogle problemer med browserkompatibilitet - ikke alle maskeringsegenskaber understøttes i hver browser (fra juni 2016) - jeg vil vise to teknikker til tilføjelse af masker, en til webkitbaserede browsere og en til Firefox. De to første trin i denne tre-trins vejledning er de samme for hver browser, men der vil være en forskel i det tredje trin.
Trin 1. Opret en grundlæggende switch
Da en typisk switch har to tilstande med kun en aktiveret på et tidspunkt kan du bruge en radio knap gruppe på to at skabe switchens arbejdskomponenter. Placer hver radioknap i venstre og højre ende af deres overordnede element.
Radio knap grupper er skabt ved at give hver radioknap det samme navn attribut. I en radioknapgruppe, kun en radioknap kan kontrolleres ad gangen.
Vi starter med følgende HTML og CSS:
HTML
CSS
I CSS nedenfor brugte jeg absolut positionering til at placere radioknapperne på skærmen præcis, hvor jeg vil.
#outerWrapper bredde: 450px; højde: 90px; polstring: 10px; margin: 100px auto 0 auto; grænse-radius: 55px; box-skygge: 0 0 10px 6px #EAEBED; baggrund: #fff; #innerWrapper højde: 100%; border-radius: gange 45 px; overflow: hidden; position: relative; .radio bredde: 90px; højde: 100%; position: absolut; margin: 0; opacitet: 0; #rightRadio højre: 0; .radio: ikke (: tjekket) cursor: pointer;
Jeg tilføjede opacitet: 0 regere til .radio klasse for at kunne skjul radioknapperne. Den sidste regel i kodeblokken nedenfor, markør: pointer; viser markørmarkøren for den ukontrollerede radioknap, så brugerne ved, hvilken knap der skal klikkes for at skifte omskifter tilstand.
Trin 2. Tilføj skind til kontakten
I dette trin tilføjer vi to Jeg bruger "Day" og "Night" som de to state of the switch, inspireret af et Dribbble shot af Minh Killy Le. HTML CSS Det Med CSS-ejendommens peger-begivenheder kan du angive omstændighederne under hvilke et grafisk element kan være målrettet af mus events. Som et alternativ til koden ovenfor, to For Chrome og andre webkitbaserede browsere bruger jeg Generelt er der to slags maskering: luminans og alfa. I Chrome (som i version 51.0.2704.103, Win10) synes kun alpha at fungere i øjeblikket. I CSS, Her er CSS det tilføjer en maske til baggrundsbilleder i Webkit-browsere: CSS Jeg brugte For nattens hud skabte jeg en gennemsigtig cirkel, og jeg lagde den resterende del af beholderen uigennemsigtig. For dagens hud gjorde jeg det modsatte: skabte en uigennemsigtig cirkel med Selv om det endnu ikke understøttes i webkit browsere, tilføjede jeg Som du kan se ovenfor, er grænsen til cirklen ikke meget glat. Til skjul de grove kanter, Tilføj en HTML CSS Det Selvom Så i stedet for a SVG-billedet ovenfor ligner en kombination af a hvidt rektangel og a sort cirkel. Tilføj dette, og en anden med en sort rektangel og a hvid cirkel som masker til den HTML, vi brugte i Webkit-versionen. HTML Udskift (eller kombiner med) CSS-koden for Vi har nu to forskellige maskebilleder (CSS gradient & SVG), to forskellige masketyper (Alpha & Luminance), og både Webkit og Firefox support. CSS
#daySkin baggrundsbillede: url ('day.png'); # nightSkin baggrundsbillede: url ('night.png'); .skin bredde: 100%; højde: 100%; peger-begivenheder: ingen; position: absolut; margen: 0; peger-begivenheder: ingen; regel tilføjes skindene, så klikhændelserne på kontakten kan passere gennem dem, og nå radioknapperne.
Trin 3a. Tilføj maske (Webkit version)
maske-billede CSS ejendom, som - som ved skrivelsen af denne post - kun arbejder med -webKit præfiks i webkit browsere. Det maske-billede ejendom lader dig Angiv billedet at blive brugt som maske.alfa og luminans er værdierne af maske-typen ejendom.#nightSkin baggrundsbillede: url ('night.png'); maske-typen: alpha; / * gennemsigtig cirkel med resterende del uigennemsigtig * / -webkit-maske-billede: radial-gradient (cirkel ved 45px 45px, rgba (0,0,0,0) 45px, rgba (0,0,0,1) 45px) ; / * Når dagens hud er valgt * / #leftRadio: tjekket ~ # nightSkin mask-type: alpha; / * uigennemsigtig cirkel med resterende del gennemsigtig * / -webkit-mask-billede: radial-gradient (cirkel ved 405px 45px, rgba (0,0,0,1) 45px, rgba (0,0,0,0) 45px) ; -WebKit-maske-billede egenskab for at oprette det oprindelige maskebillede. Dens værdi bruger radial-gradient () CSS-funktion, der bruges til at oprette et billede fra en foruddefineret form, en radial gradient og midten af gradienten.radial-gradient () funktion og gjort den resterende del gennemsigtig.maske-typen ejendom til CSS til fremtidig reference.
#switchBtnOutline bredde: 90px; højde: 100%; border-radius: gange 45 px; box-skygge: 0 0 2px 2px grå indsats, 0 0 10px grå; pointer-events: ingen; position: absolut; margin: 0; / * Placer #switchBtnOutline i højre ende, når dagens hud er valgt * / #leftRadio: tjekket ~ # switchBtnOutline højre: 0;
Trin 3b. Tilføj maske (Firefox-version)
maske-billede CSS ejendom er faktisk a longhand ejendom, og det er en del af shorthandegenskaben maske Det giver dig mulighed for at angive det billede, der skal bruges som en maske. Mens maske-billede understøttes ikke i Firefox endnu, maske er.maske ejendom skal acceptere et billede, der er oprettet med radial-gradient () CSS funktion som en værdi, ligesom den maske-billede ejendom gjorde, der er ingen støtte til det i Firefox endnu.radial-gradient () billede, lad os bruge et SVG-billede som maskebilledet med maskintypen luminans.
#nightSkin Vi brugte i Webkit-versionen med følgende kode. Og du er færdig.#nightSkin baggrundsbillede: url ('night.png'); maske type: luminans; maske: url (#leftSwitchMask); #leftRadio: tjekket ~ # nightSkin mask-type: luminans; maske: url (#rightSwitchMask); Tjek demoen
