CSS-kytkingeneraattori

Säädä asetuksia suunnitellaksesi vaihtokytkimen, klikkaa live-esikatselua nähdäksesi sen animoituvan, ja kopioi sitten käyttövalmis HTML ja CSS. Aseta leveys, korkeus, pois/päällä-radan värit, liukukappaleen väri, kulmien pyöristys ja siirtymän nopeus — tulos on tavallinen saavutettava valintaruutupohjainen kytkin, ei vain koristeellinen muoto.

Mikä tämä työkalu on?

CSS-vaihtokytkin on valintaruutu, joka on tyylitelty näyttämään ja käyttäytymään kuin fyysinen päälle/pois-kytkin — pillerin muotoinen rata, jossa on pyöreä liukukappale, joka liukuu puolelta toiselle. Konepellin alla se on silti oikea checkbox-syöte, ja se on merkityksellistä: se pitää säätimen näppäimistöllä käytettävänä ja ruudunlukuohjelmien ja lomakkeiden lähetysten kanssa toimivana, toisin kuin pelkistä klikattavista div-elementeistä rakennettu kytkin.

Tämä työkalu rakentaa tämän mallin puolestasi: piilotettu valintaruutu, rata joka vaihtaa väriä :checked-tilan perusteella, ja liukukappale joka liukuu CSS-muunnoksella. Säädä liukusäätimiä ja värivalitsimia, klikkaa esikatselua testataksesi varsinaisen kytkinanimaation, ja kopioi sekä CSS että sen tarvitsema minimaalinen HTML-merkintä.

Lähde: WAI-ARIA Authoring Practices, W3C — suosittelee oikeaa checkbox-syötettä kytkinsäätimen saavutettavana perustana, minkä vuoksi tämän generaattorin tulos säilyttää taustalla olevan input-elementin.

Miksi käyttää sitä?

Esikatselu on oikea, klikattava kytkin — ei staattinen kuva — joten voit testata tarkan animaation ennen käyttöä.
Tuottaa sekä CSS:n että saavutettavan HTML-rakenteen (checkbox-syöte + label), johon CSS perustuu.
Täysi hallinta radan leveydestä/korkeudesta, pois-tilan väristä, päällä-tilan väristä, liukukappaleen väristä, kulmien pyöristyksestä ja siirtymän nopeudesta.
Käyttää tavallista checkbox + :checked -valitsinmallia, joten kytkin pysyy näppäimistöllä navigoitavana ja toimii oikeissa lomakkeissa.
Toimii kokonaan selaimessasi — mitään määrittämääsi ei ladata mihinkään.
Ilmainen, ei rekisteröitymistä, toimii mobiilissa.

Käyttöohje

Aseta leveys ja korkeus radan mitoittamiseksi — liukukappale mitoitetaan automaattisesti mahtumaan sisään pienellä täytteellä.
Valitse pois-tilan väri radan oletusnäkymälle (valitsematon), ja päällä-tilan väri kun se on kytketty päälle.
Valitse liukukappaleen väri — valkoinen tai vaalea neutraali antaa yleensä vahvimman kontrastin rataa vasten.
Aseta reunuksen pyöristys arvoon 50 % klassista pillerin muotoista kytkintä varten, tai laske sitä hieman pyöristettyä suorakulmiota varten.
Säädä siirtymän nopeutta hallitaksesi kuinka nopeasti liukukappale liikkuu ja radan väri häivytetään tilojen välillä.
Klikkaa esikatselukytkintä vahvistaaksesi että animaatio näyttää oikealta, kopioi sitten CSS ja HTML projektiisi.

Esimerkki

Syöte

Leveys: 52px · Korkeus: 28px · Pois-väri: #cbd5e1 · Päällä-väri: #ea580c · Pyöristys: 50 % · Nopeus: 200ms

Tuloste

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

Mallin ydin: valintaruudun :checked-tila yhdistettynä yleiseen sisarusvalitsimeen (~) ohjaa sekä radan taustaväriä että liukukappaleen liikematkaa.

Miksi valintaruutu klikkauskäsittelijällä varustetun div:n sijaan

