Interruttore CSS

L'interruttore in CSS viene utilizzato per consentire all'utente di scegliere tra due stati: acceso e spento. Spostiamo anche l'interruttore a sinistra oa destra. Questi switch sono disponibili sui nostri siti Web, app mobili e software. Gli interruttori vengono utilizzati quando dobbiamo spegnere qualcosa o acceso, o quando scegliamo sì o no. Possiamo creare switch di diverse forme e dimensioni in CSS.

Esempio 1:

Sviluppiamo alcuni codici HTML per realizzare gli switch e modellarli con CSS. Il codice Visual Studio viene utilizzato per dimostrare gli esempi presentati. Di conseguenza, apriamo il nuovo file e selezioniamo "HTML" come lingua.Ciò si traduce nella produzione di un file HTML. Quindi, iniziamo a scrivere un codice nel file creato. Quando abbiamo finito, salviamo il codice con ".estensione del file html ". Dopodiché, in questo codice, progettiamo uno switch che indica o acceso. Ci consente di accendere o spegnere l'interruttore. Ora andiamo al codice CSS per dare questo switch con alcuni design.

Usiamo la proprietà "allineate al testo" per il "corpo". Quindi, tutto il corpo dell'HTML è reso al "centro" della pagina. Cambiamo anche il "colore" della nostra intestazione su "verde". Quindi, modelliamo il "attivatore". Lo facciamo usando il "attivatore" e le proprietà di stile. La "posizione" di questo interruttore è impostato su "relativo". Utilizziamo il "blocco inline" come "display". La sua "larghezza" e "altezza" sono state impostate allo stesso modo su "100px" e "52px", rispettivamente. Il "colore di sfondo" di questo levetto è "rosso" e il suo "raggio di confine" è "30px", indicando che i suoi bordi sono curvi.

Quindi, aggiungiamo un "bordo" attorno a questo pulsante a levetta con una larghezza di "2px" e un colore "grigio". Dopo averlo styling, utilizziamo il selettore "dopo" con questo "attivatore". Come tutti sappiamo, quando si utilizza il selettore "dopo" in CSS, dobbiamo avere un "contenuto."Per impostare la" posizione "di questo contenuto su" assoluto "e" larghezza "e" altezza "su" 50px "ciascuno. Questa volta, il "colore di sfondo" è impostato su "grigio".

Per ciascuno di essi, abbiamo inoltre impostato la "parte superiore" e "a sinistra" su "1px". Usiamo la "transizione" su questo "0.5s ”a levetta. Lo styling per il "levegle: dopo" è ora completo. Usiamo due proprietà all'interno delle parentesi graffe di "P" per modellare un po 'più di più il paragrafo. Aggiorniamo semplicemente la "famiglia di font" del paragrafo in "Arial" e utilizziamo la proprietà "font-peso" per "grassetto". Quando questo interruttore viene controllato, cambiamo la proprietà "a sinistra" in "49px" in modo che si sposti su "49px". Sposta anche il suo colore su "verde". Inoltre, imposta "nessuno" per il "display" della "casella di controllo".

L'interruttore è "spento" e il colore è "rosso" in questo screenshot. Ora abbiamo uno screenshot seguente:

L'interruttore è "acceso" ed è colorato "verde" nel secondo screenshot. La parola "off" è stampata sul lato sinistro dell'interruttore. Se vogliamo spegnerlo, facciamo clic su di esso e lo spostamo sul lato destro.

Esempio n. 2:

In questo esempio, creiamo due switch. Questi sono diversi dal precedente switch che abbiamo creato nel primo esempio. Facciamo due switch qui.

Accogliamo il corpo utilizzando le diverse proprietà. Abbiamo impostato il "dimensionamento della scatola" su "bordo-box" e utilizziamo la proprietà "carattere familiare" e utilizziamo il carattere "Arial" per questo. Abbiamo anche impostato le dimensioni su "100%". Usiamo il "*" con selettori "dopo" e "prima" in modo che seleziona tutti gli elementi e applica la proprietà data a tutti. "Ereditiamo" il "dimensionamento della scatola". E la "imbottitura" e il "margine" sono entrambi impostati su "0". Ora, modelliamo la "metà" utilizzando la proprietà "display" come "flex". Usiamo il "Centro" sia per "align-eled" che per "giustificare il contenuto". Abbiamo impostato la dimensione del carattere "1em" per "imbottitura".

Quindi, modelliamo il "rocker" che è il primo interruttore. Il "display" per questo è "inline-block" e la sua "posizione" è "relativa". La "dimensione del carattere" per il primo interruttore è "2em" e ossee "in grassetto" nella sua "ponderazione del carattere". Il "allineamento del testo" è SE su "Centro" e la "trasformata di testo" è impostata su "maiuscola". Il "colore" è impostato su "grigio". La "larghezza" e "altezza" sono impostate su "7em" e "4em", rispettivamente. Il "flusso eccessivo" è "nascosto". Il "fondo al confine" è "0.5em ". E due impostare il colore "bianco" su un tipo "solido".

