CSS Transition e Transform: come posso utilizzarle?

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 proprietà.

Un primo esempio banale di 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 questo tipo di esempi. Oggi vedremo come realizzare:

  1. un effetto crossfade per immagini: un’immagine che sfuma dolcemente nell’altra
  2. una pila di immagini: tre immagini in stile polaroid che si aprono a ventaglio al passaggio del mouse
  3. didascalie animate: un metodo semplice per realizzare immagini con didascalie animate

Cross fade di immagini

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:

...
<div class="sfumato">
  <img src="img/alpi_th.jpg" alt="Alpi">
  <img src="img/napoli_th.jpg" alt="Napoli">
</div>
...
.sfumato {
  position: relative;
  margin: 0 auto;
}

.sfumato, .sfumato img {
  width: 500px;
  height: 335px;
}

.sfumato 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);
}

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:

.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;     
}

Per ottenere l’effetto desiderato basterà dunque azzerare l’opacità dell’immagine visibile all’hover:

.sfumato img:nth-child(2):hover {
  opacity: 0;
}

Grazie all’istruzione transition specificata il passaggio tra le due immagini avverrà in maniera graduale, come puoi vedere in questo esempio.

Una pila di immagini

In questo esempio simuleremo una pila di immagini che si apre a ventaglio al passaggio del mouse. Di seguito il markup:

<div class="pila">
  <img src="img/alpi_th.jpg" alt="Alpi">
  <img src="img/napoli_th.jpg" alt="Napoli">
  <img src="img/panchina_th.jpg" alt="Panchina">
</div>

Il primo passo è quello di impostare le dimensioni del contenitore e degli stili per le immagini:

.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;
}

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:

.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);
}

Molto meglio! Ora non resta che aumentare la rotazione di queste due immagini all’hover:

.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);
}

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”:

.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;
  -webkit-transform-origin: center 700px;
  -moz-transform-origin: center 700px;
  -o-transform-origin: center 700px;
  -ms-transform-origin: center 700px;
  transform-origin: center 700px;
}

Penso che l’effetto finale sia più che soddisfacente!

Didascalia animate

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:

<div class="caption">
  <div class="box-img">
    <p>Le Alpi...</p>
    <img src="img/alpi_th.jpg" alt="Alpi">
  </div>
  <div class="box-img">
    <p>Napoli...</p>
    <img src="img/napoli_th.jpg" alt="Napoli">
  </div>
  <div class="box-img">
    <p>L'isola di Sicilia...</p>
    <img src="img/panchina_th.jpg" alt="Panchina a Santa Tecla">
  </div>
</div>

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:

.caption {
  width: 500px;
  margin: 0 auto;
}
.box-img {
  position: relative;
  overflow: hidden;
}
.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;
}

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:

.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;
}

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 nell’articolo precedente, skew inclina l’elemento di un certo numero di gradi. Applicando uno skewY di 90 gradi i lati vanno a sovrapporsi, facendo di fatto sparire la didascalia:

.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);
}

In questo modo abbiamo nascosto la didascalia. Applichiamo la pseudo classe hover al contenitore, specificando una distorsione di 0 gradi, per ripristinarla:

.box-img:hover > p {
  -webkit-transform: skewY(0deg);
  -moz-transform: skewY(0deg);
  -ms-transform: skewY(0deg);
  -o-transform: skewY(0deg);
  transform: skewY(0deg);
}

Chiaramente, senza inserire la regola transition il passaggio avverrà bruscamente. Rimediamo subito:

.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;
}

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.

Conclusioni

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 (di cui abbiamo parlato in precedenza su YIW) 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!

Master per Web Designer Freelance
In tutti questi anni abbiamo ricevuto centinaia di richieste di approfondimento sulle numerose tematiche del web design vissuto da freelance. Le abbiamo affrontate volta per volta. Ma ci siamo resi conto che era necessario fare qualcosa di più. Ecco perché è nato One Year Together, un vero e proprio master per web designer freelance che apre finalmente le porte al mondo del lavoro.
Scopri One Year Together »
Tag: , ,

L'autore

Appassionato di web design, si diletta a creare dei layout (X)HTML+CSS. È un maniaco del codice pulito e ordinato, il tipo di persona che vi ritrovate in casa a raddrizzarvi i quadri appesi alla parete. Ha deciso che diventerà un web designer con la “doppia vvu” maiuscola, e trascorre intere nottate sveglio per realizzare il suo sogno.

Sito web dell'autore | Altri articoli scritti da

Articoli correlati

Potresti essere interessato anche ai seguenti articoli:

6 commenti

  1. maxlovegods

Trackback e pingback

Non ci sono trackback e pingback disponibili per questo articolo

Lascia un Commento

Current day month ye@r *