Come creare un'interfaccia utente di Switch utilizzando la maschera CSS

Nell'elaborazione delle immagini, mascheratura è una tecnica che ti permette di nascondi un'immagine con un altro. Una maschera viene utilizzata per creare una parte di un'immagine guardare attraverso. È possibile eseguire il mascheramento utilizzando i CSS con l'aiuto delle proprietà di mascheramento.

Nel post di oggi creeremo un'immagine mascherata utilizzando due immagini PNG e tecniche di mascheramento CSS e consentiremo agli utenti di gestire i due stati dell'immagine (giorno e notte) con l'aiuto di un'interfaccia utente dell'interruttore.

A causa di alcuni problemi di compatibilità con il browser, non tutte le proprietà di mascheratura sono supportate in tutti i browser (a partire da giugno 2016): lo mostrerò due tecniche per aggiungere maschere, uno per i browser basati su Webkit e uno per Firefox. I primi due passaggi di questo tutorial in tre passaggi sono gli stessi per tutti i browser, ma il terzo passaggio presenterà una differenza.

Passaggio 1. Creare un interruttore di base

Poiché un interruttore tipico ha due stati con solo uno abilitato alla volta, puoi usare a gruppo di pulsanti radio di due per creare i componenti di lavoro dello switch. Posiziona ciascun pulsante di opzione all'estremità sinistra e destra dell'elemento principale.

I gruppi di pulsanti radio vengono creati dando lo stesso ad ogni pulsante di opzione nome attributo. In un gruppo di pulsanti di opzione, solo un pulsante di opzione può essere controllato alla volta.

Iniziamo con il seguente HTML e CSS:

HTML

CSS

Nel CSS qui sotto, ho usato il posizionamento assoluto per posizionare i pulsanti di opzione sullo schermo esattamente dove voglio.

#outerWrapper width: 450px; altezza: 90 px; imbottitura: 10px; margine: 100px auto 0 auto; border-radius: 55px; box-shadow: 0 0 10px 6px #EAEBED; sfondo: #fff;  #innerWrapper height: 100%; border-radius: 45px; overflow: hidden; position: relative;  .radio width: 90px; height: 100%; position: absolute; margin: 0; opacità: 0;  #rightRadio right: 0;  .radio: not (: checked) cursor: pointer;  

Ho aggiunto il Opacità: 0 regola al .Radio classe per nascondi i pulsanti di opzione. L'ultima regola nel blocco di codice qui sotto, cursore: puntatore; mostra il cursore puntatore per il pulsante di opzione deselezionato, in modo che gli utenti sappiano quale pulsante fare clic per alternare lo stato dell'interruttore.

Passaggio 2. Aggiungi pelli allo switch

In questo passaggio, ne aggiungeremo due

i tag per le due skin sotto i pulsanti di opzione nel nostro file HTML e un'immagine di sfondo su ogni skin nel nostro CSS.

Sto usando "Day" e "Night" come i due stati dell'interruttore, ispirati a un Dribbble girato da Minh Killy Le.

HTML

CSS

#daySkin background-image: url ('day.png');  #nightSkin background-image: url ('night.png');  .skin width: 100%; altezza: 100%; pointer-events: none; posizione: assoluta; margine: 0; 

Il pointer-events: none; la regola viene aggiunta agli skin in modo che gli eventi click sullo switch possano passare attraverso di loro, e raggiungere i pulsanti radio.

Con la proprietà CSS degli eventi puntatore è possibile impostare le circostanze in cui un elemento grafico può essere mirato dagli eventi del mouse.

In alternativa al codice sopra, due tag (con immagini di origine) all'interno del

i tag possono anche funzionare. Saranno il skin per i due stati dell'interruttore.

Passaggio 3a. Aggiungi maschera (versione Webkit)

Per Chrome e altri browser basati su Webkit, userò il maschera-image Proprietà CSS, che - a partire dalla stesura di questo post - funziona solo con -webkit prefisso nei browser Webkit. Il maschera-image proprietà ti consente specificare l'immagine da essere usato come il maschera.

In generale, ci sono due tipi di mascheramento: luminanza e alfa.

