Ako vytvoriť používateľské rozhranie prepínačov pomocou masky CSS
Pri spracovaní obrazu, maskovanie je technika, ktorá vám umožňuje skryť obrázok s iným. Na vytvorenie časti obrazu sa používa maska vidieť skrz. Môžete vykonať maskovanie pomocou CSS pomocou maskovacích vlastností.
V dnešnom príspevku vytvoríme maskovaný obrázok pomocou dvoch obrázkov PNG a technikami maskovania CSS a umožníme používateľom zvládnuť dva stavy obrazu (deň a nočné) pomocou rozhrania UI.
Z dôvodu niektorých problémov s kompatibilitou prehliadača - nie všetky maskovacie vlastnosti sú podporované v každom prehliadači (k júnu 2016) - ukážem dve techniky na pridanie masiek, jeden pre prehliadače Webkit a jeden pre Firefox. Dva prvé kroky v tomto trom kroku sú rovnaké pre každý prehliadač, ale v treťom kroku bude rozdiel.
Krok 1. Vytvorte základný prepínač
Pretože typický prepínač má dva stavy len jeden povolené v čase, môžete použiť a skupina prepínačov dvoch na vytvorenie pracovných komponentov prepínača. Každé rádiové tlačidlo umiestnite na ľavý a pravý koniec rodičovského prvku.
Skupiny rádiových tlačidiel sa vytvárajú tým, že každé tlačidlo prepínača je rovnaké názov atribútov. V skupine prepínačov, iba jedno prepínacie tlačidlo možno skontrolovať naraz.
Začíname s nasledujúcimi kódmi HTML a CSS:
HTML
CSS
V CSS nižšie som použil absolútne umiestnenie na umiestnenie prepínačov na obrazovke presne tam, kde chcem.
#outerWrapper width: 450px; výška: 90px; polstrovanie: 10px; okraj: 100 pixelov auto 0 auto; okraj: 55px; box-tieň: 0 0 10px 6px #EAEBED; pozadie: #fff; #innerWrapper výška: 100%; border-radius: 45px; overflow: hidden; Pozícia: relatívna; .radio šírka: 90px; výška: 100%; pozície: absolútna; margin: 0; opacita: 0; #rightRadio vpravo: 0; .radio: nie (: začiarknuté) kurzor: ukazovateľ;
Pridal som Nepriehľadnosť: 0 pravidlo na .rádio triedy, aby sa skryte prepínacie tlačidlá. Posledné pravidlo v kódovom bloku nižšie, kurzor: ukazovateľ; zobrazuje kurzor ukazovateľa pre nepovolené tlačidlo prepínača, aby používatelia vedeli, na ktoré tlačidlo kliknutím prepínate stav spínača.
Krok 2. Pridajte skiny do prepínača
V tomto kroku pridáme dve Používam "Deň" a "Noc" ako dva stavy prepínača, inšpirované Dribbble shot Minh Killy Le. HTML CSS Pomocou vlastností CSS ukazovateľa udalostí môžete nastaviť okolnosti, za ktorých môže byť grafický prvok zacielené na udalosti myši. Ako alternatívu pre vyššie uvedený kód, dva Pre prehliadače Chrome a iné prehliadače založené na Webkit budem používať Vo všeobecnosti existujú dva druhy maskovania: svietivosť a alfa. V prehliadači Chrome (od verzie 51.0.2704.103, Win10) sa zdá, že v súčasnosti funguje iba alfa. V CSS, Tu je CSS pridá masku na obrázky na pozadí v prehliadačoch Webkit: CSS Použil som Pre nočnú kožu som vytvoril priehľadný kruh a zvyšnú časť nádoby som urobil nepriehľadný. Pre deň kože som urobil opak: vytvoril neprístupný kruh s Aj keď v prehliadačoch Webkit ešte nie je podporovaná, pridal som Ako vidíte vyššie, hranica kruhu nie je veľmi hladká. na skryť hrubé hrany, pridaj HTML CSS Napriek tomu Takže namiesto a Vyššie uvedený obrázok SVG vyzerá ako kombinácia a biely obdĺžnik a a čierny kruh. Pridať toto a ďalšie s čierny obdĺžnik a a biely kruh ako masky do HTML, ktorý sme použili vo verzii Webkit. HTML Nahradiť (alebo skombinovať) kód CSS pre Teraz máme dva rôzne maskovacie obrázky (gradient CSS a SVG), dva typy masiek (Alpha & Luminance) a podpora Webkit a Firefox. CSS
# daySkin pozadie-obrázok: url ('day.png'); #nightSkin pozadie-obrázok: url ('night.png'); .skin šírka: 100%; výška: 100%; pointer-events: žiadne; poloha: absolútna; rozpätie: 0; pointer-events: žiadne; pravidlo sa pridal ku kožkám tak, aby udalosti kliknutia na prepínači mohli prejsť cez ne, a prejdite na prepínacie tlačidlá.
Krok 3a. Pridať masku (verzia Webkit)
mask-image Vlastnosť CSS, ktorá - od písania tohto príspevku - funguje len s -WebKit v prehliadačoch Webkit. mask-image nehnuteľnosť vám umožní zadajte obrázok ktoré sa majú použiť ako maskovať.alfa a svietivosť sú hodnoty mask-type vlastnosť.#nightSkin pozadie-obrázok: url ('night.png'); maska typu: alfa; / * priehľadný kruh so zvyšnou časťou nepriehľadný * / -webkit-maska-obrázok: radiálny gradient (kruh 45px 45px, rgba (0,0,0,0) 45px, rgba (0,0,0,1) 45px) ; / * Ak je vybraná denná koža * / #leftRadio: začiarknutá ~ # nightSkin mask-type: alpha; / * nepriehľadný kruh s zvyšnou časťou transparentný * / -webkit-maska-obrázok: radiálny gradient (kruh pri 405px 45px, rgba (0,0,0,1) 45px, rgba (0,0,0,0 45px) ; -WebKit-maska-image Vlastnosť vytvoriť počiatočný obraz masky. Jeho hodnota používa radiálne gradient () Funkcia CSS, ktorá sa používa na vytvorenie obrazu z preddefinovaného tvaru, radiálneho gradientu a stredu sklonu.radiálne gradient () a zvyšná časť bola transparentná.mask-type majetok pre CSS pre budúce použitie.
#switchBtnOutline šírka: 90px; výška: 100%; border-radius: 45px; box-tieň: 0 0 2px 2px šedá vložka, 0 0 10px šedá; Ukazovateľ-events: none; pozície: absolútna; margin: 0; / * Miesto #switchBtnOutline na pravom konci, keď je vybratá denná koža * / #leftRadio: začiarknuté ~ # switchBtnOutline vpravo: 0;
Krok 3b. Pridať masku (verzia Firefoxu)
mask-image Vlastnosť CSS je vlastne dlhý majetok, a je súčasťou stenografickej vlastnosti maskovať ktorý vám umožňuje špecifikovať aj obrázok, ktorý sa má používať ako maska. zatiaľ čo mask-image v prehliadači Firefox ešte nie je podporovaná, maskovať je.maskovať vlastnosť by mala prijať obrázok vytvorený pomocou radiálne gradient () CSS funkcia ako hodnota, rovnako ako mask-image vlastníctvo, v prehliadači Firefox zatiaľ neexistuje žiadna podpora.radiálne gradient () obrázok, použite obrázok SVG ako obrázok masky s typom masky svietivosť.
#nightSkin sme použili vo verzii Webkit s nasledujúcim kódom. A vy ste skončili.#nightSkin pozadie-obrázok: url ('night.png'); typ masky: jas; mask: url (#leftSwitchMask); #leftRadio: začiarknuté ~ # nightSkin mask-type: luminance; mask: url (#rightSwitchMask); Pozrite sa na demo
