Anche se le modifiche implementate dai CSS3 non sono ancora supportate su tutti i browser e le funzionalità cross-browser tra quelle che lo supportano possono essere davvero dolorose, è ancora abbastanza divertente sperimentare e vedere cosa è possibile.
In questo breve tutorial diventeremo pazzi con le transizioni CSS3 in Webkit per creare una semplice pagina web che mostri alcuni effetti di dissolvenza colore davvero belli.
Effetto finale
Solo per farti un'idea di dove siamo diretti, ecco una dimostrazione dell'effetto finale.
Come potete vedere, stiamo utilizzando le transizioni di Webkit CSS3 per modificare il colore di sfondo, il colore del testo, il colore del collegamento e il colore del collegamento al passaggio del mouse per aggiungere un po 'di vita a una pagina Web altrimenti semplice. Spostando il mouse nel rettangolo, cambiano lo sfondo, il colore del testo e il colore del collegamento. Quindi passare con il mouse su un collegamento attiverà un'altra transizione di colore per il testo del collegamento.
Dovremo attenerci a Webkit su questo in quanto le transizioni di Firefox sono ancora in arrivo (cercare -moz-transition in Firefox 3.7).
Transizioni CSS3
Prima di iniziare, diamo un'occhiata alla sintassi di base delle transizioni CSS3 che useremo. In sostanza, le transizioni di Webkit funzionano specificando tre elementi: la proprietà da sottoporre a transizione, la durata della transizione e la funzione di temporizzazione. Ecco un esempio.
Nell'esempio sopra, abbiamo scelto di passare il colore in modo lineare per un periodo di un secondo. La funzione di temporizzazione controlla la velocità della modifica per tutta la durata della transizione. La scelta di una modalità lineare mantiene costante il tasso di cambiamento mentre si sceglie la facilità d'ingresso, accelerando leggermente la transizione man mano che procede. Per una spiegazione dettagliata delle opzioni di temporizzazione, consulta l'articolo di Webkit.org su CSS Animation.
L'esempio sopra ha selezionato solo una singola proprietà da transizionare ma possiamo anche scegliere di passare più proprietà in un singolo comando. Considera quanto segue:
Questo esempio seleziona sia il colore del testo che il colore dello sfondo (separati da virgole) per una transizione di un secondo. La funzione di temporizzazione per il? Colore? la proprietà è lineare mentre lo? sfondo? alla proprietà viene assegnata la funzione easy-in.
Per ulteriori informazioni su questo esempio, consultare l'articolo NetTuts sulle transizioni CSS3.
Introduzione: l'HTML
La prima cosa che faremo è gettare un modello XHTML vuoto di base (avremmo potuto usare HTML5 così facilmente, ma ho deciso di concentrarmi su una nuova tecnologia alla volta).
Dopo aver rimosso il modello vuoto, aggiungi un singolo div per contenere il testo. Scrivi tutto ciò che vuoi in quest'area, assicurati di aggiungere alcuni collegamenti in modo da ottenere il pieno effetto delle transizioni.
Questo è tutto! Come ho detto prima, stiamo costruendo un esempio estremamente semplice in modo che sia tutto l'HTML che ti servirà. Ho dato il div a classe invece di un id in modo da poter aggiungere facilmente altre aree alla pagina che porteranno avanti questa funzionalità.
CSS di base
A questo punto, l'HTML ha generato un solo paragrafo noioso, quindi faremo molto affidamento sui CSS per rendere la pagina più attraente.
Per iniziare, aggiungeremo alcuni stili di base direttamente al corpo.
Qui abbiamo impostato alcuni stili di base per lo sfondo, il contenitore di testo e i collegamenti nel contenitore di testo. Abbiamo dato allo sfondo un colore grigio molto scuro, reso il testo bianco e utilizzato il frammento di Helvetica di Chris Coyier per darci un bel testo sottile.
Infine, abbiamo stilizzato i collegamenti in modo che siano di colore grigio chiaro e senza decorazioni di testo. Ecco cosa dovresti avere a questo punto:
Ora espanderemo la sezione textContainer dandogli un bordo sottile e allineandolo con il centro della pagina. Quest'ultima parte (centrandola tutta sulla pagina) si ottiene assegnando una larghezza al div e impostando il margine su auto. Assicurati di allineare il testo al centro in modo che non si trovi nella parte sinistra del div.
Questo dovrebbe darti l'aspetto base che hai visto nella demo.
Aggiungere la magia
Ora che abbiamo sostanzialmente la nostra pagina in stile, vogliamo aggiungere alcune transizioni di colore per ravvivare le cose. Il primo posto in cui vorremmo inserire una transizione è nel textContainer principale. Useremo lo stesso codice che abbiamo visto nella spiegazione delle transizioni CSS3 sopra.
Questo imposterà una transizione su ogni cambiamento che apportiamo al? Colore? o? sfondo? proprietà, utilizzando una transizione di un secondo e due diverse funzioni di temporizzazione: rispettivamente lineare e easy-in.
Quindi imposteremo una transizione al testo del link in modo che qualsiasi cambiamento apportato a questo colore attiverà una seconda transizione.
Come detto sopra, questo codice di per sé non farà nulla. In un certo senso tiene d'occhio le eventuali modifiche alle proprietà specificate. Quando si verifica una modifica a causa di altri comandi CSS, la transizione con queste impostazioni.
Il catalizzatore
Quando si impostano le transizioni, è necessario un evento per attivare la transizione. Nei CSS, uno degli eventi più facili e comuni con cui lavorare è un evento hover. Sebbene gli eventi al passaggio del mouse siano più comunemente applicati ai collegamenti (che faremo), ne applicheremo anche uno semplicemente al div nel suo complesso in modo che quando il mouse entra, la transizione viene attivata.
Poiché abbiamo già impostato i comandi di transizione, gli eventi di passaggio del mouse sono davvero semplici e utilizzano solo poche righe di codice per cambiare i colori. Per prima cosa affronteremo l'evento div hover.
Questo farà sì che quando il cursore di qualcuno immette il div, il colore del testo cambierà in grigio scuro e lo sfondo diventerà bianco. Tuttavia, i nostri colori dei collegamenti sono attualmente uguali a quelli precedenti all'evento di hover. Aggiungi il seguente codice per cambiarlo.
Questo lo imposta in modo che quando si verifica un evento hover in .textContainer, tutti i collegamenti diventino blu chiaro. Infine, vogliamo impostare il colore del testo blu chiaro per scurirlo gradualmente mentre ci si posiziona sopra di esso.
Si noti che c'è una grande differenza tra .textContainer: passa il mouse a e .textContainer a: hover. Il primo influenza il colore del collegamento quando il mouse entra in qualsiasi parte del div e quest'ultimo influenza il colore del collegamento quando si posizionano solo i collegamenti.
Questo finisce anche con il nostro CSS. Ora quando si inserisce il div con il mouse, lo sfondo dovrebbe sfumare gradualmente in bianco, il testo dovrebbe diventare grigio scuro ei collegamenti dovrebbero diventare blu chiaro. Quindi, quando si passa il mouse su un collegamento, dovrebbe gradualmente diventare più scuro.
Conclusione
Spero che questo articolo abbia suscitato alcune idee nella tua testa per alcune cose divertenti da fare con le transizioni CSS. Fatemi sapere nei commenti qui sotto che cosa avete pensato all'effetto generale e a come lo avreste migliorato. Assicurati inoltre di condividere tutti i collegamenti che hai con altri esempi di transizione CSS3.