CSS jungiklio generatorius

Reguliuokite valdiklius, kad suprojektuotumėte perjungimo jungiklį, spustelėkite gyvą peržiūrą, kad pamatytumėte animaciją, tada nukopijuokite paruoštą naudoti HTML ir CSS kodą. Nustatykite plotį, aukštį, išjungto/įjungto takelio spalvas, slankiklio spalvą, kampų suapvalinimą ir perėjimo greitį — rezultatas yra standartinis, prieinamas, žymimuoju langeliu paremtas jungiklis, o ne vien dekoratyvi forma.

Kas yra šis įrankis?

CSS perjungimo jungiklis — tai žymimasis langelis, suformatuotas taip, kad atrodytų ir veiktų kaip fizinis įjungimo/išjungimo jungiklis — piliulės formos takelis su apskritu slankikliu, slystančiu iš vienos pusės į kitą. Iš esmės tai vis tiek tikras žymimojo langelio (checkbox) laukas, ir tai svarbu: tai išlaiko valdiklį prieinamą klaviatūra ir naudojamą su ekrano skaitytuvais bei formų pateikimu, kitaip nei jungiklis, sukurtas vien iš spustelėjamų div elementų.

Šis įrankis sukuria šį šabloną už jus: paslėptą žymimąjį langelį, takelį, kuris keičia spalvą pagal :checked būseną, ir slankiklį, kuris slysta naudojant CSS transform. Reguliuokite šliaužiklius ir spalvų parinkiklius, spustelėkite peržiūrą, kad išbandytumėte tikrą jungiklio animaciją, ir nukopijuokite tiek CSS, tiek minimalų HTML žymėjimą, nuo kurio jis priklauso.

Šaltinis: WAI-ARIA Authoring Practices, W3C — rekomenduoja tikrą žymimojo langelio įvesties lauką kaip prieinamą jungiklio valdiklio pagrindą, todėl šio generatoriaus rezultatas išlaiko pagrindinį įvesties elementą.

Kodėl jį naudoti?

Peržiūra yra tikras, spustelėjamas jungiklis — ne statinis vaizdas — todėl galite išbandyti tikslią animaciją prieš ją naudodami.
Rezultate pateikiamas ir CSS, ir prieinama HTML struktūra (žymimasis langelis + etiketė), nuo kurios priklauso CSS kodas.
Pilna kontrolė takelio pločio/aukščio, išjungtos būsenos spalvos, įjungtos būsenos spalvos, slankiklio spalvos, kampų suapvalinimo ir perėjimo greičio atžvilgiu.
Naudojamas standartinis žymimojo langelio + :checked selektoriaus šablonas, todėl jungiklis lieka valdomas klaviatūra ir veikia tikrose formose.
Veikia visiškai jūsų naršyklėje — niekas, ką sukonfigūruojate, niekur neįkeliama.
Nemokama, be registracijos, veikia mobiliuosiuose įrenginiuose.

Kaip naudoti

Nustatykite plotį ir aukštį, kad nustatytumėte takelio dydį — slankiklis automatiškai pritaikomas, kad tilptų viduje su nedidele tarpine erdve.
Pasirinkite išjungtos būsenos spalvą numatytajai (nepažymėtai) takelio išvaizdai ir įjungtos būsenos spalvą, kai jis perjungtas.
Pasirinkite slankiklio spalvą — balta ar šviesi neutrali spalva paprastai suteikia stipriausią kontrastą su takeliu.
Nustatykite kraštų spindulį ties 50 %, kad gautumėte klasikinį piliulės formos jungiklį, arba sumažinkite jį, kad gautumėte šiek tiek suapvalintą stačiakampį.
Reguliuokite perėjimo greitį, kad valdytumėte, kaip greitai slysta slankiklis ir kaip greitai takelio spalva pereina tarp būsenų.
Spustelėkite peržiūros jungiklį, kad patvirtintumėte, jog animacija atrodo tinkamai, tada nukopijuokite CSS ir HTML kodą į savo projektą.

Pavyzdys

Įvestis

Plotis: 52px · Aukštis: 28px · Išjungtos spalva: #cbd5e1 · Įjungtos spalva: #ea580c · Spindulys: 50% · Greitis: 200ms

Išvestis

