Nei precedenti articoli abbiamo visto le basi delle CSS Transforms e Transition. Ma come utilizzare questi strumenti? Quali possono essere i possibili campi applicativi? Oggi ti mostrerò tre esempi che sfruttano queste regole.
Un primo esempio banale utilizzo è quello di migliorare l'esperienza utente nell'uso degli elementi "di tutti i giorni": link, form, pulsanti.
Semplicemente invece di passare da uno stato all'altro bruscamente (pensa al cambio di colore all'hover di un link, oppure all'aggiunta di un bordo al focus di un campo di testo), utilizzando le transition è possibile rendere l'effetto più gradevole. Ma non ci soffermeremo su questi esempi. Oggi vedremo come realizzare:
Grazie a questo effetto possiamo sfumare un'immagine in un'altra, semplicemente utilizzando CSS.
L'idea alla base di questo effetto è quello di inserire le due immagini in un contenitore comune, sovrapporle e poi ridurre l'opacità di quella visibile, aumentando l'opacità dell'altra immagine. Iniziamo col posizionare il contenitore e le immagini:
[xml] ...
Grazie a queste regole abbiamo aggiunto un piccolo bordo e un'ombra alle immagini e abbiamo impostato le dimensioni del contenitore. Oltre alle dimensioni, l'istruzione più importante è position: relative: in questo modo gli elementi contenuti (le immagini) si posizioneranno in riferimento a questo elemento.
Procediamo ora a sovrapporre le immagini: lo faremo posizionando assolutamente l'immagine da mostrare (la seconda) che quindi andrà a coprire la prima:
[css] .sfumato img:nth-child(2) { position: absolute; left: 0; top: 0; -webkit-transition: 1s opacity ease-out; -moz-transition: 1s opacity ease-out; -o-transition: 1s opacity ease-out; transition: 1s opacity ease-out; } [/css]Per ottenere l'effetto desiderato basterà dunque azzerare l'opacità dell'immagine visibile all'hover:
[css] .sfumato img:nth-child(2):hover { opacity: 0; } [/css]Grazie all'istruzione transition specificata il passaggio tra le due immagini avverrà in maniera graduale, come puoi vedere in questo esempio.
In questo esempio simuleremo una pila di immagini che si apre a ventaglio al passaggio del mouse. Di seguito il markup:
[xml]
Il primo passo è quello di impostare le dimensioni del contenitore e degli stili per le immagini:
[css] .pila { margin: 100px auto; } .pila, .pila img { height: 335px; -webkit-transition: .6s all ease-out; -moz-transition: .6s all ease-out; -o-transition: .6s all ease-out; -ms-transition: .6s all ease-out; transition: .6s all ease-out; width: 500px; } .pila img { border: 15px solid #ffe; -webkit-box-shadow: 12px 12px 10px rgba(0, 0, 0, 0.2); box-shadow: 12px 12px 10px rgba(0, 0, 0, 0.2); position: absolute; } [/css]In questo modo le tre immagini vanno a sovrapporsi e non c'è modo di capire a colpo d'occhio che si tratta di una pila. Poco male: possiamo risolvere ruotando un po' la prima e l'ultima immagine:
[css] .pila img:first-child { -webkit-transform: rotate(1deg); -moz-transform: rotate(1deg); -o-transform: rotate(1deg); -ms-transform: rotate(1deg); transform: rotate(1deg); } .pila img:last-child { -webkit-transform: rotate(-1deg); -moz-transform: rotate(-1deg); -o-transform: rotate(-1deg); -ms-transform: rotate(-1deg); transform: rotate(-1deg); } [/css]Molto meglio! Ora non resta che aumentare la rotazione di queste due immagini all'hover:
[css] .pila:hover img:first-child { -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -o-transform: rotate(30deg); -ms-transform: rotate(30deg); transform: rotate(30deg); } .pila:hover img:last-child { -webkit-transform: rotate(-30deg); -moz-transform: rotate(-30deg); -o-transform: rotate(-30deg); -ms-transform: rotate(-30deg); transform: rotate(-30deg); } [/css]Anche se questo effetto non è spiacevole, non ti permette di vedere le immagini nella loro interezza. Questo perché le immagini ruotano sul proprio centro. Ci servirebbe qualcosa che spostasse il punto di rotazione delle immagini. Possiamo farlo con l'istruzione transform-origin che, applicata all'elemento da ruotare, ci permette di decidere quale deve essere il fulcro della rotazione. Spostiamolo in basso al centro, in modo da aprire le immagini "a ventaglio":
Penso che l'effetto finale sia più che soddisfacente!
Come ultimo esempio ti mostrerò come realizzare delle didascalie animate per le nostre immagini. Questo è l'effetto che realizzeremo.
Quindi all'hover faremo comparire la didascalia che conterrà alcune informazioni sull'immagine. Iniziamo come sempre dal markup:
[xml]Le Alpi...
Napoli...
L'isola di Sicilia...
Abbastanza semplice: abbiamo racchiuso didascalia ed immagine in un div con classe box-img e racchiuso il tutto in un div contenitore. Passiamo agli stili di base:
In questo modo abbiamo centrato le immagini e le didascalie, e applicato uno sfondo nero leggermente trasparente a quest'ultime. Ora il prossimo passo consiste nel sovrapporre la didascalia all'immagine. Avendo già posizionato il contenitore, non resta che posizionare assolutamente la didascalia:
[css] .box-img > p { background-color: rgba(0, 0, 0, 0.7); color: #FFF; line-height: 1.5; margin: 0; padding: 20px; width: 460px; height: 295px; position: absolute; top: 0; left: 0; } [/css]Una volta fatto questo, dobbiamo decidere come nascondere la didascalia: a seconda della tecnica scelta, avremo un tipo diverso di animazione. Per questo esempio ho deciso di utilizzare una trasformazione poco usata: skewY. Come spiegato nella lezione precedente, skew distorce l'elemento di un certo numero di gradi. Applicando uno skewY di 90 gradi faremo di fatto sparire la didascalia:
In questo modo abbiamo nascosto la didascalia. Applichiamo la pseudo classe hover al contenitore, specificando una distorsione di 0 gradi, per ripristinarla:
[css] .box-img:hover > p { -webkit-transform: skewY(0deg); -moz-transform: skewY(0deg); -ms-transform: skewY(0deg); -o-transform: skewY(0deg); transform: skewY(0deg); } [/css]Chiaramente, senza inserire la regola transition il passaggio avverrà bruscamente. Rimediamo subito:
[css] .box-img > p { background-color: rgba(0, 0, 0, 0.7); color: #FFF; line-height: 1.5; margin: 0; padding: 20px; width: 460px; height: 295px; position: absolute; top: 0; left: 0; -webkit-transform: skewY(90deg); -moz-transform: skewY(90deg); -ms-transform: skewY(90deg); -o-transform: skewY(90deg); transform: skewY(90deg); -webkit-transition: all 500ms ease-in-out; -moz-transition: all 500ms ease-in-out; -ms-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out; } [/css]Ecco quindi il risultato finale. Come ho accennato prima, è possibile utilizzare diverse tecniche per nascondere (e quindi mostrare) la didascalia: possiamo utilizzare translateX o translateY per farla scorrere lateralmente; rotate per farle apparire ruotando, o ancora scale per farla apparire in dissolvenza. O magari una combinazione. Le possibilità sono molte e si può costruire una galleria d'effetto, con solo regole CSS.
Eccoci dunque alla fine di questo breve viaggio nel mondo delle CSS Transform e Transition. Ovviamente ci sono ancora molti aspetti che non ho potuto coprire in questa serie di articoli e che ti invito a studiare nelle specifiche W3C. In questo modo potrai aggiungere un altro "arnese" alla tua cassetta degli attrezzi, da utilizzare per il prossimo progetto.
Una piccola nota finale: in questi esempi ho volutamente inserito nelle porzioni di codice tutte le regole CSS, anche quelle con prefissi proprietari. L'ho fatto per dimostrare quanto possa diventare verboso un file CSS compatibile con tutti i browser, per quanto semplice sia. Ecco perché, come ho già scritto nel precedente articolo, consiglio l'uso di un'estensione per il tuo editor preferito, oppure l'utilizzo di un preprocessore CSS, come LESS o SASS. Per realizzare gli esempi di questo articolo io ho utilizzato LESS tramite WinLess che provvedeva a compilare il file .less in un file .css. Magari in un prossimo articolo parleremo di come sfruttare questi strumenti automatici per semplificarci la vita!