Så här skapar du ett gränssnittskort med hjälp av CSS Mask
Vid bildbehandling, maskering är en teknik som tillåter dig att gömma en bild med en annan. En mask används för att göra en del av en bild se igenom. Du kan utföra maskering med hjälp av CSS med hjälp av maskeringsegenskaper.
I dagens inlägg skapar vi en maskerad bild med hjälp av två PNG-bilder och CSS-maskeringstekniker och tillåter användare att hantera de två tillstånden i bilden (dag och natt) med hjälp av en omkopplare UI.
På grund av vissa problem med webbläsarkompatibilitet - inte alla maskeringsegenskaper stöds i varje webbläsare (från och med juni 2016) - jag kommer att visa två tekniker för att lägga till masker, en för webbkitbaserade webbläsare och en för Firefox. De två första stegen i denna trestegs handledning är desamma för varje webbläsare, men det kommer att vara en skillnad i det tredje steget.
Steg 1. Skapa en grundläggande omkopplare
Eftersom en typisk växel har två tillstånd med bara en aktiverad i taget kan du använda en radioknapp grupp av två för att skapa växlarens arbetskomponenter. Placera varje radioknapp i vänster och höger ände av deras moderelement.
Radionknappsgrupper skapas genom att ge varje radioknapp samma namn attribut. I en radioknappgrupp, bara en radioknapp kan kontrolleras i taget.
Vi börjar med följande HTML och CSS:
html
CSS
I CSS nedan använde jag absolut positionering för att placera radioknapparna på skärmen exakt var jag vill.
#outerWrapper width: 450px; höjd: 90px; vaddering: 10px; marginal: 100px auto 0 auto; gränsstråle: 55px; boxskugga: 0 0 10px 6px #EAEBED; bakgrund: #fff; #innerWrapper höjd: 100%; border-radius: 45px; overflow: hidden; positioner: relativ; .radio bredd: 90px; höjd: 100%; position: absolute; marginal: 0; opacitet: 0; #rightRadio höger: 0; .radio: inte (: markerad) markör: pekare;
Jag lade till opacitet: 0 regera till .radio klass för att gömma radioknapparna. Den sista regeln i kodblocket nedan, markör: pekare; visar pekarkursen för den ej markerade alternativknappen, så att användarna vet vilken knapp som ska klicka för att växla omkopplingstillståndet.
Steg 2. Lägg skinn på strömbrytaren
I detta steg lägger vi till två Jag använder "Day" och "Night" som de två staterna i byten, inspirerad av ett dribbble-skott av Minh Killy Le. html CSS De Med CSS-egenskapen för pekarehändelser kan du ange omständigheter under vilka ett grafiskt element kan vara riktade mot mushändelser. Som ett alternativ för koden ovan, två För Chrome och andra Webkit-baserade webbläsare använder jag I allmänhet finns det två typer av maskering: luminans och alfa. I Chrome (enligt version 51.0.2704.103, Win10) verkar bara alpha fungera för närvarande. I CSS, Här är CSS som lägger till en mask till bakgrundsbilder i Webkit-webbläsare: CSS Jag använde För nattskinnet skapade jag en genomskinlig cirkel, och jag gjorde den återstående delen av behållaren ogenomskinlig. För dagens hud gjorde jag motsatsen: skapade en ogenomskinlig cirkel med Även om det ännu inte stöds i Webkit-webbläsare, lade jag till Som du kan se ovan är gränsen för cirkeln inte så jämn. Till gömma grova kanterna, Lägg till en html CSS De Även om Så istället för a SVG-bilden ovan ser ut som en kombination av a vit rektangel och a svart cirkel. Lägg till det här och en annan med en svart rektangel och a vit cirkel som maskerar till HTML som vi använde i Webkit-versionen. html Ersätt (eller kombinera med) CSS-koden för Vi har nu två olika maskbilder (CSS gradient & SVG), två olika masktyper (Alpha & Luminance), och både Webkit och Firefox-support. CSS
#daySkin background-image: url ('day.png'); #nightSkin background-image: url ('night.png'); . skin bredd: 100%; höjd: 100%; pekare-händelser: ingen; position: absolut; marginal: 0; pekare-händelser: ingen; regel läggs till skinnen så att klickhändelserna på växeln kan passera genom dem, och nå radioknapparna.
Steg 3a. Lägg till mask (webbkitversion)
mask-bild CSS egendom, som - som av skrivandet av denna post - fungerar bara med -webkit prefix i webkit webbläsare. De mask-bild egendom låter dig ange bilden att användas som den mask.alfa och luminans är värdena för mask-typ fast egendom.#nightSkin background-image: url ('night.png'); mask-typ: alfa; / * transparent cirkel med den återstående delen ogenomskinlig * / -webkit-mask-bild: radialgradient (cirkel vid 45px 45px, rgba (0,0,0,0) 45px, rgba (0,0,0,1) 45px) ; / * När dagens hud valts * / #leftRadio: checked ~ # nightSkin mask-type: alpha; / * ogenomskinlig cirkel med återstående del transparent * / -webkit-mask-bild: radialgradient (cirkel vid 405px 45px, rgba (0,0,0,1) 45px, rgba (0,0,0,0) 45px) ; -webkit-mask-image egenskap för att skapa den ursprungliga maskbilden. Dess värde använder radial-gradient () CSS-funktionen som används för att skapa en bild från en fördefinierad form, en radiell gradient och mittpunkten för gradienten.radial-gradient () funktionen och gjorde den återstående delen transparent.mask-typ egendom till CSS för framtida referens.
#switchBtnOutline bredd: 90px; höjd: 100%; border-radius: 45px; boxskugga: 0 0 2px 2px gråinsats, 0 0 10px grå; Pekaren-händelser: none; position: absolute; marginal: 0; / * Placera #switchBtnOutline i den högra änden när dagskinn väljs * / #leftRadio: checked ~ # switchBtnOutline höger: 0;
Steg 3b. Lägg till mask (Firefox-version)
mask-bild CSS-egendom är faktiskt en longhand egendom, och det är en del av shorthandegenskapen mask som låter dig ange bilden som ska användas som mask. Medan mask-bild stöds inte i Firefox ännu, mask är.mask egendom bör acceptera en bild som skapats med radial-gradient () CSS funktion som ett värde, precis som mask-bild egenskapen gjorde det, det finns inget stöd för det i Firefox än.radial-gradient () bild, låt oss använda en SVG-bild som maskbilden med masktypen luminans.
#nightSkin Vi använde i Webkit-versionen med följande kod. Och du är klar.#nightSkin background-image: url ('night.png'); mask-typ: luminans; mask: url (#leftSwitchMask); #leftRadio: checked ~ # nightSkin mask-type: luminans; mask: url (#rightSwitchMask); Kolla in demoen