.switch input:checked ~ .track { background-color: #ea580c; }
.switch input:checked ~ .track .thumb { transform: translateX(24px); }

Šablono esmė: žymimojo langelio :checked būsena kartu su bendruoju brolinio elemento selektoriumi (~) valdo tiek takelio fono spalvą, tiek slankiklio slydimo atstumą.

Kodėl žymimasis langelis, o ne div su spustelėjimo apdorotuvu

Kyla pagunda sukurti jungiklį iš dviejų <div> elementų ir nedaug JavaScript kodo, kuris pakeičia klasę spustelėjus, tačiau toks metodas dažniausiai sugadina navigaciją klaviatūra, ekrano skaitytuvo pranešimus ir formos pateikimą — tikras žymimasis langelis visa tai atlieka nemokamai. Šio įrankio sukurtas šablonas išlaiko <input type="checkbox"> kaip tikrą interaktyvų elementą (vizualiai paslėptą, bet vis dar galintį gauti fokusą), ir naudoja gryną CSS — visai be JavaScript — kad stilizuotų takelį ir slankiklį pagal natyvią žymimojo langelio :checked būseną.

Dažniausi jungiklių stiliai

Klasikinis piliulės jungiklis: kraštų spindulys 50 %, vidutinis dydis (48–56 px pločio), aiškus spalvos pokytis tarp įjungtos/išjungtos būsenų.
Nustatymų skydelio jungiklis: mažesnis dydis (36–44 px pločio), pritildyta išjungta spalva (šviesiai pilka) prie prekės ženklo spalvos įjungtos būsenos.
Šiek tiek suapvalintas jungiklis: kraštų spindulys apie 20–30 % vietoj pilnos piliulės, kad gautumėte labiau stačiakampę, į programėlę panašią išvaizdą.
Greitas, judrus jungiklis: perėjimo greitis 100–150 ms atrodo momentinis ir reaguojantis.
Lėtas, apgalvotas jungiklis: perėjimo greitis 300–400 ms atrodo sklandesnis ir profesionalesnis, naudingas vienam ryškiam nustatymų jungikliui.

Derinimas su kitais CSS įrankiais

Sukurtas takelis ir slankiklis jau naudoja border-radius savybę, todėl jei norite kampuoto ar kitaip suapvalinto varianto, nei siūlo šliaužiklis, Kraštų spindulio generatorius leidžia tiksliai sureguliuoti kiekvieną kampą atskirai prieš įklijuojant reikšmę. Šešėlio generatorius naudingas pridedant subtilų šešėlį slankikliui, kad būtų daugiau gylio.

→ border-radius generatorius · box-shadow generatorius

Dažniausiai užduodami klausimai

Kodėl rezultate pateikiamas HTML, o ne vien CSS?

Perjungimo jungiklis nėra vien vizualus — jis priklauso nuo tikro <input type="checkbox"> elemento, apgaubto <label> žyma, bei takelio ir slankiklio elementų, į kuriuos nukreiptas CSS. Be tikslios šios struktūros, sugeneruotame CSS esantys :checked selektoriai neturėtų prie ko prisijungti, todėl abu elementai kopijuojami kartu.

Ar šis jungiklis prieinamas (accessible)?

Taip — kadangi interaktyvus elementas yra tikras žymimasis langelis (tik vizualiai paslėptas naudojant techniką, kuri išlaiko jį prieinamumo medyje, o ne display:none), jis lieka pasiekiamas Tab klavišu, perjungiamas Tarpo ar Enter klavišu ir teisingai skelbiamas ekrano skaitytuvų kaip žymimasis langelis su dabartine pažymėta/nepažymėta būsena.

Ar galiu naudoti tai tikroje HTML formoje?

Taip. Kadangi pagrindinis elementas yra standartinis žymimojo langelio įvesties laukas, galite jam suteikti name ir value atributus, ir jis bus pateikiamas kaip bet koks kitas žymimasis langelis — pažymėti jungikliai siunčia savo reikšmę, nepažymėti praleidžiami, lygiai kaip įprastas žymimasis langelis.

Kodėl slankiklis juda naudodamas transform, o ne keisdamas left poziciją?

Transform: translateX() animacija apdorojama naršyklės kompozitoriaus ir išlieka sklandi net silpnesniuose įrenginiuose, tuo tarpu left animacija sukelia išdėstymo perskaičiavimą kiekviename kadre. Dėl šios priežasties sugeneruotas CSS visada naudoja transform slydimo judesiui.

Ką iš tikrųjų valdo kraštų spindulio šliaužiklis?

Jis proporcingai takelio aukščiui keičia tiek takelio kampų suapvalinimą, tiek slankiklio kampų suapvalinimą kartu. Ties 50 % gaunate visiškai suapvalintą piliulę su apskritu slankikliu; mažesnės reikšmės išlaiko formą labiau stačiakampę, kad jungiklis atrodytų kvadratiškesnis ir panašesnis į programėlę.