Seguiteci mentre creiamo un pulsante di download semplice e divertente con alcuni fantasiosi CSS3. Il nostro pulsante userà un sacco di gadget divertenti tra cui border-radius, box-shadow, linear-gradienti, z-index e transizioni per ottenere un effetto doppio cassetto scorrevole unico al passaggio del mouse.
Mentre andiamo, discuterò perché alcune tecniche che potresti pensare di usare dovrebbero essere evitate. Le transizioni sono difficili da utilizzare e sono abbastanza inclini a rifiutarsi di lavorare con determinate proprietà. Continuate a leggere per saperne di più.
Il concetto
Liberamente basato su questa idea, volevo creare un pulsante di download con un effetto di cassetto scorrevole in cui le informazioni nascoste originariamente saltano fuori quando l'utente inizia un evento di hover. Per dare il mio giro, ho deciso di raddoppiare l'effetto e creare un cassetto sia nella parte superiore sia nella parte inferiore del pulsante (clicca qui per dare una sbirciatina al risultato finale).
Ecco come funzionerà: utilizzando una combinazione di HTML e CSS, creeremo tre pezzi separati. Questi includono il pulsante principale e due pannelli informativi più piccoli. I pannelli più piccoli si nasconderanno inizialmente sotto il pulsante più grande, quindi quando l'utente si posiziona, uno scivolerà verso l'alto e l'altro verso il basso.
Come puoi vedere, questo sarà un progetto abbastanza semplice che è perfetto per i principianti che stanno cercando di migliorare le loro abilità CSS. Soprattutto vale la pena imparare come utilizzeremo il posizionamento e lo stack assoluto tramite z-index.
Cosa non funzionerà
Mentre pianificavo questo progetto, ho inventato un paio di modi per far funzionare il mio concetto. Dato che ultimamente sono stato su un calcio di pseudo-elemento, il modo in cui ho scelto di strutturare il progetto inizialmente era attraverso l'uso di: before e: after.
Con questi pseudo elementi, possiamo codificare solo il pulsante di download nel nostro codice HTML e quindi aggiungere le ali usando puro CSS. Sembra una soluzione ottimale e in effetti ha funzionato benissimo? fino a quando ho cercato di animare la transizione. Non importa quello che ho provato, semplicemente non ho potuto ottenere la transizione al lavoro.
Dopo una piccola ricerca ho scoperto che solo Firefox supporta le transizioni CSS su pseudo elementi. Questo è un vero peccato che limita davvero il divertimento che possiamo avere: prima e dopo, ma al rialzo ho imparato una lezione preziosa che mi farà risparmiare un sacco di tempo e problemi in futuro.
In tutorial come questo non si capisce spesso dove l'autore ha fallito, ma penso che sia importante comunicare questi errori in modo da poter imparare da loro come ho fatto io. Ora la prossima volta che vuoi animare uno pseudo elemento ti ricorderai che non funzionerà nella maggior parte dei browser!
Fallimenti a parte, saltiamo in un metodo che volontà lavoro.
Il tasto
Per iniziare, creeremo e modificheremo il nostro pulsante. Una volta installato, sarà più semplice formare gli altri elementi. Tutto ciò di cui abbiamo bisogno nel reparto HTML è un singolo div contenente un link. Potremmo semplicemente usare il link per il pulsante, ma avremo bisogno di raggruppare più oggetti insieme, quindi è necessario un div.
Forma e dimensioni dei pulsanti
L'HTML sopra dovrebbe semplicemente fornirti un semplice link di testo. Trasformeremo questo in un pulsante con una forma e una dimensione dello sfondo impostate. Per fare ciò, iniziamo con alcune dimensioni, aggiungiamo un po 'di colore e impostiamo il valore di visualizzazione da bloccare.
Ecco come dovrebbe apparire il tuo pulsante dopo questo passaggio. Non sembra ancora molto, ma sarà un pulsante dall'aspetto ricercato prima che tu lo sappia.
Digita stili
La prima cosa brutta del pulsante qui sopra che dobbiamo correggere è il tipo, al momento è un casino. Fortunatamente, questo è facile da indirizzare. Tutto ciò che dobbiamo fare è impostare il colore su bianco, dichiarare un carattere e centrarlo.
Ci sono un paio di cose interessanti da notare qui. Innanzitutto, nota che sto usando il carattere? stenografia piuttosto che scorrere individualmente la proprietà del font reach. Questo è un ottimo modo per risparmiare spazio e mantenere i tuoi stili di tipo belli e concisi. L'ordine qui è il seguente:
Ecco un altro trucco elegante: imposto l'altezza della linea a 50 px per centrarla verticalmente nel pulsante. Notare anche che ho rimosso la sottolineatura del testo e trasformato il tipo in maiuscolo. Perché non l'ho appena scritto in maiuscolo in HTML? Perché questa è davvero una scelta di stile e potrebbe cambiare con una riprogettazione futura.
Ora il nostro pulsante è molto più bello!
CSS3 Magic
A questo punto il nostro pulsante sembra ancora un po 'semplice. Se sei bello con l'aspetto minimale, puoi saltare in avanti. Altrimenti, rendiamola un po 'più interessante. La prima cosa che faremo è arrotondare gli angoli. Assicurati di aggiungere tutti e tre i prefissi del browser:
Il prossimo, lanciamo in una scatola-ombra. Ancora una volta, avremo bisogno di tre versioni per coprire i vari browser. L'ordine del valore di stenografia qui è offset orizzontale, offset verticale, sfocatura e colore.
Finalmente, passeremo in una sfumatura. Sfortunatamente, questo richiede un intero casino di codice. Il modo in cui i gradienti funzionano cambia di recente, quindi non solo abbiamo bisogno di più prefissi, ma abbiamo anche bisogno di più sintassi per assicurarci di supportare tutto.Sarò onesto, raramente codifico queste cose a mano. Invece, uso l'Ultimate Gradient Generator e incollo il codice generato. Ecco il risultato:
Ora il nostro pulsante è completamente in stile e sta bene. Ecco il risultato:
Aggiungere i cassetti
Ora che il nostro pulsante principale è terminato, è il momento di aggiungere i piccoli cassetti che usciranno dall'alto e dal basso (forse? Le ali? È il termine appropriato). Per fare ciò, inizieremo aggiungendo un po 'al nostro HTML:
Come puoi vedere, ho fondamentalmente diviso in due paragrafi, ognuno con una classe unica che li rende facili da usare come target (potresti invece utilizzare alcuni pseudo selettori se vuoi davvero essere fantasioso).
Stile di paragrafo predefinito
Ora salta al tuo CSS e modificheremo i paragrafi. Per iniziare, vogliamo concentrarci sugli stili che entrambi i paragrafi condivideranno. Disegnare entrambi contemporaneamente dove possibile aiuta a mantenere il nostro codice pulito e meno ridondante. Ecco una grande porzione di codice su cui riflettere:
Ora, questo è un bel po 'da buttarti addosso tutto in una volta, così lo passo passo dopo passo. La prima cosa che facciamo è dare forma, colore e stile dei paragrafi esattamente come abbiamo fatto sul pulsante. La differenza principale è che questi sono più piccoli e utilizzano alcuni margini per inserirli.
Successivo sono gli stili di posizionamento. Questi sono molto importanti quindi assicurati di comprenderli chiaramente. Per far apparire le ali dietro al bottone, dobbiamo applicare z-index, che influenza l'ordine di impilamento degli elementi. Pensa a questo come? Invia a back? tipo di comando. Per fare in modo che funzioni, dobbiamo applicare il posizionamento assoluto.
Infine, abbiamo aggiunto gli stessi stili di raggio e sfumatura che abbiamo fatto prima. Ho mantenuto questi elementi separati dagli stili precedenti per mantenere le cose semplici e chiare, ma per rendere le cose DRYer, probabilmente vorresti riscrivere i tuoi stili CSS3 condivisi con qualcosa del genere:
Fondamentalmente, ogni volta che ti ritrovi a ripetere o incollare più volte gli stili, stai rendendo il tuo codice inutilmente complesso e dovresti tentare di semplificare.
Alla fine di questo passaggio, non vedrai stranamente alcun cambiamento nell'anteprima dall'ultima volta. Questo perché abbiamo nascosto questi elementi dietro il pulsante. Sono lì, non puoi ancora vederli!
Passaggio del mouse e stili attivi
Quello che vogliamo fare è prendere le ali che abbiamo appena creato e spostarle verso l'esterno quando l'utente passa sopra il pulsante. Per fare ciò, abbiamo semplicemente bisogno di regolare i margini su ciascun paragrafo. Qui prendiamo di mira ciascuna delle classi che abbiamo creato, quindi spostiamo il .top uno e il .bottom uno in basso. Anche la classe .top richiedeva una leggera regolazione dell'altezza della linea per sembrare giusta.
Mentre siamo qui, potremmo anche lanciare alcuni stili attivi. Questi avranno effetto durante un evento di mouse down.
Come puoi vedere, quello che ho fatto qui è regolare la sfumatura in modo che il colore superiore si allunghi un po 'più lontano, quindi ho riportato indietro le ali in un po' in modo che ci sia un effetto di contrazione quando si fa clic.
Ora il nostro pulsante è fantastico. Tutti e tre i nostri stati stanno lavorando. Quando non stai librando, sembra un semplice pulsante vecchio. Quando ti muovi, le ali o i cassetti si aprono. Quando fai clic, le ali entrano un po 'e il gradiente cambia leggermente.
Passaggio finale: aggiungi la transizione
A questo punto, tutto sembra funzionare correttamente. L'unico problema è che l'effetto hover si verifica all'istante e naturalmente vorremmo che fosse un po 'più graduale. Per fare ciò, torna al tuo blocco di paragrafi e aggiungi una transizione di base di 0,5 secondi usando tutti i prefissi richiesti.
Con questa aggiunta, il pulsante passerà molto bene tra i tre diversi stati.
Guardalo in azione
Abbiamo finito! Ora dovresti avere un fantastico pulsante di download CSS animato che sicuramente stupirà. Guarda la demo live qui sotto o controlla il codice su Tinkerbin.
demo: Clicca qui per lanciare
Vuoi una versione ancora migliore del pulsante con sei diverse versioni tra cui scegliere? Dai un'occhiata al fantastico download gratuito sul nostro nuovo sito affiliato Design Curate.
Conclusione
Grazie per aver letto e seguito. Se ce l'hai fatta fino in fondo, datti una pacca sulla spalla per un lavoro ben fatto.
Spero che tu abbia imparato qualcosa su z-index o fantastici trucchi CSS3. In caso contrario, almeno hai ottenuto un fantastico pulsante fuori dall'affare! Lascia un commento qui sotto e facci sapere se ti è piaciuto il tutorial.