Oggi ci divertiremo un po 'di pulito ricreando la casella del punto interrogativo animata di Mario Bros. con puro CSS3.
Lungo la strada imparerai come utilizzare diverse fantastiche tecnologie CSS3 come angoli arrotondati, ombre di casella e testo e animazioni di fotogrammi chiave che funzionano sia in Safari che in Firefox. Facciamo un salto!
Sbirciata
Ecco una rapida occhiata a ciò che costruiremo oggi. In realtà, penso che sia troppo impegnativo per essere effettivamente utilizzato su un sito (potrebbe solo ferire gli occhi) ma è sicuramente divertente da costruire!
demo: Clicca qui per avviare la demo
Scaricare: Clicca qui per scaricare
Perchè mai?
Per iniziare vorrei chiarire che questo articolo delinea un progetto puramente sperimentale destinato esclusivamente a scopi didattici. Il prodotto finale dovrebbe degradarsi un po 'con grazia negli altri browser, ma le animazioni funzioneranno davvero correttamente solo nei browser Webkit e in Firefox 5 (che ora supporta le animazioni dei fotogrammi chiave).
Quindi, se non è pronto per l'uso, perché mi sono preoccupato dell'articolo? Prima di tutto, eseguire esperimenti come questo è un modo fantastico per sviluppare le tue capacità di risoluzione dei problemi CSS: ti imbatti sempre in molti problemi imprevisti e devi risolvere il tuo modo di uscirne. Inoltre, un giorno, in futuro, le animazioni dei fotogrammi chiave CSS saranno probabilmente supportate da tutti i principali browser e sarà sicuramente utile avere già un'idea di alcune tecniche di implementazione diverse.
In definitiva però, questo è tutto il mio tentativo di giustificare il fatto che sono un nerd di Nintendo che ha visto un blocco animato di Mario l'altro giorno e volevo subito costruirlo in CSS. Come nota a margine, un modo semplice per rendere questa tecnica più accessibile a tutti i browser è semplicemente eliminare l'animazione CSS e utilizzare jQuery.
Introduzione: l'HTML
La prima cosa che vogliamo fare è delineare alcuni HTML di base per un blocco. Dal momento che il blocco è presumibilmente qualcosa che vogliamo usare ripetutamente, useremo un paio di classi. In questo modo possiamo semplicemente copiare e incollare blocchi di codice e il CSS verrà gestito automaticamente.
Per prima cosa, crea un contenitore, questo manterrà tutti i blocchi quando alla fine ne creeremo altri. Prossimo rilascio di un div wrapper contenente un tag di paragrafo. Questa struttura sembra un po 'ridondante al momento, ma come aggiungeremo più avanti avrà senso.
Nota che ho avvolto il mio intero tag di paragrafo in un link, che è accettabile in HTML5. L'ho fatto perché il testo stesso entrerà e uscirà dalla visualizzazione e si desidera che il collegamento sia sempre selezionabile, non puramente quando il testo è visibile. Di nuovo, questo avrà più senso in seguito.
Avvio di CSS
In seguito, vogliamo creare lo stile di base per il nostro blocco Mario. Ci sono tre parti distinte che dovremo gestire, descritte di seguito.
Dimensioni
La prima cosa che dobbiamo fare è semplicemente impostare altezza e larghezza. Questo è abbastanza arbitrario, finché crei un quadrato, sei bravo. Ho impostato il mio a 150px per la larghezza e l'altezza. Assicurati anche di impostare il tuo overflow su? Hidden? per l'animazione.
Box Styling
Quindi, vogliamo che la nostra scatola assomigli al blocco del punto interrogativo di un gioco di Mario. Ci sono diverse versioni quindi per tutti i fan appassionati là fuori, baseremo il nostro approssimativamente su quello di Super Mario Bros 3.
Nel codice qui sotto ho impostato il colore, il bordo, il raggio del bordo e l'ombra interna per dare profondità al blocco.
Stile del testo
Il passo finale è quello di definire il nostro punto interrogativo. Rendi il colore bianco, allinea il testo al centro, dargli un'ombra dura e imposta il carattere su qualcosa che ti piace. Ho avuto difficoltà a trovare un carattere che fosse appropriato, ma il carattere geografico di Google Web Font si avvicina.
Anteprima
A questo punto il nostro blocco di Mario sembra abbastanza buono! Tutto ciò che è rimasto adesso è portarlo in vita.
Animare il blocco
Ora che abbiamo il nostro blocco tutto bello e stilizzato, è il momento di animare quel piccolo punto interrogativo. Ora, se impostiamo l'animazione per usare i margini sul nostro paragrafo, l'intero blocco si sposterà, il che non è ciò che vogliamo. Quindi invece usiamo? Text-indent? come base per la nostra animazione, che interesserà solo il punto interrogativo.
Dal momento che vogliamo che l'animazione si interrompa, non possiamo usare una semplice transizione CSS vecchia e dobbiamo invece fare affidamento su un'animazione di fotogrammi chiave. La sintassi per Webkit e Mozilla è identica a parte i prefissi. Innanzitutto, dai un nome alla tua animazione (ho chiamato mia? Mariomation?). Quindi, definire lo stato dell'animazione nei vari punti. Abbiamo solo bisogno di due frame, uno per iniziare e uno per terminare, il browser riempirà gli spazi vuoti.Dando un rientro negativo all'inizio e un rientro positivo alla fine, faremo in modo che il punto interrogativo viaggi da sinistra a destra.
Per attivare l'animazione, prima creiamo un selettore per scegliere a cosa vogliamo applicarlo, in questo caso? P.block? fa il lavoro. Quindi richiamiamo il nome dell'animazione e definiamo i parametri: durata, conteggio e funzione di temporizzazione.
Con questo, il tuo blocco dovrebbe animare perfettamente! Se è tutto ciò che volevi raggiungere, sentiti libero di fermarti qui. Ho intenzione di procedere un po 'oltre e aggiungere alcune funzionalità di navigazione.
Creazione del menu di navigazione: HTML
Dato che abbiamo usato le classi anziché gli ID, possiamo facilmente ripetere il nostro blocco con solo una copia e incolla. Questa volta ho creato quattro blocchi e aggiunto un suggerimento extra che faremo apparire al passaggio del mouse.
Menu di navigazione CSS
Per far apparire tutto come lo vogliamo, ci sono diversi passaggi, ciascuno mostrato nel CSS qui sotto. La prima cosa che ho fatto è stata applicare la larghezza e i margini al mio contenitore, questo era semplicemente per centrarlo sulla pagina ed è un passaggio facoltativo.
La cosa più importante nel prossimo passo è far galleggiare il? BlockWrapper? classe a sinistra. Questo farà sì che i blocchi di Mario appaiano l'uno accanto all'altro anziché impilati verticalmente.
Infine, ho posizionato ogni frammento di testo del tooltip sopra il relativo blocco e ho impostato l'opacità a zero. Quindi con una transizione CSS faccio apparire il testo mentre passi il mouse sopra il blocco.
Con quello, siamo tutti finiti! Ora dovresti avere quattro blocchi animati uno accanto all'altro.
Prodotto finale
demo: Clicca qui per avviare la demo
Scaricare: Clicca qui per scaricare
Conclusione
Questo conclude il nostro tutorial sulla creazione di un blocco animato di Mario con puro CSS. Spero ti sia divertito tanto a costruirlo come ho fatto io!
Se pensi a qualche miglioramento o ti trovi a utilizzare questo è un modo, lascia un commento qui sotto e lo verificherò.