Ultimamente mi sono annoiato con tutto il run of the mill, i semplici pulsanti iTunes / Mac App Store che ho visto sul Web, quindi ho codificato alcune divertenti alternative animate che pensavo di condividere.
Questo progetto è semplicissimo, quindi anche se sei un principiante assoluto, dovresti essere in grado di seguirlo. Impareremo come utilizzare alcune tecniche di fantasia come come incorporare i font di icone in un disegno e come inserire oggetti usando pseudo elementi.
Il concetto
Per iniziare un progetto è spesso divertente prendere una matita e disegnare alcune idee. Tendiamo a pensare più liberamente quando disegniamo con le mani di un topo. Non devi essere bravo nemmeno a disegnare, sentiti libero di scarabocchiare schizzi veloci e brutti. Finché comunicano il tuo processo mentale, funzionano!
Il concetto qui è piuttosto semplice e simile ad altri progetti che abbiamo fatto in passato. Mi piacerebbe iniziare con un cerchio che contiene solo un'icona. Quindi, quando si passa con il mouse sull'icona, si espande per mostrare un messaggio sul download dell'app nell'app store.
Naturalmente, dal momento che Apple ha tre archetipi di dispositivi primari (iPad, iPhone e Mac), dovremo creare alcune versioni diverse oltre alle basi.
Passaggio 1: HTML
Per iniziare, esegui un div come quello mostrato di seguito. Dentro ho inserito un paragrafo avvolto in un tag di ancoraggio, una parte della quale è anche avvolta in un piccolo tag. Questo ci aiuterà a differenziare un po 'il testo.
Guardando ora, sembra un po 'pesante. Probabilmente potresti applicare le classi direttamente all'ancora e saltare il div completamente, ma per ora ci atterremo a questo. Si noti che ho applicato due classi separate al div. Avrei potuto eliminarne uno, ma per distinguere tra i diversi tipi di pulsanti che creeremo, è utile separarli in classi separate (questo ti consente di scegliere come target ciascuna versione individualmente). Gli stili ripetuti possono quindi essere raggruppati in un unico? Appstorebutton? classe, un metodo di organizzazione che manterrà il nostro CSS bello e ASCIUTTO.
Tieni inoltre presente che HTML5 ci consente di racchiudere un collegamento intorno a tutto ciò che vogliamo, quindi se ti sembra un po 'fastidioso, sappi che è perfettamente consentito.
Passaggio 2: stili di pulsanti di base
Ora passiamo ad alcuni CSS e prendiamo questo? Appstorebutton? gancio. Lo stato predefinito del pulsante sarà una cerchia, ma è molto più semplice organizzare tutto con il pulsante nel suo stato espanso, quindi inizieremo con una larghezza di 275px, che ridurremo a 80px una volta che saremo tutto finito.
Ci sono anche altre cose interessanti qui. Prima di tutto, abbiamo applicato il posizionamento relativo perché useremo un posizionamento assoluto su un elemento all'interno di questo più avanti e questo ci darà un punto di partenza. Se questo non ha senso, leggi questo articolo.
Impostiamo anche l'overflow su nascosto. Questo perché quando il pulsante è nel suo stato circolare, gran parte del contenuto sarà al di fuori dei limiti fisici del pulsante e vogliamo mantenerlo bello e invisibile. Infine, abbiamo applicato un colore di sfondo all'iPhone? classe. Più tardi ne creeremo alcuni altri per le altre versioni.
Controllo avanzamento
A questo punto, il nostro obiettivo è orribile, ma non preoccuparti, sembrerà migliore in pochissimo tempo.
Passaggio 3: Stile Il paragrafo
Ora è il momento di aggiustare quel brutto testo. Questo è piuttosto semplice e comporta la conversione del colore in bianco e la definizione di diverse dimensioni per il testo di paragrafo piccolo e regolare. Ho anche dichiarato una larghezza del set, che spezza il testo in due righe, quindi utilizza i margini per spingerlo tutto in posizione.
Controllo avanzamento
Non ti avevo promesso che tutto sarebbe andato bene presto? Stiamo già iniziando a vedere il risultato finale che prende forma. È incredibile quanto possa essere lontano un piccolo testo in stile!
Passaggio 4: Aggiungi l'icona
Nell'immagine sopra, il testo sembra goffamente spostato verso destra con un grande spazio vuoto sulla sinistra. È qui che andrà la nostra piccola icona dell'iPhone. Prima di metterlo lì, però, dobbiamo pensare a come farlo.
Il primo pensiero che mi viene in mente è di usare un font di icone. Questi sono semplici da implementare e infinitamente scalabili e quindi funzionano perfettamente per la grafica di un pulsante. Dopo un po 'di caccia, ho trovato un font gratuito chiamato Modern Pictograms di Font Squirrel che contiene sia un iPhone che un iPad che possiamo usare per questo progetto.
Ora, piuttosto che ingombrare ulteriormente il nostro markup, possiamo inserire questa icona usando puro CSS usando l'elemento: before pseudo. Il codice per questo insieme all'implementazione del carattere dell'icona è mostrato sotto.
Come puoi vedere, abbiamo detto al nostro CSS che prima? Nel paragrafo, volevamo inserire la lettera? O ?, che corrisponde al grafico di iPhone nel carattere Modern Pictograms. Il codice @ font-face che ho usato qui è stato copiato e incollato direttamente dai meravigliosi kit @ font-face trovati su Font Squirrel.
Successivamente, abbiamo spostato la grafica dell'iPhone in posizione. Utilizzando il posizionamento assoluto qui, estraiamo l'immagine dal flusso normale. Tuttavia, è legato allo spazio del nostro pulsante a causa del contesto di posizionamento relativo che abbiamo applicato in un passaggio precedente. Da qui, lo spintiamo di dieci pixel dalla parte superiore e venti dalla sinistra, e poi siamo a posto.
Controllo avanzamento
Come puoi vedere, l'icona del carattere sembra perfetta nel piccolo pulsante. Tutto ciò che resta da sapere, è arrotondare gli angoli, ridurre la larghezza e impostare una transizione al passaggio del mouse.
Passaggio 5: Crea il cerchio
Ora che il nostro pulsante sembra approssimativamente come vogliamo quando è espanso, è il momento di contrarlo. Per fare ciò, torna al nostro? Appstorebutton? agganciare e impostare la larghezza su 80px, quindi aggiungere un raggio di 40px al bordo.
Controllo avanzamento
Ora il nostro pulsante è collassato in un piccolo cerchio. Poiché il nostro overflow è nascosto, non vedrai alcun testo. Nel prossimo passaggio, vedremo come riportare tutto indietro.
Passaggio 6: espandere su passaggio del mouse
Per completare il nostro pulsante animato, dobbiamo aggiungere una transizione e uno stato di passaggio del mouse. La nostra transizione riguarderà la larghezza della classe .appstorebutton con una durata di un secondo e una funzione di temporizzazione di "facilità".
Quindi, una volta che l'utente passa sopra il pulsante, si espanderà alla larghezza di 275 px che avevamo usato prima.
Controllo avanzamento
Il nostro pulsante è tutto finito! A questo punto tutto dovrebbe funzionare perfettamente. Se hai seguito, il tuo risultato dovrebbe assomigliare a quello qui sotto.
Passaggio 7: aggiungi gli altri
Ora che abbiamo un solo pulsante pronto, è ora di espandere questa idea in un insieme di tre pulsanti. Aggiungi altri due div al tuo codice HTML e dai a ciascuno una classe unica come quella che ho seguito.
Da qui seguiamo i passi che abbiamo fatto prima di inserire le icone usando l'elemento: before pseudo. L'icona dell'iPad è? Q? nel nostro font di icone, ma sfortunatamente non ci sono laptop o iMac che possiamo usare per l'icona del Mac App Store. Per questo, sono andato oltre e ho afferrato un'icona dal favoloso progetto Noun (ho dovuto modificarlo un po 'per renderlo più vicino agli altri).
Per finire tutto, ho dato ad ogni pulsante un colore unico usando le classi speciali che abbiamo applicato nel nostro HTML. Usali per applicare altri stili specifici per i pulsanti che desideri utilizzare.
Guardali in azione!
Tutto il tuo duro lavoro ha dato i suoi frutti e hai un piccolo pulsante pulito da mostrare per questo. Se non hai seguito e costruito i pulsanti da solo, fai clic sotto per ottenere il risultato di un test drive.
demo: Clicca qui per avviare la demo.
Conclusione
Piccoli progetti come questi sono ideali per mantenere fresche le tue costolette CSS e il tuo cervello in una modalità di pensare costantemente a nuove idee di design.
Hai visto di recente altri pulsanti di App Store creativi? Facci sapere nell'area commenti qui sotto.