On houkuttelevaa rakentaa kytkin kahdesta <div>-elementistä ja hieman JavaScriptiä, joka vaihtaa luokkaa klikkauksella, mutta tämä lähestymistapa yleensä rikkoo näppäimistönavigoinnin, ruudunlukuohjelman ilmoitukset ja lomakkeen lähetyksen — oikea valintaruutu hoitaa kaikki kolme ilmaiseksi. Tämän työkalun luoma malli säilyttää <input type="checkbox">-elementin varsinaisena interaktiivisena elementtinä (visuaalisesti piilotettuna mutta silti kohdistettavana), ja käyttää puhdasta CSS:ää — ei lainkaan JavaScriptiä — radan ja liukukappaleen tyylittelyyn valintaruudun natiivin :checked-tilan perusteella.

Yleisiä kytkintyylejä

Klassinen pillerikytkin: reunuksen pyöristys 50 %, kohtuullinen koko (48–56px leveä), selkeä värinmuutos päällä/pois-tilojen välillä.
Asetuspaneelikytkin: pienempi koko (36–44px leveä), vaimennettu pois-väri (vaaleanharmaa) brändiväristä päällä-tilaa vasten.
Hieman pyöristetty kytkin: reunuksen pyöristys noin 20–30 % täyden pillerin sijaan, suorakulmaisemman, sovellusmaisen ulkonäön saamiseksi.
Nopea, ripeä kytkin: siirtymän nopeus 100–150ms tuntuu välittömältä ja reagoivalta.
Hidas, harkittu kytkin: siirtymän nopeus 300–400ms tuntuu sulavammalta ja viimeistellymmältä, hyödyllinen yksittäiselle näkyvälle asetuskytkimelle.

Yhdistäminen muihin CSS-työkaluihin

Luotu rata ja liukukappale käyttävät jo border-radius-ominaisuutta konepellin alla, joten jos haluat neliömäisen tai eri tavalla pyöristetyn version liukusäätimen tarjoaman lisäksi, Border Radius -generaattori antaa hienosäätää jokaista kulmaa erikseen ennen arvon liittämistä. Box Shadow -generaattori on hyödyllinen hienovaraisen varjon lisäämiseen liukukappaleelle lisäsyvyyden saamiseksi.

→ Border Radius -generaattori · Box Shadow -generaattori

Usein kysytyt kysymykset

Miksi tulos sisältää HTML:n, ei pelkkää CSS:ää?

Vaihtokytkin ei ole puhtaasti visuaalinen — se perustuu oikeaan <input type="checkbox">-elementtiin, joka on kääritty <label>-elementtiin, sekä radan ja liukukappaleen elementteihin joihin CSS kohdistuu. Ilman tätä täsmällistä rakennetta luodun CSS:n :checked-pohjaisilla valitsimilla ei ole mihin kiinnittyä, joten molemmat osat kopioidaan yhdessä.

Onko tämä kytkin saavutettava?

Kyllä — koska interaktiivinen elementti on oikea valintaruutu (vain visuaalisesti piilotettu tekniikalla joka pitää sen saavutettavuuspuussa, ei display:none-säännöllä), se pysyy Tab-näppäimellä kohdistettavana, Välilyönnillä tai Enterillä kytkettävänä, ja ruudunlukuohjelmat ilmoittavat sen oikein valintaruutuna sen nykyisessä valittu/ei valittu -tilassa.

Voinko käyttää tätä oikeassa HTML-lomakkeessa?

Kyllä. Koska taustalla oleva elementti on tavallinen checkbox-syöte, voit antaa sille name- ja value-attribuutin ja se lähettyy kuten mikä tahansa muu valintaruutu — valitut kytkimet lähettävät arvonsa, valitsemattomat jätetään pois, aivan kuten tavallinen valintaruutu.

Miksi liukukappale liikkuu transform-ominaisuudella left-position-arvon vaihtamisen sijaan?

Transform: translateX() -animointi käsitellään selaimen kompositorissa ja pysyy sulavana myös heikkotehoisemmilla laitteilla, kun taas left-arvon animointi laukaisee asettelun uudelleenlaskennan joka kehyksellä. Luotu CSS käyttää tästä syystä aina transform-ominaisuutta liukuvaan liikkeeseen.

Mitä pyöristysliukusäädin oikeastaan hallitsee?

Se skaalaa sekä radan kulmien pyöristystä että liukukappaleen kulmien pyöristystä yhdessä, suhteessa radan korkeuteen. Arvolla 50 % saat täysin pyöristetyn pillerin ja pyöreän liukukappaleen; pienemmät arvot pitävät muodon suorakulmaisempana neliömäisemmän, sovellusmaisen kytkimen saamiseksi.