Pulsante a disattivazione CSS

I web designer affrontano una varietà di ostacoli ogni volta che si tratta di sviluppare un sito Web reattivo. La selezione tra pulsanti a levetta, caselle di controllo o pulsanti di opzione sembra essere uno di questi problemi. Al contrario, l'utilizzo dei pulsanti a levetta è un'opzione significativamente preferibile. Un pulsante/pulsante a disattivazione è una funzione di progettazione che consente un modo per passare tra due modalità alternative. Ad esempio, è possibile utilizzare l'interruttore a disattivazione per fornire una risposta "sì o no" a una query.

Utilizzando i tag HTML, non esiste un metodo semplice per costruire un pulsante a disattivazione. Per costruire un pulsante di interruttore a levetta, dobbiamo utilizzare lo stile CSS.

Creazione di un pulsante a levetta:

Sebbene non esista un tag HTML nativo per la costruzione di un pulsante di interruttore a levetta, è possibile utilizzare la casella di controllo e successivamente modificarla utilizzando CSS per costruire un pulsante a disattivazione. A tale scopo, useremo l'elemento "input" con la casella di controllo Attributo per creare una "casella di controllo".

L'elemento fornisce controlli interattivi destinati a moduli basati sul Web che ottengono informazioni dagli utenti. A seconda del tipo di funzionalità, l'elemento potrebbe essere di diversi tipi. L'attributo "ID" nell'elemento di input si riferisce a una particolare affermazione del foglio di stile. L'articolo con l'ID specificato può anche essere modificato tramite questo.

La casella di controllo ha un'area molto piccola cliccabile ma l'interruttore a levetta richiede un'area più grande. Quindi, per ingrandire l'area interattiva, racchiuderla in un tag dell'etichetta. All'interno dell '"etichetta", metti un tag "span" per creare un cursore con CSS in seguito. In HTML, il tag è impiegato per aumentare l'efficienza degli operatori del cursore. Il controllo viene attivato quando una persona colpisce i dati all'interno dell'elemento.

Di seguito è riportato il codice CSS, per modificare l'elemento etichetta all'interno di questo script, l'elemento etichetta dell'interruttore è anche collegato all'elemento della casella di controllo HTML tramite il suo ID. Premendo sull'etichetta di una casella di controllo, puoi spuntarla o licenziarla.

Lo snippet sopra creerà una semplice casella di controllo.

Ora useremo lo stile CSS per dargli l'aspetto di un pulsante a disattivazione. Le informazioni di progettazione di una pagina web (CSS) vengono fornite utilizzando l'attributo. Il tag descrive il modo in cui i componenti di HTML dovrebbero visualizzare in un browser. Prendi l'elemento dell'etichetta e regola la sua larghezza, altezza, posizione, colore di sfondo, radius bordo e altre proprietà. L'attributo di larghezza di CSS determina la larghezza del dominio del contenuto di un oggetto. L'altezza di un elemento è determinata dall'attributo di altezza. L'attributo del raggio di confine dà un aspetto arrotondato a un aspetto arrotondato di un elemento. Puoi costruire angoli circolari con un singolo raggio o angoli ellittici con due raggi.

Applicazione della proprietà CSS "Display: Inline-Block", le linee guida di progettazione potrebbero essere aggiunte a specifici componenti HTML. La posizione di un elemento con l'attributo "Posizione: relativo;" è relativo alla sua posizione predefinita. Un elemento relativamente posizionato cambierebbe dal posizionamento predefinito una volta che le proprietà sinistro, superiore, inferiore o destra vengono modificate. Lo faremo apparire come un'area cliccabile dandogli un cursore puntatore e oscurando la casella di controllo con "Cursore: puntatore".

È possibile utilizzare la proprietà del cursore di CSS per indicare il tipo di cursore che l'utente dovrebbe vedere. La larghezza e l'altezza dell'oggetto dell'etichetta sono necessarie poiché definiscono la vera regione cliccabile del pulsante di levetta. Usa "Display: nessuno" per rendere invisibile la casella di controllo standard. Questa proprietà viene utilizzata per nascondere e rivelare le entità senza rimuoverle e sostituirle. Sebbene sia ancora presente all'interno del codice sorgente, l'elemento associato non cattura alcun divario.

