Tutorial CSS3 Crea un pulsante On / Off elegante
L'utilizzo di un pulsante è, finora, il modo preferito per interagire con un materiale elettronico; come la radio, la TV, il lettore musicale e persino uno smartphone con una funzione di comando vocale ha ancora bisogno di almeno uno o due pulsanti fisici.
Inoltre, in questa era digitale, il pulsante si è evoluto anche nella sua forma digitale, il che lo rende più interattivo, dinamico e reale facile da realizzare, rispetto al pulsante fisico.
Quindi, stavolta, creeremo un pulsante fluido e interattivo basato su questo eccellente design su Dribbble che utilizza solo CSS.
Bene, cominciamo.
HTML
Inizieremo il pulsante posizionando il seguente markup sul nostro documento HTML. È davvero semplice, il pulsante sarebbe basato su un tag di ancoraggio, abbiamo anche a campata accanto ad esso per creare la luce indicatore, e poi sono avvolti insieme in un HTML5 sezione etichetta.
& # XF011;
Ecco come appare inizialmente il nostro pulsante.
Stile di base
In questa sezione, inizieremo a lavorare su stili.
Applichiamo per la prima volta questo sfondo scuro da Sottile Motivo sul documento del corpo e centriamo il sezione. Quindi, rimuoveremo anche il puntinato schema sopra al :messa a fuoco e :attivo collegamento.
body background: url ('images / micro_carbon.png'); section margin: 150px auto 0; larghezza: 75 px; altezza: 95 px; posizione: relativa; allineamento del testo: centro; : attivo,: focus struttura: 0; Utilizzo del carattere personalizzato
Per l'icona del pulsante, utilizzeremo un carattere personalizzato da Font Awesome piuttosto che un'immagine. In questo modo l'icona sarà facilmente adattabile in stile e scalabile attraverso il foglio di stile.
Scarica il font, salva i file dei font (eot, woff, ttf e svg) nel font cartella, quindi inserire il codice seguente nel foglio di stile per definire una nuova famiglia di caratteri.
@ font-face font-family: "FontAwesome"; src: url ("fonts / fontawesome-webfont.eot"); src: url ("fonts / fontawesome-webfont.eot? #iefix") format ('eot'), url ("fonts / fontawesome-webfont.woff") format ('woff'), url ("font / fontawesome- webfont.ttf ") format ('truetype'), url (" fonts / fontawesome-webfont.svg # FontAwesome ") format ('svg'); font-weight: normal; stile carattere: normale; 
Il icona di potenza che abbiamo bisogno di questo pulsante è rappresentato nel numero Unicode F011; se osservi da vicino il codice HTML sopra, abbiamo inserito questo carattere numerico & # XF011; all'interno del tag di ancoraggio, ma poiché non abbiamo definito l'abitudine famiglia di font nello stile del pulsante, l'icona deve ancora essere visualizzata correttamente.
Ulteriori letture: Unicode e HTML: caratteri del documento
Disegnare il pulsante
Prima di tutto, dobbiamo definire l'abitudine famiglia di font per il pulsante.
Il nostro pulsante sarà un cerchio, possiamo ottenere l'effetto del cerchio usando il border-radius proprietà e impostare il valore a, almeno, metà del pulsante larghezza.
Dal momento che stiamo usando un font per l'icona, possiamo facilmente impostare il colore e aggiungi text-shadow anche per l'icona nel foglio di stile.
Successivamente, creeremo anche un effetto smussato per il pulsante. Questo effetto è piuttosto complicato. Innanzitutto, dobbiamo applicare background-color: rgb (83,87,93); per la base colore del pulsante, quindi aggiungeremo fino a quattro strati di box-ombre.
una font-family: "FontAwesome"; colore: rgb (37,37,37); text-shadow: 0px 1px 1px rgba (250,250,250,0.1); font-size: 32pt; blocco di visualizzazione; posizione: relativa; decorazione del testo: nessuna; background-color: rgb (83,87,93); box-shadow: 0px 3px 0px 0px rgb (34,34,34), / * 1 ° ombra * / 0px 7px 10px 0px rgb (17,17,17), / * 1 ° ombra * / riquadro 0px 1px 1px 0px rgba (250 , 250, 250, .2), / * 3a ombra * / inset 0px -12px 35px 0px rgba (0, 0, 0, .5); / * 4th Shadow * / width: 70px; altezza: 70 px; confine: 0; border-radius: 35px; allineamento del testo: centro; altezza della linea: 79 px;
C'è anche un cerchio più grande all'esterno del pulsante e useremo il :prima pseudo-elemento per questo invece di aggiungere markup extra.
a: before content: ""; larghezza: 80 px; altezza: 80 px; blocco di visualizzazione; z-index: -2; posizione: assoluta; colore di sfondo: rgb (26,27,29); a sinistra: -5px; inizio: -2px; border-radius: 40px; box-shadow: 0px 1px 0px 0px rgba (250,250,250,0.1), inserto 0px 1px 2px rgba (0, 0, 0, 0,5);
Ulteriori letture: CSS: prima e dopo pseudo-elementi (Hongkiat.com)
Spia
Sotto il pulsante, c'è una piccola luce per designare lo stato di accensione e spegnimento. Sotto, applichiamo il rosso per il colore della luce perché la potenza è inizialmente OFF, aggiungiamo anche box-ombra per imitare l'effetto barlume della luce.
a + span display: block; larghezza: 8px; altezza: 8px; background-color: rgb (226,0,0); box-shadow: inset 0px 1px 0px 0px rgba (250,250,250,0,5), 0px 0px 3px 2px rgba (226,0,0,0,5,5); border-radius: 4px; chiaro: entrambi; posizione: assoluta; fondo: 0; a sinistra: 42%;
L'effetto
A questo punto il nostro pulsante inizia a sembrare buono e abbiamo solo bisogno di aggiungere alcuni effetti su di esso, ad esempio, quando il pulsante è 'stato' cliccato su, vogliamo che il pulsante appaia come viene premuto e tenuto premuto.
Per ottenere l'effetto, il primo box-ombra nel pulsante verrà azzerato e la posizione verrà abbassata un po '. Abbiamo anche bisogno di regolare leggermente le intensità delle altre tre ombre per abbinare la posizione del pulsante.
a: attivo box-shadow: 0px 0px 0px 0px rgb (34,34,34), / * 1 ° ombra * / 0px 3px 7px 0px rgb (17,17,17), / * 2 ° ombra * / riquadro 0px 1px 1px 0px rgba (250, 250, 250, .2), / * 3a ombra * / inset 0px -10px 35px 5px rgba (0, 0, 0, .5); / * 4th Shadow * / background-color: rgb (83,87,93); inizio: 3px;
Inoltre, una volta premuto il pulsante, questo dovrebbe rimanere premuto e l'icona dovrebbe "brillare" per indicare che l'alimentazione è attiva.
Per ottenere questo effetto, il pulsante verrà scelto come target utilizzando il pulsante :bersaglio pseudo-classe, quindi cambia il colore dell'icona in bianco e aggiungi a text-shadow con colore bianco pure.
a: target box-shadow: 0px 0px 0px 0px rgb (34,34,34), 0px 3px 7px 0px rgb (17,17,17), inserto 0px 1px 1px 0px rgba (250, 250, 250, .2) , inset 0px -10px 35px 5px rgba (0, 0, 0, .5); background-color: rgb (83,87,93); inizio: 3px; colore: #fff; text-shadow: 0px 0px 3px rgb (250,250,250);
Ulteriori letture: Utilizzando: target pseudo-classe
Abbiamo anche bisogno di regolare il box-ombra nel cerchio all'esterno del pulsante, come segue.
a: active: before, a: target: before top: -5px; colore di sfondo: rgb (26,27,29); box-shadow: 0px 1px 0px 0px rgba (250,250,250,0.1), inserto 0px 1px 2px rgba (0, 0, 0, 0,5);
L'indicatore luminoso passerà dal rosso predefinito al colore verde per sottolineare che l'alimentazione è già attiva.
a: target + span box-shadow: inset 0px 1px 0px 0px rgba (250,250,250,0,5), 0px 0px 3px 2px rgba (135,187,83,0,5); background-color: rgb (135,187,83);
Effetto di transizione
Infine, per rendere l'effetto del pulsante senza intoppi, applicheremo anche il seguente effetto di transizione.
Questo snippet di seguito aggiungerà specificamente la transizione al file colore proprietà e il text-shadow per 350ms nell'elemento di ancoraggio.
a transizione: colore 350ms, text-shadow 350ms; -o-transizione: colore 350ms, text-shadow 350ms; -moz-transition: colore 350ms, text-shadow 350ms; -webkit-transition: colore 350ms, text-shadow 350ms;
Questo secondo snippet di seguito aggiungerà la transizione per il colore di sfondo e box-ombra proprietà nell'indicatore luminoso.
a: target + span transition: background-color 350ms, box-shadow 700ms; -o-transizione: background-color 350ms, box-shadow 700ms; -moz-transition: background-color 350ms, box-shadow 700ms; -webkit-transition: background-color 350ms, box-shadow 700ms;
Risultato finale
Abbiamo attraversato tutti gli stili di cui abbiamo bisogno, ora puoi vedere il risultato finale dal vivo e scaricare il file sorgente dai link sottostanti.
- dimostrazione
- Scarica fonte
Bonus: come disattivarlo
Ecco il bonus. Se hai provato il pulsante della demo di cui sopra, hai notato che il pulsante può essere solo cliccato una volta, ovvero per accenderlo, quindi come spegnerlo?.
Sfortunatamente, dobbiamo farlo con jQuery, ma è anche molto semplice. Di seguito è riportato tutto il codice jQuery di cui abbiamo bisogno.
$ (document) .ready (function () $ ('# button'). click (function () $ (this) .toggleClass ('on'););); Lo snippet precedente aggiungerà la classe ON nell'ancora e abbiamo usato il toggleClass funzione da jQuery per aggiungerlo. Quindi, quando il #pulsante viene cliccato su, jQuery controllerà se la classe ON è stata aggiunta o meno: quando non lo è, jQuery aggiungerà la classe, e se è stata aggiunta, jQuery rimuoverà la classe.
Nota: Non dimenticare di includere la libreria jQuery.
Ora dobbiamo cambiare un po 'lo stile. Basta sostituire tutto il :bersaglio pseudo-elemento con il .sopra selettore di classe, come segue:
a.on box-shadow: 0px 0px 0px 0px rgb (34,34,34), 0px 3px 7px 0px rgb (17,17,17), inserto 0px 1px 1px 0px rgba (250, 250, 250, .2) , inset 0px -10px 35px 5px rgba (0, 0, 0, .5); background-color: rgb (83,87,93); inizio: 3px; colore: #fff; text-shadow: 0px 0px 3px rgb (250,250,250); a: active: before, a.on: before top: -5px; colore di sfondo: rgb (26,27,29); box-shadow: 0px 1px 0px 0px rgba (250,250,250,0.1), inserto 0px 1px 2px rgba (0, 0, 0, 0,5); a.on + span box-shadow: inset 0px 1px 0px 0px rgba (250,250,250,0,5), 0px 0px 3px 2px rgba (135,187,83,0,5); background-color: rgb (135,187,83);
Infine, proviamolo nel browser.
- dimostrazione
- Scarica fonte
