Kuidas luua lüliti kasutajaliides, kasutades CSS maski

Pilditöötluses, varjata on tehnika, mis võimaldab teil peida pilt teise. Maski osa pildistamiseks kasutatakse maski läbivaatus. Maskeeringut saate teostada CSS-iga maskeerimisomaduste abil.

Tänapäeva postituses loome maskeeritud kujutise, kasutades kahte PNG-pilti ja CSS-i maskeerimismeetodeid, ning võimaldame kasutajatel käsitleda pildi kahte olekut.päev ja öö) lüliti kasutajaliidese abil.

Mõningate brauseriga ühilduvuse probleemide tõttu ei toeta kõik brauseri omadused (alates 2016. aasta juunist) - ma näitan kaks tehnikat maskide lisamiseks, üks veebipõhistele brauseritele ja teine ​​Firefoxile. Selle kolmeastmelise juhendaja kaks esimest etappi on iga brauseri puhul ühesugused, kuid kolmandas etapis on erinevused.

1. samm. Looge põhilüliti

Kuna tüüpilisel lülitil on kaks olekut ainult üks lubatud korraga saate kasutada a kahe nupuga raadionupp lüliti tööosade loomiseks. Asetage iga raadionupp oma põhielemendi vasakule ja paremale otsale.

Raadio nuppude rühmad luuakse, andes igale raadionupule sama nimi atribuut. Raadionupu grupis, ainult üks raadionupp saab korraga kontrollida.

Alustame järgnevast HTML ja CSS-ist:

HTML

CSS

Allolevas CSS-is kasutasin absoluutset positsioneerimist, et panna raadionupud ekraanile täpselt seal, kus ma tahan.

#outerWrapper laius: 450px; kõrgus: 90 px; polsterdus: 10px; marginaal: 100px auto 0 auto; raadius: 55 px; box-shadow: 0 0 10px 6px #EAEBED; taust: #fff;  #innerWrapper kõrgus: 100%; raadius: 45 px; ülevool: peidetud; positsioon: suhteline;  .radio laius: 90px; kõrgus: 100%; positsioon: absoluutne; varu: 0; läbipaistmatus: 0;  #rightRadio right: 0;  .radio: ei (: kontrollitud) kursor: kursor;  

Lisasin selle suitsusus: 0 reegel .raadio klass, et peita raadionupud. Viimane reegel alloleval koodiplokil, kursor: pointer; kuvab märkimata raadionupu kursori kursorit, et kasutajad teaksid, millist nuppu lüliti oleku vahetamiseks klõpsata.

2. samm. Lisage lülitile Skins

Selles etapis lisame kaks

märgistused meie HTML-faili raadionuppude all olevale kahele nahale ja taustapilt igale meie CSS-i nahale.

Ma kasutan "Day" ja "Night" kui lüliti kahte riiki, inspireerituna Minri Killy Le.

HTML

CSS

#daySkin taust-pilt: url ('day.png');  #nightSkin background-image: url ('night.png');  .nurk laius: 100%; kõrgus: 100%; pointer-sündmused: pole; positsioon: absoluutne; varu: 0; 

The pointer-sündmused: pole; reeglid lisatakse nahale, nii et lülitil olevad klõpsuüritused saavad läbida neid, ja jõuavad raadionuppudeni.

Pointer-sündmuste CSS-i omadustega saate määrata asjaolud, mille korral graafiline element võib olla on suunatud hiire sündmustele.

Ülaltoodud koodi alternatiivina kaks sildid (lähtekuvaga) sees

Sildid võivad samuti toimida. Nad on kahe lüliti oleku nahad.

Etapp 3a. Lisa mask (Webkit versioon)

Chrome'i ja teiste Webkit-põhiste brauserite puhul kasutan seda mask-pilt CSS-i omadus, mis selle postituse kirjutamisel töötab ainult -webkit eesliide Webkit brauserites. The mask-pilt vara võimaldab teil määrake pilt kasutada nagu mask.

Üldiselt on olemas kahte tüüpi maskid: heledus ja alfa.

• Sisse heleduse maskimine, maski kujutise tume osa peidab peituva kujutise: tumedam osa on maski kujutises, seda rohkem peitub see osa peidetud kujutises.
• Sisse alfa-maskimine, maski kujutise läbipaistev osa peidab peituva kujutise: mida läbipaistvam osa on maski kujutises, seda rohkem peidetud on see osa maskeeritavas pildis.

