Interruttore a disattivazione CSS
Esempio 1
Scriveremo un po 'di codice HTML per la creazione e lo styling azionario in CSS. Per dimostrare gli esempi dati, stiamo usando il codice Visual Studio. Di conseguenza, apriremo il nuovo file e sceglieremo la lingua "HTML", che segue nella creazione di un file HTML. Quindi iniziamo a scrivere il codice nel file creato qui. Dobbiamo salvare questo codice quando è finito e il ".L'estensione del file HTML ”viene automaticamente aggiunta al nome del file. Creiamo anche un po 'di testo che vogliamo presentare in grassetto, quindi stiamo usando ""E scrivi la linea all'interno di questi""Tag di apertura e chiusura. Successivamente, creeremo un interruttore a disattivazione qui in questo codice che rappresenta OFF ON. Ci permetterà di spegnere o sugli interruttori. Ora ci stiamo muovendo verso il codice CSS per dare un po 'di stile a questo interruttore a levetta.
Innanzitutto, allineiamo tutti gli elementi del corpo usando "allineamento del testo" al "centro" e applichiamo questa proprietà al "corpo."Quindi, cambia il" colore "dell'intestazione su" verde "per renderlo attraente. Ora, dobbiamo modellare il "attivatore."Usiamo" attivatore "e quindi utilizziamo le proprietà di styling qui. Il "display" che stiamo usando qui è "Inline-block."Abbiamo anche impostato la sua" larghezza "e" altezza "su" 100px "e" 52px ", rispettivamente. Il "colore di sfondo" di questo interruttore è "rosso" e il suo "raggio di confine" è "30px", quindi i suoi bordi sono curvi.
Quindi abbiamo anche impostato un "bordo" attorno a questo pulsante a levetta di larghezza "2px" in tipo "solido" e anche in colore "grigio". Dopo averlo styling, useremo il selettore "dopo" con questo "attivatore" e come sappiamo che dobbiamo avere "contenuto" quando usiamo questo selettore "dopo" in CSS. Dopo questo contenuto, stiamo impostando la sua "posizione" qui su "assoluto" e la "larghezza" e "altezza" sono "50px" ciascuno. Questa volta il "colore di sfondo" è "grigio."Abbiamo anche impostato il suo" top "e" a sinistra "su" 1px "per ciascuno di essi. Stiamo applicando la "transizione" su questo interruttore di "0.5s ". Lo styling per il "disattivazione: dopo" è completato qui e modelleremo un po 'il paragrafo usando due proprietà all'interno delle parentesi graffe di "P."
Cambiamo solo la sua "famiglia di carattere" in "algerino" e poi "audace" questo paragrafo usando la proprietà "wont-weight". Stiamo impostando la "sinistra" su "45px" in modo che si muova "45px" quando questo interruttore viene controllato. E il suo colore cambia in "verde."Inoltre, imposta questo" display "della" casella di controllo "su" Nessuno."
Mostriamo anche questo interruttore nell'output di seguito e nella prima uscita, puoi vedere che abbiamo due possibilità qui in questo switch. In questo screenshot, l'interruttore è "spento" e il suo colore è "rosso."
Nel secondo screenshot, questo interruttore è "acceso" ed è di colore "verde". L'off è scritto sul lato destro dell'interruttore, quindi se vogliamo disattivare questo interruttore, allora facciamo clic su questo interruttore per spostarlo sul lato destro per offuscare questo interruttore.
Esempio 2
Nel secondo esempio, creeremo due diversi interruttori a levetta. Creiamo due switch One Switch è chiamato "Iscriviti" e l'altro switch è chiamato "Newsletter" qui. Quindi modelleremo questi switch nel file CSS.
Stiamo disegnando il "corpo" dell'HTML, quindi abbiamo impostato il suo "margine" e "imbottitura" su "0", e il colore di sfondo per questo è "nero", come qui, "#151515" è il codice per il nero."Stiamo impostando il Div, che si chiama" Centro ", al centro" Position "" Absolute ", quindi tutti gli elementi all'interno di questo Div rendono il" centro "della pagina. Il "top" e "in basso" del centro di posizione assoluto sono impostati come "50px" per ciascuno, e quindi utilizziamo la proprietà "trasformata trasparente" su "(-50px, -50px)".
Quando usiamo tutti questi, tutti gli elementi sono impostati al centro in verticale e orizzontale. Quindi, modelliamo "Input [type = checkbox]" usando questo. Il "margine" che utilizziamo per questo è "10px" e "relativo" in "posizione."La" larghezza "di questa casella di controllo è" 120px "e anche" 40px "nella sua altezza. Abbiamo anche impostato la sua "Webkit-Appearance" su "Nessuno."Stiamo usando il suo" sfondo "nella forma" gradiente lineare ". Lo "contorno" per questo è anche "nessuno" e per fare la sua curva dei bordi, stiamo usando la proprietà "radius di frontiera" qui e la imposta su "20px". Applichiamo "Box-Shadow" e impostiamo il suo valore su "0 0 0 4px". Quindi modelliamo la casella di controllo quando viene controllata e impostiamo il suo "sfondo" su "gradiente lineare", che è "0deg" e "arancione."Usiamo lo stesso" box-shadow "qui che abbiamo usato sopra, e questo è per la" nth-of-type (1) ". La "NTH-of-Type" è un selettore per la selezione di uno o più elementi. Acconciamo anche la casella di controllo controllata per la "NTH-of-Type (2)" e impostiamo il suo "sfondo" sul "gradiente lineare" di "0deg" e "blu."Abbandoniamo anche la casella di controllo quando non è controllata. Quindi qui, utilizziamo il selettore "prima" e il selettore "dopo" o "prima" deve avere un "contenuto."La" posizione "che abbiamo impostato qui è" assoluta "e la sua" top "è" 0 "e anche la stessa per la" sinistra."È" 80px "nella sua" larghezza "e" 40px "in" altezza."Usiamo di nuovo il" gradiente lineare "per" sfondo."Questa volta usiamo il colore" nero "e" grigio ". Usiamo anche la proprietà "trasforma" e "scala" su x, y come "0.98, 0.96 ". Abbiamo impostato la sua proprietà "transizione" su "0.5s ". La "sinistra" è impostata su "40px" prima di essere controllata. Usiamo anche il selettore "dopo" e ci stile anche.
All'interno di questa selezione "dopo", impostiamo per la prima volta il "contenuto" e la sua "posizione" come "assoluto."I suoi" top "impostano come" 50% - 2px "e" Left "è" 70px ". Abbiamo anche impostato la sua "larghezza" e "altezza" su "4px" ciascuno. Abbiamo impostato il suo "background" e usiamo di nuovo il "gradiente lineare". Il "50%" del "raggio di confine" viene applicato qui, quindi i suoi bordi appaiono in una forma curva. La proprietà "Transizione" è anche impostata su "0.5s ”, che viene utilizzato per il controllo di una velocità di animazione di 0.5sec. Nel selettore "dopo", la "sinistra" è impostata su "110px".
Vogliamo modellare le intestazioni usando "H1" e usare alcune proprietà qui. Il "margine" è "0" e "imbottitura" è anche "0". Usiamo la "Family Font-Family" "sans-serif" per questi titoli. Inoltre, allinea questi titoli al "centro."Il carattere" colore "di queste intestazioni è di dimensioni" bianco "e" 16px ". Abbiamo anche impostato la "imbottitura" superiore e inferiore su "15px" e "0px" per sinistra e destra. Usiamo "maiuscolo" in modo che il testo di intestazioni venga convertito in maiuscolo e la "spaziatura delle lettere" è "4px" per tutte le intestazioni.
Abbiamo fornito due screenshot qui come output. Il primo output mostra prima che questo interruttore a levetta viene selezionato e la seconda screenshot è quando abbiamo controllato entrambi gli interruttori a levetta.
Conclusione
Abbiamo presentato questa guida per spiegare l'interruttore a levetta in CSS e come progettare e modellare l'interruttore a levetta in CSS. Abbiamo discusso che utilizziamo l'interruttore a levetta quando vogliamo scegliere tra on/off e sì/no. Abbiamo esplorato due codici qui e abbiamo spiegato in dettaglio tutte le proprietà che utilizziamo nei nostri codici. Dopo aver provato i codici in questa guida, imparerai facilmente come funzionano questi interruttori a disattiva.