Quindi, arriva il "rocker-bad" che è il secondo pulsante. Per questo, abbiamo impostato la "dimensione del carattere" su "0.75em "e il suo" margine "in" 1em ". Utilizziamo il selettore "prima" con il nostro primo switch "rocker". E metti il ​​"contenuto" perché è obbligatorio durante l'utilizzo del selettore "prima" e "dopo". Quindi, abbiamo impostato la sua "posizione" su "assoluto". Il suo "top" è impostato su "0.5em ". I "sinistra", "destra" e "in basso" sono tutti impostati su "0". Il suo "sfondo" è "grigio", il "bordo" è "bianco", la larghezza è "0.5em "e" solido "nel tipo. Il "confine inferiore" è "0".

Ora usiamo il "Input Rocker". Per questo, abbiamo impostato "opacità", "larghezza" e "altezza" su "0". Ora, modeliamo il "passaggio-sinistra" e "interruttore-destro" nelle stesse parenti ricci. Abbiamo impostato il suo "cursore" su "puntatore" e la "posizione" è "assoluta". Il "display" che abbiamo impostato è "Flex". "Align-Etim" e "Giustify-Content" sono entrambi impostati sul "Centro". L '"altezza" che abbiamo impostato qui è "2.5em "e la" larghezza "è" 3em ". Dobbiamo impostare la "transizione" per questo su "0.2s ".

Ora, utilizziamo separatamente il "passaggio-sinistra" e "switch-righ" in cui utilizziamo la proprietà "trasforma". Per questo, abbiamo prima impostato "altezza", "larghezza", "sinistra" e "in basso" su "2.4em "," 2.75em "," 0.85em "e" 0.4em ", rispettivamente. Aggiungiamo il "colore di sfondo" a "#ddd". E usiamo la proprietà "trasforma" e "ruotiamo" su "15deg" e "inclinata" su "15deg". Ora abbiamo il "switch-destra" e progettalo impostando la proprietà "giusta" su "0.5em "e impostare il suo" fondo "su" 0 ". Lo "sfondo" è impostato su "rosso". Sullo sfondo "rosso", abbiamo impostato la proprietà "bianca" per il carattere "colore". Usiamo il selettore "prima" con "switch-sinistra" e "switch-destro". Quindi, per questo selettore "prima", utilizziamo il "contenuto". La sua "posizione" è impostata su "assoluto".

Quindi abbiamo anche impostato la sua "larghezza", "altezza" e "fondo". Il "colore di fondo" qui è "#ccc" e usiamo la proprietà "trasforma" e "skewy (-65deg)". Ora abbiamo impostato la proprietà "a sinistra" su "-0.4em ”all'interno utilizzando il selettore“ prima ”con" Switch-Left ". Usiamo anche il selettore "prima" con il "switch-destra" separatamente e impostiamo la proprietà "giusta" su "-0.375em ". Il suo "colore di sfondo" è "trasparente" e usiamo la "trasformazione" in "snoda" su "65DEG".

Ora creiamo un effetto quando è "controllato". Il "colore di fondo" è "trasparente" e la sua larghezza quando viene controllato è impostato su "3.0833em ". Quindi, utilizziamo "Selezionati" con "Switch-Left" e "Switch-Right". Progettiamo o modelliamo questo aggiungendo il "colore di sfondo" e il carattere "colore" e impostandoli come "#ddd" e "#888". Qui, i selettori "in basso" e "giusto" sono impostati su "0.4em "e" 0.8em ". Quindi, usiamo la "trasformazione" e "ruotiamo" le peroperatori e lo "inclina" su "-15deg" per entrambi. Utilizziamo la proprietà "selezionata" con "Switch-Left" e "Switch-Right". E usa il selettore "prima" all'interno delle parentesi graffe e imposta il suo "colore di fondo" su "#ccccc". Quindi, impostiamo il "colore" del carattere su "bianco" quando viene controllato e "grigio" prima che venga controllato.

L'uscita rende due interruttori: il primo interruttore ha/spegnimento e il secondo switch ha sì/no. Nella prima immagine, puoi vedere che il primo interruttore è "acceso" e il suo colore è "verde" mentre il secondo interruttore è sul "no" e il suo colore è "rosso".

Nella seconda immagine, controlliamo il primo interruttore a "Off" e il secondo interruttore a "Sì". Quindi, il primo interruttore appare "Off" e "Red". Il secondo interruttore è "sì" questa volta e sembra "verde".

Conclusione

Abbiamo creato questo tutorial per mostrarti cos'è uno switch e come progettare e modellare un interruttore in CSS. Come affermato in precedenza, l'interruttore viene utilizzato per scegliere tra acceso e off e sì/no. Finora abbiamo esaminato i due diversi esempi e abbiamo attraversato tutte le proprietà. Dopo aver sperimentato i codici in questo tutorial, sarai in grado di capire come funzionano gli switch in CSS e come costruire switch per il tuo sito Web o progetti con facilità.