Chrome'is (versioonist 51.0.2704.103, Win10) tundub, et praegu töötab ainult alfa.

CSS-is, alfa ja heledus on väärtused mask-tüüpi vara.

Siin on CSS lisab maski taustaprogrammidele Webkit brauserites:

CSS

#nightSkin background-image: url ('night.png'); mask-tüüp: alfa; / * läbipaistev ring koos ülejäänud osaga läbipaistmatu * / -webkit-mask-image: radiaal-gradient (ring 45px 45px, rgba (0,0,0,0) 45px, rgba (0,0,0,1) 45px) ;  / * Kui päevane nahk on valitud * / #leftRadio: kontrollitud ~ # nightSkin mask-type: alfa; / * läbipaistmatu ring ülejäänud osa läbipaistva * / -webkit-mask-image: radiaal-gradient (ring 405px 45px, rgba (0,0,0,1) 45px, rgba (0,0,0,0) 45px) ; 

Ma kasutasin seda -webkit-mask-image algse maski kujutise loomiseks. Selle väärtus kasutab radiaal-gradient () CSS-funktsioon, mida kasutatakse kujutise loomiseks eelnevalt määratletud kujust, radiaalsest gradiendist ja gradiendi keskpunktist.

Öise naha jaoks lõin ma läbipaistva ringi ja tegin konteineri ülejäänud osa läbipaistmatu. Päeva naha jaoks tegin vastupidist: loonud läbipaistmatu ringi radiaal-gradient () funktsiooni ja muutis ülejäänud osa läbipaistvaks.

Kuigi Webkit brauserites seda veel ei toetata, lisasin selle mask-tüüpi vara CSS-ile edaspidiseks kasutamiseks.

Nagu näete ülalpool, ei ole ringi äär väga sile. Et peita karmid servad, Lisa

pärast ringi kujuga nahad (sama suurus, nagu maski ring), millel on kasti vari. Vari peidab ringmaski karmid servad.

HTML

CSS

#switchBtnOutline laius: 90px; kõrgus: 100%; raadius: 45 px; kast-vari: 0 0 2px 2px hall inset, 0 0 10px hall; pointer-sündmused: pole; positsioon: absoluutne; varu: 0;  / * Koht #switchBtnOutline parempoolses otsas, kui on valitud päevane nahk * / #leftRadio: kontrollitud ~ # switchBtnOutline right: 0; 

Etapp 3b. Lisa mask (Firefoxi versioon)

The mask-pilt CSS-i omadus on tegelikult a pikaajaline vara, ja see on osa stenografeerimisest mask mis võimaldab määrata ka maskina kasutatava pildi. Kuigi mask-pilt Firefoxis pole veel toetatud, mask on.

kuigi mask omadus peaks vastu võtma pildiga loodud pildi radiaal-gradient () CSS toimib nagu väärtus mask-pilt Firefox ei toeta seda veel.

Niisiis, a asemel radiaal-gradient () kasutage SVG-kujutist maski tüüpi maskina heledus.

Ülaltoodud SVG-kujutis näeb välja nagu a valge ristkülik ja a must ring. Lisa see ja teine ​​a-ga must ristkülik ja a valge ring kui maske, mida kasutasime Webkiti versioonis kasutatavale HTML-ile.

HTML

Asendage (või kombineerige) CSS-koodiga #nightSkin kasutasime Webkiti versioonis järgmist koodi. Ja sa oled valmis.

Meil on nüüd kaks erinevat maskipilti (CSS-gradient & SVG), kaks erinevat maskitüüpi (Alpha & Luminance) ja nii Webkit kui ka Firefoxi tugi.

CSS

#nightSkin background-image: url ('night.png'); mask-tüüpi: heledus; mask: url (#leftSwitchMask);  #leftRadio: kontrollitud ~ # nightSkin mask-tüüpi: heledus; mask: url (#rightSwitchMask); 

Tutvu demoga

• Demo
• Allalaadimise allikas

Süsteemi taastepunkti loomine Windows 7-s

Kuidas luua süsteemi taastepunkt käsitsi XP-s

Kuidas luua tugev parool (ja mäletan seda)