• Nel mascheramento della luminanza, la parte scura dell'immagine maschera nasconde l'immagine mascherata: più scura è una porzione nell'immagine maschera, la parte più nascosta è nell'immagine mascherata.
• Nel mascheramento alfa, la parte trasparente dell'immagine maschera nasconde l'immagine mascherata: più una porzione è trasparente nell'immagine maschera, più nascosta è la porzione nell'immagine mascherata.

In Chrome (dalla versione 51.0.2704.103, Win10), alfa sembra funzionare al momento.

In CSS, alfa e luminanza sono i valori del maschera tipo proprietà.

Ecco il CSS che aggiunge una maschera alle immagini di sfondo nei browser Webkit:

CSS

#nightSkin background-image: url ('night.png'); maschera-tipo: alfa; / * cerchio trasparente con porzione rimanente opaca * / -webkit-maschera-immagine: gradiente radiale (cerchio a 45px 45px, rgba (0,0,0,0) 45px, rgba (0,0,0,1) 45px) ;  / * Quando skin giorno selezionato * / #leftRadio: checked ~ # nightSkin mask-type: alpha; / * cerchio opaco con porzione rimanente trasparente * / -webkit-maschera-immagine: gradiente radiale (cerchio a 405px 45px, rgba (0,0,0,1) 45px, rgba (0,0,0,0) 45px) ; 

Ho usato il -webkit-maschera-image proprietà per creare l'immagine maschera iniziale. Il suo valore usa il radiale gradiente () Funzione CSS utilizzata per creare un'immagine da una forma predefinita, una sfumatura radiale e il centro del gradiente.

Per la pelle della notte, ho creato un cerchio trasparente e ho reso opaca la parte restante del contenitore. Per il giorno pelle, ho fatto il contrario: creato un cerchio opaco con il radiale gradiente () funzione e ha reso trasparente la parte rimanente.

Sebbene non sia ancora supportato nei browser Webkit, ho aggiunto il maschera tipo proprietà al CSS per riferimento futuro.

Come puoi vedere sopra, il bordo del cerchio non è molto liscio. A nascondere i bordi grezzi, aggiungere un

dopo le pelli a forma di cerchio (stesse dimensioni del cerchio maschera) con un'ombra di casella. L'ombra nasconderà i bordi grezzi della maschera del cerchio.

HTML

CSS

#switchBtnOutline width: 90px; height: 100%; border-radius: 45px; box-shadow: 0 0 2px 2px grigio, 0 0 10px grigio; puntatore-eventi: nessuno; position: absolute; margin: 0;  / * Posiziona #switchBtnOutline all'estremità destra quando è selezionato skin day * / #leftRadio: checked ~ # switchBtnOutline right: 0; 

Passaggio 3b. Aggiungi maschera (versione di Firefox)

Il maschera-image La proprietà CSS è in realtà a proprietà a mano lunga, ed è parte della proprietà stenografica maschera che ti consente di specificare l'immagine da usare anche come maschera. Mentre maschera-image non è ancora supportato in Firefox, maschera è.

sebbene il maschera la proprietà dovrebbe accettare un'immagine creata con il radiale gradiente () La funzione CSS è un valore, proprio come il maschera-image proprietà ha fatto, non c'è ancora un supporto per quello in Firefox.

Quindi, invece di a radiale gradiente () immagine, usiamo un'immagine SVG come immagine della maschera con il tipo di maschera luminanza.

L'immagine SVG sopra sembra una combinazione di a rettangolo bianco e a cerchio nero. Aggiungi questo e un altro con a rettangolo nero e a cerchio bianco come maschere per l'HTML che abbiamo usato nella versione Webkit.

HTML

Sostituire (o combinare con) il codice CSS per #nightSkin abbiamo usato nella versione Webkit con il seguente codice. E hai finito.

Ora abbiamo due diverse immagini di maschera (gradiente CSS e SVG), due diversi tipi di maschera (Alfa e Luminanza) e sia il supporto per Webkit che Firefox.

CSS

#nightSkin background-image: url ('night.png'); tipo di maschera: luminanza; Maschera: url (#leftSwitchMask);  #leftRadio: checked ~ # nightSkin mask-type: luminance; Maschera: url (#rightSwitchMask); 

Guarda la demo

• dimostrazione
• Scarica fonte

Come creare un punto di ripristino del sistema in Windows 7

Come creare manualmente un punto di ripristino del sistema in XP

Come creare una password sicura (e ricordarla)