A kapcsoló felhasználói felületének létrehozása a CSS maszk használatával
Képfeldolgozásban, álcázás egy olyan technika, amely lehetővé teszi kép elrejtése másikkal. A kép egy részének létrehozásához maszkot használunk átlátni. A maszkolás a CSS segítségével maszkolási tulajdonságok segítségével végezhető el.
A mai bejegyzésben egy maszkolt képet készítünk két PNG-kép és CSS-maszkolási technika segítségével, és lehetővé teszi a felhasználók számára, hogy kezeljék a kép két állapotát (nap és éjszaka) kapcsoló UI segítségével.
Egyes böngésző-kompatibilitási problémák miatt nem minden maszkolási tulajdonság támogatott minden böngészőben (2016. júniusától) - megmutatom két módszer a maszkok hozzáadására, az egyik a Webkit alapú böngészőkhöz és egy a Firefoxhoz. A háromlépéses bemutató két első lépése minden böngésző esetében azonos, de a harmadik lépésben különbség lesz.
1. lépés: Létrehoz egy alapkapcsolót
Mivel egy tipikus kapcsolónak két állapota van csak egy engedélyezve egyszerre használhatja a rádió gomb-csoport két a kapcsoló munkakomponenseinek létrehozásához. Helyezzen minden rádiógombot a szülőelem bal és jobb végére.
A rádió gombcsoportokat úgy hozzák létre, hogy mindegyik rádiógombot ugyanaz adja név tulajdonság. Egy rádiógomb-csoportban, csak egy gomb egyszerre ellenőrizhető.
Kezdjük a következő HTML és CSS-ekkel:
HTML
CSS
Az alábbi CSS-ben abszolút pozicionálást alkalmaztam, hogy a rádió gombokat pontosan elhelyezhessem a képernyőn.
#outerWrapper szélesség: 450px; magasság: 90px; párnázás: 10px; margin: 100px auto 0 auto; határ-sugár: 55px; box-shadow: 0 0 10px 6px #EAEBED; háttér: #fff; #innerWrapper magasság: 100%; border-radius: x 45 képpont; overflow: hidden; helyzet: a relatív; .radio szélesség: 90px; magasság: 100%; pozíció: abszolút; margin: 0; opacitás: 0; #rightRadio right: 0; .radio: nem (: ellenőrzött) kurzor: mutató;
Hozzáadtam a opacitás: 0 szabály a .rádió osztály elrejti a rádió gombokat. Az utolsó szabály az alábbi kódblokkban található, kurzor: mutató; megmutatja a kurzor kurzort a nem ellenőrzött gombhoz, hogy a felhasználók tudják, hogy melyik gombot kattintson a kapcsolóállapot váltásához.
2. lépés: A Skins hozzáadása a kapcsolóhoz
Ebben a lépésben kettőt adunk hozzá "Day" és "Night", mint a kapcsoló két állapota, a Minh Killy Le Dribbble lövöldözésén alapul.. HTML CSS A A mutató-események CSS tulajdonságával beállíthatja azokat a körülményeket, amelyek mellett egy grafikai elem lehet célzott egéresemények. A fenti kód alternatívájaként kettő A Chrome és más Webkit alapú böngészők esetében a Általában kétféle maszkolás létezik: fényesség és alfa. A Chrome-ban (az 51.0.2704.103-as verzióból, a Win10-ből) csak az alfa látható. A CSS-ben, Itt van a CSS hozzáad egy maszkot háttérképekhez a Webkit böngészőkben: CSS Én használtam Az éjszakai bőrre átlátszó kört hoztam létre, és a tartály megmaradt részét átlátszatlanul készítettem. A nappali bőrért az ellenkezőjét csináltam: átlátszatlan kört hoztam létre a Bár még nem támogatott a Webkit böngészők, hozzáadtam a Amint a fentiekben látható, a kör határa nem túl sima. Nak nek elrejti a durva éleket, add a HTML CSS A Habár a Tehát a helyett a A fenti SVG-kép az a fehér téglalap és a fekete kör. Adja hozzá ezt, és egy másik a-t fekete téglalap és a fehér kör mint a Webkit verzióban használt HTML-maszkok. HTML Cserélje ki (vagy kombinálja) a CSS kódot Jelenleg két különböző maszkkép (CSS gradiens és SVG), két különböző maszktípus (Alpha & Luminance), valamint Webkit és Firefox támogatás. CSS
#daySkin háttérkép: url ('day.png'); #nightSkin background-image: url ('night.png'); .skin szélesség: 100%; magasság: 100%; pointer-események: nincs; pozíció: abszolút; margin: 0; pointer-események: nincs; A szabályt hozzáadjuk a bőrhöz, hogy a kattintás eseményei a kapcsolón áthaladnak rajtuk, és elérje a rádió gombokat.
3a. Lépés. Maszk hozzáadása (Webkit verzió)
maszk-kép CSS tulajdonság, amely - a hozzászólás írása óta - csak az -webKit előtagja a Webkit böngészőkben. A maszk-kép tulajdonság lehetővé teszi adja meg a képet használt mint a maszk.alfa és fényesség az értékek a maszk típusú ingatlan.#nightSkin background-image: url ('night.png'); maszk-típus: alfa; / * átlátszó kör, melynek maradék része átlátszatlan * / -webkit-mask-image: radiális gradiens (kör 45px 45px, rgba (0,0,0,0) 45px, rgba (0,0,0,1) 45px) ; / * Ha a nap bőrét választotta * / #leftRadio: check ~ # nightSkin maszk-típus: alfa; / * átlátszatlan kör a fennmaradó rész átlátszó * / -webkit-mask-image: radiális gradiens (kör a 405px 45px, rgba (0,0,0,1) 45px, rgba (0,0,0,0) 45px) ; -WebKit-maszk-kép tulajdonság a kezdeti maszk kép létrehozásához. Értéke a radiális-gradiens () CSS függvény, amely egy előre meghatározott alakzatból, sugárirányú gradiensből és a gradiens közepéről készült kép létrehozására szolgál.radiális-gradiens () funkciót, és a többi részt átláthatóvá tette.maszk típusú a CSS-nek a jövőbeni hivatkozás céljából.
#switchBtnOutline szélesség: 90px; magasság: 100%; border-radius: x 45 képpont; box-shadow: 0 0 2px 2px szürke betét, 0 0 10px szürke; pointer-events: none; pozíció: abszolút; margin: 0; / * Helyezze a #switchBtnOutline-t jobbra, amikor a nap bőrét választja * / #leftRadio: check ~ # switchBtnOutline right: 0;
3b lépés. Maszk hozzáadása (Firefox verzió)
maszk-kép A CSS tulajdonság valójában a longhand tulajdon, és ez a rövidítés tulajdonosa maszk amely lehetővé teszi a maszkként használt kép meghatározását is. Míg maszk-kép a Firefox még nem támogatja, maszk jelentése.maszk A tulajdonságnak elfogadnia kell a radiális-gradiens () A CSS értékként működik, mint a maszk-kép a Firefox még nem támogatott.radiális-gradiens () kép, használjunk SVG-képet a maszk típusú maszkképként fényesség.
#nightSkin a Webkit verzióban a következő kódot használtuk. És kész.#nightSkin background-image: url ('night.png'); maszk típusú: luminancia; maszk: url (#leftSwitchMask); #leftRadio: ellenőrzött ~ # nightSkin maszk típusú: luminancia; maszk: url (#rightSwitchMask); Nézze meg a demót
