Share
Ti capiterà spesso di utilizzare i cursori di commutazione come un'alternativa di tendenza alle caselle di controllo. Oggi ne creeremo uno usando semplici CSS3 e HTML.
Crea un nuovo documento HTML e aggiungi un campata tag con una classe di alternare-bg. Questa sarà l'area di sfondo per l'interruttore.
Per rendere funzionale l'interruttore, utilizzeremo alcuni elementi invisibili ingressi radio. Questi hanno solo un paio di requisiti:
Userò sopra e via come i miei valori, con un nome di ginocchiera, ma puoi cambiarlo a seconda del tuo utilizzo. Ad esempio, forse cambierai tra sì e no.
Aggiungi il ingresso al campata hai creato prima. Il tuo codice dovrebbe assomigliare a questo:
Accentsconagua
A seconda del tuo utilizzo, potresti anche voler inserire tutto in un modulo.
Il piccolo cerchio che sarà l'interruttore stesso è semplicemente un campata che ci modelleremo in seguito. Dai il campata una classe di interruttore e inseriscilo dopo il ingressi.
Questo è il tuo markup HTML finale:
Per semplificare le cose, inizieremo con il minimo indispensabile per far funzionare questo interruttore. Aggiungi quanto segue al tuo documento CSS (o al tuo stile elemento se stai usando CSS in linea.)
.toggle-bg background: # 222; / * Avrai bisogno di vedere l'area che viene attivata, ma sentiti libero di cambiare il colore * / display: block; / * ... In modo che possiamo impostare altezza e larghezza * / float: sinistra; / * ... In modo che non occupi tutta la larghezza della pagina * / altezza: 7px; / * Puoi cambiarlo più tardi se vuoi * / position: relativo; / * Necessario per consentire allo switch di spostarsi intorno a * / width: 26px; / * Questo può essere modificato anche in seguito * /
Questi ingressi deve essere posizionato in modo assoluto, quindi spostato leggermente per adattarsi correttamente. Quindi gireremo i loro opacità giù verso 0.
.input toggle-bg height: 28px; a sinistra: 0; margine: 0; / * Ripristina margini e riempimento * / opacità: 0; / * Invisibile! * / padding: 0; posizione: assoluta; inizio: -10px; / * Sposta verticalmente * / larghezza: 36px; z-index: 2; / * Vogliamo che l'input sia sopra lo span.switch, che daremo uno z-index di 1 * /
L'interruttore dovrebbe essere quadrato, in modo che possiamo arrotondarlo in un cerchio perfetto usando successivamente a border-radius. Ha bisogno di un posizionamento relativo per essere in grado di muoversi, e dal momento che dobbiamo dargli un altezza e larghezza, sarà un bloccare-elemento di livello galleggiava al sinistra.
.switch background: #ccc; blocco di visualizzazione; fluttuare: a sinistra; altezza: 14px; a sinistra: -1px; / * Questo è il punto di partenza. Quando si aggiunge un raggio di confine, viene mostrato un piccolo frammento di sfondo se usiamo left: 0; quindi -1px è il migliore. * / Position: relativo; inizio: -4px; / * ... Per mantenerlo centrato verticalmente * / larghezza: 14px; z-index: 1; / * Ricorda che deve essere inferiore agli input invisibili * /
CSS3 ha aggiunto il nuovo combinatore generale di fratello, un selettore che usa la tilde (~) per selezionare elementi che condividono lo stesso genitore. L'ordine in cui compaiono nel CSS (prima o dopo la tilde) rispecchia l'ordine in cui compaiono nel DOM.
Abbiamo anche accesso alla nuova pseudo-classe controllata. Questo ci permetterà di indirizzare in modo specifico il (attualmente invisibile) ingresso radio quello è controllato ...
Innanzitutto, useremo questi selettori per ripristinare la posizione iniziale dell'interruttore a levetta.
.input toggle-bg: controllato ~ .switch left: -1px; / * posizione di commutazione iniziale * /
Successivamente, diremo al browser la posizione di commutazione finale.
.input toggle-bg ~: controllato ~ .switch left: 13px; / * posizione di commutazione relativa finale * /
Alla fine, metteremo il : selezionata ingresso dietro l'incontrollato ingresso e l'interruttore in modo che il secondo ingresso può essere cliccato.
.input toggle-bg: controllato z-index: 0;
A questo punto dovrebbe assomigliare a questo:
Ecco il CSS completo e non programmato:
.toggle-bg background: # 222; / * Avrai bisogno di vedere l'area che viene attivata, ma sentiti libero di cambiare il colore * / display: block; / * ... In modo che possiamo impostare altezza e larghezza * / float: sinistra; / * ... In modo che non occupi tutta la larghezza della pagina * / altezza: 7px; / * Puoi cambiarlo più tardi se vuoi * / position: relativo; / * Necessario per consentire allo switch di spostarsi intorno a * / width: 26px; / * Questo può essere modificato anche in seguito * / .toggle-bg input height: 28px; a sinistra: 0; margine: 0; / * Ripristina margini e riempimento * / opacità: 0; / * Invisibile! * / padding: 0; posizione: assoluta; inizio: -10px; / * Sposta verticalmente * / larghezza: 36px; z-index: 2; / * Vogliamo che l'input sia sopra lo span.switch, che daremo uno z-index di 1 * / .switch background: #ccc; blocco di visualizzazione; fluttuare: a sinistra; altezza: 14px; a sinistra: -1px; / * Questo è il punto di partenza. Quando si aggiunge un raggio di confine, viene mostrato un piccolo frammento di sfondo se usiamo left: 0; quindi -1px è il migliore. * / Position: relativo; inizio: -4px; / * ... Per mantenerlo centrato verticalmente * / larghezza: 14px; z-index: 1; / * Ricorda che deve essere al di sotto degli input invisibili * / .toggle-bg input: checked ~ .switch left: -1px; / * posizione toggle iniziale * / .toggle-bg input ~: checked ~ .switch left: 13px; / * posizione toggle relativa finale * / .toggle-bg input: checked z-index: 0;
Ora hai un cursore quadrato dall'aspetto stupido, quindi completiamo gli angoli! Aggiungeremo un border-radius di 8px al campata con una classe di alternare-bg e al campata con una classe di interruttore.
border-radius: 8px;
Nota: come con opacità e il transizione in arrivo, non sto usando nessun prefisso del fornitore qui per il tutorial, ma ne avrai bisogno per la compatibilità con alcuni browser più vecchi.
transizioni dovrebbe essere aggiunto al campata con una classe di interruttore. Sentiti libero di regolare le impostazioni. Sinistra: è l'unica parte della seguente transizione che non può essere modificata.
transizione: sinistra .2s facilità;
Ora che tutte le funzionalità sono disponibili, è possibile personalizzare tutto a proprio piacimento. Puoi aggiungere un'ombra di casella e un gradiente di sfondo al campata con una classe di alternare-bg o all'interruttore. Perché è rotondo, i gradienti radiali tenderanno a guardare meglio sull'interruttore.
Ecco le mie impostazioni, ma ti preghiamo di cambiarle per adattarle al tuo stile e al tuo progetto.
Dai il corpo uno sfondo bianchiccio e un margine in modo che l'interruttore non sia corretto nell'angolo:
body background: # f6f8f9; margine: 200 px;
Aggiungi quanto segue agli stili per .alternare-bg:
sfondo: gradiente lineare (in basso, # f6f8f9 0%, # eebee 50%, # d7dee3 51%, # f5f7f9 100%); box-shadow: 0 1px 0 #ffff, inset 0 0 2px # d7dee3, inset 0 1px 0 # d7dee3, inset 0 1px 5px # d7dee3;
Aggiungi quanto segue agli stili per .interruttore:
sfondo: gradiente radiale (ellisse al centro, #ffffff 0%, # fefefe 50%, # fdfdfd 51%, # ffffff 100%); box-shadow: 0 1px 1px # 65727b, 0 0 1px # b6bdc2;
Per un interruttore di stile iOS, in cui lo switch ha le stesse dimensioni del suo sfondo, cambia lo stile per .interruttore:
altezza: 30 px; inizio: 0; larghezza: 30 px;
Cambia la posizione di commutazione finale da lasciare 41 pixel:
.input toggle-bg ~: checked ~ .switch left: 41px;
Cambia le dimensioni del ingressi e rimuovere lo spostamento verticale cambiando il seguente negli stili per .input toggle-bg:
altezza: 30 px; inizio: 0; larghezza: 70 px;
Cambia tutto raggio di confine a 30px invece di 8px.
Mancia: mantieni il border-radius valore uguale al altezza dell'elemento che modifica.
E infine, cambia il altezza e larghezza di .alternare-bg per adattarsi agli elementi modificati:
altezza: 30 px; larghezza: 70 px;
Congratulazioni! Ora puoi creare commutatori senza Javascript con alcuni nuovi fantastici CSS3. Probabilmente vorrai cambiare i gradienti di sfondo e, fortunatamente, c'è un ottimo strumento online per aiutarti; controlla l'editor di sfumature gratuito di Colorzilla. C'è anche un'app per Mac chiamata Gradient che funziona in modo simile.
Poiché questo metodo si basa su alcune funzionalità CSS3 completamente nuove, i browser meno recenti non sono supportati. Supporto del browser per : selezionata la pseudo-classe include quanto segue:
E i seguenti browser hanno il supporto per il combinatore fratello generico:
Ho creato tre jsFiddles per farti sperimentare da solo. Il primo include il minimo CSS necessario per avere un cursore di attivazione / disattivazione funzionante. Il secondo, molto più brillante, include tutto dal primo più alcuni stili e transizioni extra. L'ultimo è quello che sto definendo un "commutatore di stile iOS" poiché, come gli interruttori su iOS, l'altezza dello switch è uguale all'altezza dello sfondo di commutazione.
Poiché questo è tutto il CSS, ci sono alcune varianti che puoi creare. Ecco alcuni per iniziare:
etichetta all'interno di un grande interruttore..alternare-bg quando un bambino ingresso è controllato O, ancora meglio, capire se questo è possibile usando nient'altro che i CSS.etichetta a ogni ingresso all'interno di uno stile iOS attiva e mostra e nasconde selettivamente etichette usando jQuery.Nota: quando si crea un etichetta per il toggle's ingressi radio, dovrai usare JavaScript per mostrare e nascondere l'inattivo ingresso di etichetta se desideri essere in grado di usare il etichetta come un modo di deselezionare il ingresso. Altrimenti, sarai in grado di farlo dai un'occhiata (ma non deselezionare) il ingresso premendo il tasto etichetta.
Spero tu abbia trovato utile questo tutorial. Grazie per aver letto!
