Generator CSS stikal

Kaj je to orodje?

CSS preklopno stikalo je potrditveno polje, oblikovano tako, da izgleda in deluje kot fizično stikalo za vklop/izklop — sled v obliki tabletke z okroglim gumbom, ki drsi z ene strani na drugo. Pod površino je še vedno pravo potrditveno polje, kar je pomembno: to ohranja kontrolo dostopno s tipkovnico in uporabno z bralniki zaslona ter pri oddaji obrazcev, za razliko od stikala, zgrajenega izključno iz klikljivih divov.

To orodje zgradi ta vzorec zate: skrito potrditveno polje, sled, ki spreminja barvo glede na :checked, in gumb, ki drsi z uporabo CSS transformacije. Prilagodi drsnike in barvne izbirnike, klikni predogled, da preizkusiš dejansko animacijo stikala, in kopiraj tako CSS kot minimalno HTML kodo, od katere je odvisen.

Vir: WAI-ARIA Authoring Practices, W3C — priporoča pravo potrditveno polje kot dostopno osnovo za kontrolo stikala, zato izhod tega generatorja ohranja osnovni element input.

Zakaj ga uporabiti?

• Predogled je pravo, klikljivo stikalo — ne statična slika — tako da lahko preizkusiš natančno animacijo pred uporabo.
• Izpiše tako CSS kot dostopno HTML strukturo (input potrditvenega polja + label), od katere je CSS odvisen.
• Poln nadzor nad širino/višino sledi, barvo izklopljenega stanja, barvo vklopljenega stanja, barvo gumba, zaobljenostjo robov in hitrostjo prehoda.
• Uporablja standardni vzorec potrditveno polje + selektor :checked, tako da stikalo ostane dostopno s tipkovnico in deluje znotraj pravih obrazcev.
• Deluje v celoti v tvojem brskalniku — nič od tega, kar konfiguriraš, se ne naloži nikamor.
• Brezplačno, brez prijave, deluje na mobilnih napravah.

Kako ga uporabljati

1. Nastavi širino in višino, da določiš velikost sledi — gumb je samodejno prilagojen, da se prilega znotraj z majhnim odmikom.
2. Izberi barvo izklopljenega stanja za privzet (nepotrjen) videz sledi in barvo vklopljenega stanja za, ko je preklopljeno na vklop.
3. Izberi barvo gumba — bela ali svetla nevtralna običajno da najmočnejši kontrast proti sledi.
4. Nastavi zaobljenost robov na 50 % za klasično stikalo v obliki tabletke ali jo zniža za rahlo zaobljen pravokotnik.
5. Prilagodi hitrost prehoda, da nadzoruješ, kako hitro gumb zdrsi in kako hitro barva sledi zbledi med stanji.
6. Klikni predogled stikala, da potrdiš, da animacija izgleda pravilno, nato kopiraj CSS in HTML v svoj projekt.

Primer

Vnos

Širina: 52px · Višina: 28px · Barva izklop: #cbd5e1 · Barva vklop: #ea580c · Radij: 50% · Hitrost: 200ms

Rezultat

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

Jedro vzorca: stanje :checked potrditvenega polja, skupaj s splošnim selektorjem sorojenca (~), poganja tako barvo ozadja sledi kot razdaljo drsenja gumba.

Zakaj potrditveno polje namesto diva z obravnavalcem klika

Skušnjava je zgraditi stikalo iz dveh <div> elementov in malo JavaScripta, ki ob kliku zamenja razred, a ta pristop običajno pokvari navigacijo s tipkovnico, obveščanje bralnikov zaslona in oddajo obrazca — pravo potrditveno polje vse tri reši zastonj. Vzorec, ki ga to orodje ustvari, ohranja <input type="checkbox"> kot dejanski interaktivni element (vizualno skrit, a še vedno fokusabilen) ter uporablja čist CSS — sploh brez JavaScripta — za oblikovanje sledi in gumba glede na naravno stanje :checked potrditvenega polja.

Pogosti slogi stikal

• Klasično stikalo v obliki tabletke: zaobljenost robov pri 50 %, zmerna velikost (48–56px širine), jasna sprememba barve med vklopom/izklopom.
• Stikalo za nastavitve: manjša velikost (36–44px širine), zamolkla barva izklopa (svetlo siva) proti stanju vklopa v barvi znamke.
• Rahlo zaobljeno stikalo: zaobljenost robov okoli 20–30 % namesto polne tabletke, za bolj pravokotno, aplikacijam podoben videz.
• Hitro, odzivno stikalo: hitrost prehoda 100–150ms deluje takojšnje in odzivno.
• Počasno, premišljeno stikalo: hitrost prehoda 300–400ms deluje bolj gladko in dovršeno, uporabno za eno izstopajoče stikalo nastavitev.

Kombiniranje z drugimi CSS orodji

Ustvarjena sled in gumb že uporabljata border-radius v ozadju, tako da če želiš pravokoten ali drugače zaobljen variant onkraj tistega, kar ponuja drsnik, ti Generator zaobljenosti robov omogoča fino nastavitev vsakega kota posebej, preden vrednost prilepiš. Generator sence okvirja je uporaben za dodajanje rahle sence gumbu za dodatno globino.

→ Generator border-radius · Generator box-shadow

Pogosta vprašanja