Ora abbiamo un'area cliccabile come visualizzato nella schermata di uscita.

Il "pulsante interno" deve ora essere costruito al completamento della "shell esterna". Ora utilizzeremo l'elemento "span" per creare il cursore. Viene utilizzato per layout oggetti tramite raggrupparli insieme. Se si intende evidenziare una determinata frase o un pezzo di materiale, puoi modellarlo avvolgendolo in un elemento span, dandogli un'etichetta di classe e quindi raccogliendolo con i valori delle funzionalità. Assegnalo posizionamento assoluto, superiore e sinistro per metterlo sul componente dell'etichetta. Fornisci questo elemento "span" la "larghezza" e "altezza" che hai impostato per l'elemento etichetta. Faremo ora una maniglia del cursore circolare utilizzando la Pseudo-Classe. Questa classe con l'attributo del contenuto è comunemente esercitata per aggiungere materiale stilistico a un elemento.

Una volta eseguito il codice sopra menzionato, viene generato un cursore rotondo sullo switch.

Con la "scatola esterna" e il "pulsante interno" in posizione, tutto ciò che rimane sarà quello di gestire la commutazione. Possiamo anche includere il nostro attributo "Transizione" che farà passare il cerchio da destra a sinistra quando è cliccata. La "trasformazione: traduzionex (n);", la proprietà è responsabile del movimento effettivo: che sposterà lo pseudo-elemento Una quantità specifica di pixel insieme all'asse X. Abbiamo usato un nuovo identificatore per lo pseudo-elemento ":: prima" e l'attributo "transizione" all'identificatore del cursore corrente. L'attributo ":: prima" genera il primo figlio dell'elemento target come pseudo-elemento. Per accogliere la transizione da sinistra a destra, abbiamo appena incluso l'attributo "TransLateX" al romanzo pseudo-elementi.

Nell'output finale, abbiamo escogitato un pulsante di levetta funzionante.

Aggiunta di testo sul pulsante a levetta:

Come nell'illustrazione precedente, abbiamo creato un semplice pulsante a disattivazione senza testo. Per aggiungere il testo al pulsante a disattivazione, inseriamo semplicemente un ulteriore componente HTML al suo interno e lo progettiamo con un foglio di stile per crearlo appare come un'etichetta.

Utilizzeremo la Pseudo-Classe per costruire etichette che visualizzano o disattivati ​​in base allo stato del pulsante di levetta. Potremmo utilizzare la proprietà dati per includere gli attributi di dati arbitrari sugli elementi HTML. Per la modalità OFF, fisseremo l'opacità su 0 e per la modalità On; Lo regoleremo su 1. L'attributo di opacità in CSS viene utilizzato per indicare la visibilità di un oggetto. In breve, descrive la chiarezza dell'immagine.

Il codice sopra accenderà e spegnerà il testo del pulsante di levetta.

Pulsante attiva quando è stato fatto clic su:

Pulsante a levetta quando è stato cliccato:

Pulsante a levetta con bordo:

Possiamo anche aggiungere bordi al pulsante di levetta che abbiamo appena creato sopra con il testo. Nel frammento di codice di seguito abbiamo impostato tutti gli elementi necessari per generare e visualizzare il bordo per il contenitore del pulsante a levetta e per la palla rotonda interna. A parte questo, dobbiamo anche mettere il colore del bordo. Nel nostro esempio, l'abbiamo impostato su #2196f3 che è un codice di colore esadecimale per applicare il colore blu ciano.

Puoi vedere i bordi apparvero nel pulsante a disattivazione risultante.

Conclusione:

Imparare CSS quando si sforza di diventare uno sviluppatore web è un requisito fondamentale. In questo articolo, abbiamo discusso dell'interruttore a levetta CSS. La prima parte di questo snippet contiene un'introduzione ai pulsanti a disattiva. Abbiamo inoltre inserito il testo sul pulsante a levetta. Nell'ultima parte, ti abbiamo mostrato come aggiungere un bordo al pulsante di levetta. Per l'implementazione degli esempi di codice, abbiamo utilizzato l'editor di testo sublime.