CSS Switch generaator

Mis see tööriist on?

CSS lüliti on checkbox, mis on stiliseeritud nii, et see näeb välja ja käitub nagu füüsiline sisse/välja lüliti — piklik riba ringikujulise liuguriga, mis liigub ühelt poolt teisele. Kapoti all on see siiski päris checkbox-sisend, ja see on oluline: see hoiab elemendi klaviatuuriga ligipääsetavana ning kasutatavana ekraanilugejate ja vormi saatmisega, erinevalt lülitist, mis on ehitatud puhtalt klikitavatest divi-elementidest.

See tööriist ehitab selle mustri sinu eest: peidetud checkbox, riba, mis muudab värvi :checked oleku põhjal, ning liugur, mis liigub CSS transformi abil. Reguleeri liuguid ja värvivalijaid, klõpsa eelvaadet, et testida tegelikku lülituse animatsiooni, ja kopeeri nii CSS kui ka minimaalne HTML märgistus, millest see sõltub.

Allikas: WAI-ARIA Authoring Practices, W3C — soovitab tõelist checkbox-sisendit lüliti juhtelemendi ligipääsetava alusena, mistõttu selle generaatori väljund säilitab aluseks oleva sisendelemendi.

Miks seda kasutada?

• Eelvaade on päris, klikitav lüliti — mitte staatiline pilt —, nii et saad testida täpset animatsiooni enne selle kasutamist.
• Väljastab nii CSS-i kui ka ligipääsetava HTML struktuuri (checkbox-sisend + silt), millest CSS sõltub.
• Täielik kontroll riba laiuse/kõrguse, väljas-oleku värvi, sees-oleku värvi, liuguri värvi, nurkade ümarduse ja ülemineku kiiruse üle.
• Kasutab standardset checkbox + :checked selektori mustrit, nii et lüliti jääb klaviatuuriga navigeeritavaks ja töötab päris vormide sees.
• Töötab täielikult sinu brauseris — midagi, mida sa seadistad, ei laadita kuhugi üles.
• Tasuta, registreerimist pole vaja, töötab ka mobiilis.

Kuidas kasutada

1. Määra laius ja kõrgus riba suuruse jaoks — liugur on automaatselt mõõdustatud, et mahtuda sisse väikese täidisega.
2. Vali väljas-oleku värv riba vaikimisi (märkimata) välimuse jaoks ja sees-oleku värv, kui see on sisse lülitatud.
3. Vali liuguri värv — valge või hele neutraalne toon annab tavaliselt tugevaima kontrasti riba vastu.
4. Määra border radius 50%-le klassikalise piklikult ümmarguse lüliti jaoks, või vähenda seda veidi ümarama ristküliku jaoks.
5. Reguleeri ülemineku kiirust, et kontrollida, kui kiiresti liugur liigub ja riba värv olekute vahel sulandub.
6. Klõpsa eelvaate lülitit, et veenduda animatsiooni õigsuses, ja kopeeri seejärel CSS ja HTML oma projekti.

Näide

Sisend

Laius: 52px · Kõrgus: 28px · Väljas värv: #cbd5e1 · Sees värv: #ea580c · Raadius: 50% · Kiirus: 200ms

Tulemus

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

Mustri tuum: checkboxi :checked olek koos üldise õe-selektoriga (~) juhib nii riba taustavärvi kui ka liuguri liikumiskaugust.

Miks checkbox, mitte div klõpsu käitlejaga

On kiusatus ehitada lüliti kahest <div> elemendist ja veidi JavaScriptist, mis klõpsul klassi vahetab, kuid see lähenemine lõhub tavaliselt klaviatuurinavigatsiooni, ekraanilugeja teavitused ja vormi saatmise — päris checkbox tegeleb kõigi kolmega tasuta. Muster, mille see tööriist genereerib, hoiab <input type="checkbox"> päris interaktiivse elemendina (visuaalselt peidetud, kuid endiselt fookustatav), ja kasutab riba ja liuguri stiliseerimiseks checkboxi natiivse :checked oleku põhjal ainult puhast CSS-i — üldse ei kasutata JavaScripti.

Levinud lülituse stiilid

• Klassikaline piklik lüliti: border radius 50%, mõõdukas suurus (48–56px lai), selge värvimuutus sisse/välja vahel.
• Seadete-paneeli lüliti: väiksem suurus (36–44px lai), summutatud väljas-värv (hele hall) heleda brändivärvilise sees-oleku vastu.
• Kergelt ümar lüliti: border radius umbes 20–30% täieliku piklikkuse asemel rohkem ristkülikukujulise, äpitaolise välimuse jaoks.
• Kiire, nobe lüliti: ülemineku kiirus 100–150ms tundub kohene ja reageeriv.
• Aeglane, kaalutletud lüliti: ülemineku kiirus 300–400ms mõjub sujuvama ja viimistletumana, kasulik ühe silmapaistva seadete-lüliti jaoks.

Kombineerimine teiste CSS tööriistadega

Loodud riba ja liugur kasutavad juba kapoti all border-radius'e, seega kui soovid ruudulist või teistmoodi ümardatud varianti kaugemale, kui liugur pakub, võimaldab Border Radius generaator igat nurka eraldi täpsustada enne väärtuse kleepimist. Box Shadow generaator on kasulik liugurile õrna varju lisamiseks lisasügavuse jaoks.

→ Border Radius Generaator · Box Shadow Generaator

Korduma kippuvad küsimused