Kytkimen käyttöliittymän luominen käyttäen CSS-maskia
Kuvankäsittelyssä, rajauksella on tekniikka, jonka avulla voit piilota kuva toisen kanssa. Maskin avulla muodostetaan osa kuvasta nähdä läpi. Voit suorittaa maskin käyttämällä CSS: ää peittämällä ominaisuuksia.
Tämän päivän postissa luomme peitetyn kuvan käyttämällä kahta PNG-kuvaa ja CSS-peittotekniikkaa, ja käyttäjät voivat käsitellä kuvan kahta tilaa (päivä ja yö-) kytkimen käyttöliittymän avulla.
Joidenkin selaimen yhteensopivuusongelmien takia kaikkia selainominaisuuksia ei tueta kaikissa selaimissa (kesäkuusta 2016 alkaen) - näytän kaksi tekniikkaa maskien lisäämiseksi, yksi Webkit-pohjaisiin selaimiin ja toinen Firefoxiin. Kaksi ensimmäistä vaihetta tässä kolmivaiheisessa opetusohjelmassa ovat samat jokaiselle selaimelle, mutta kolmannessa vaiheessa on ero.
Vaihe 1. Luo peruskytkin
Koska tyypillisellä kytkimellä on kaksi tilaa Vain yksi käytössä kerrallaan voit käyttää a radiopainike ryhmä kahdesta luoda kytkimen toimintakomponentit. Aseta jokainen radiopainike vanhemman elementin vasemmalle ja oikealle puolelle.
Radiopaineryhmät luodaan antamalla jokaiselle radiopainikkeelle sama nimi ominaisuus. Radiopainikkeissa, vain yksi valintanappi voidaan tarkistaa kerrallaan.
Aloitamme seuraavalla HTML: llä ja CSS: llä:
HTML
CSS
Alla olevassa CSS: ssä käytin absoluuttista paikannusta sijoittamaan radiopainikkeet ruudulle tarkalleen missä haluan.
#outerWrapper leveys: 450px; korkeus: 90px; pehmuste: 10px; marginaali: 100px auto 0 auto; raja-säde: 55px; box-shadow: 0 0 10px 6px #EAEBED; tausta: #fff; #innerWrapper korkeus: 100%; border-säde: 45px; ylivuoto piilotettu; kanta: suhteellinen; .radio leveys: 90px; korkeus: 100%; kanta: absoluuttinen; margin: 0; opasiteetti: 0; #rightRadio right: 0; .radio: ei (: valittu) kohdistin: osoitin;
Lisäsin opasiteetti: 0 sääntö .radio luokka, jotta piilota radiopainikkeet. Alla oleva koodilohkon viimeinen sääntö, kohdistin: osoitin; näyttää osoittimen kohdistimen valintaruudun kohdalla, jotta käyttäjät tietävät, mitä painiketta napsautetaan vaihtaaksesi kytkimen tilaa.
Vaihe 2. Lisää Skins-kytkin
Tässä vaiheessa lisätään kaksi Käytän "Day" - ja "Night" -vaihtoehtoja kytkimen kahdeksi tilaksi, jotka ovat innoittaneet Minh Killy Le. HTML CSS Osoitetapahtumien CSS-ominaisuuden avulla voit määrittää olosuhteet, joissa graafinen elementti voi olla kohdistuu hiiren tapahtumiin. Vaihtoehtona edellä olevalle koodille kaksi Käytän Chrome- ja muita Webkit-pohjaisia selaimia Yleensä on kahdenlaisia peittoja: luminanssi ja alfa. Chromessa (versiosta 51.0.2704.103, Win10) vain alfa näyttää tällä hetkellä toimivan. CSS: ssä, Tässä on CSS lisää maskin taustakuviin Webkit-selaimissa: CSS Käytin Yön iholle luotin läpinäkyvän ympyrän, ja tein säiliön jäljellä olevan osan läpinäkymättömäksi. Päivän iholle tein päinvastaisen: luotiin läpinäkymätön ympyrä Vaikka se ei ole vielä tuettu Webkit-selaimissa, lisäsin sen Kuten edellä näet, ympyrän raja ei ole kovin sileä. jotta piilota karkeat reunat, lisää HTML CSS vaikkakin Joten sen sijaan, että Yllä oleva SVG-kuva näyttää yhdistelmästä a valkoinen suorakulmio ja a musta ympyrä. Lisää tämä ja toinen, jossa on musta suorakulmio ja a valkoinen ympyrä naamioina HTML-koodiin, jota käytimme Webkit-versiossa. HTML Vaihda (tai yhdistä) CSS-koodiin Meillä on nyt kaksi eri maskikuvaa (CSS-gradientti & SVG), kaksi eri maskityyppiä (Alpha & Luminance) ja sekä Webkit- että Firefox-tuki. CSS
#daySkin taustakuva: url ('day.png'); #nightSkin background-image: url ('night.png'); .skin leveys: 100%; korkeus: 100%; pointer-tapahtumia: ei; asema: absoluuttinen; marginaali: 0; pointer-tapahtumia: ei; sääntö lisätään nahoille niin, että kytkin voi napsauttaa tapahtumia kulkea niiden läpi, ja saavuttaa radio-painikkeet.
Vaihe 3a. Lisää naamio (Webkit-versio)
maskin kuva CSS-ominaisuus, joka tämän postin kirjoittamisen jälkeen toimii vain -webKit etuliite Webkit-selaimissa. maskin kuva omaisuuden avulla voit määritä kuva käytettäväksi kuin naamio.alfa ja luminanssi ovat arvot maski-tyyppinen omaisuus.#nightSkin background-image: url ('night.png'); maski-tyyppi: alfa; / * läpinäkyvä ympyrä, jossa jäljellä oleva osa on läpinäkymätön * / -webkit-mask-kuva: säteittäinen kaltevuus (ympyrä 45px 45px, rgba (0,0,0,0) 45px, rgba (0,0,0,1) 45px) ; / * Kun päivä iho valitaan * / #leftRadio: check ~ # nightSkin mask-type: alfa; / * läpinäkymätön ympyrä, jossa jäljellä oleva osa on läpinäkyvä * / -webkit-mask-kuva: säteittäinen kaltevuus (ympyrä 405px: ssä 45px, rgba (0,0,0,1) 45px, rgba (0,0,0,0) 45px) ; -WebKit-maski-kuva ominaisuuden avulla voit luoda alkuperäisen maskikuvan. Sen arvo käyttää radial-gradientilla () CSS-toiminto, jota käytetään kuvan muodostamiseen ennalta määritellystä muodosta, säteittäisestä gradientista ja kaltevuuden keskipisteestä.radial-gradientilla () toiminnon, ja teki jäljellä olevan osan läpinäkyväksi.maski-tyyppinen omaisuutta CSS: lle myöhempää käyttöä varten.
#switchBtnOutline leveys: 90px; korkeus: 100%; border-säde: 45px; laatikko-varjo: 0 0 2px 2px harmaa, 0 0 10px harmaa; osoitin-tapahtumia: none; kanta: absoluuttinen; margin: 0; / * Aseta #switchBtnOutline oikealle puolelle, kun päivä iho on valittu * / #leftRadio: valittu ~ # switchBtnOutline right: 0;
Vaihe 3b. Lisää naamio (Firefox-versio)
maskin kuva CSS-ominaisuus on itse asiassa a longhand-omaisuutta, ja se on osa lyhytominaisuutta naamio jonka avulla voit määrittää myös maskina käytettävän kuvan. Sillä aikaa maskin kuva Firefox ei ole vielä tuettu, naamio on.naamio omaisuuden pitäisi hyväksyä radial-gradientilla () CSS toimii arvona, aivan kuten maskin kuva Firefox ei ole vielä tukenut sitä.radial-gradientilla () kuva, käytä SVG-kuvaa maskikuvana maskin tyypillä luminanssi.
#nightSkin käytimme Webkit-versiossa seuraavaa koodia. Ja olet valmis.#nightSkin background-image: url ('night.png'); maskityyppi: luminanssi; maski: url (#leftSwitchMask); #leftRadio: valittu ~ # nightSkin mask-type: luminanssi; maski: url (#rightSwitchMask); Tutustu demoon
