CSS3: focus su un elemento utilizzando gli effetti di transizione

Tempo fa mi occupai della gerarchia dei selettori in jQuery e fornii come esempio finale un semplicissimo script che poneva il focus su un elemento utilizzando l’effetto opacità. Nell’articolo di oggi mi occuperò di realizzare lo stesso effetto, animazioni comprese, utilizzando semplicemente il CSS3 e le sue nuove proprietà senza alcuna riga di codice Javascript.

Per realizzare l’effetto abbiamo bisogno della proprietà transition disponibile nella nuova specifica e della proprietà opacity già piuttosto famosa.

Codice html

Prima di procedere vediamo il codice html di cui abbiamo bisogno:

view sourceprint?

1 <ul>

2  <li>Item 1</li>

3  <li>Item 2</li>

4  <li>Item 3</li>

5  <li>Item 4</li>

6  <li>Item 5</li>

7 </ul>

Come esempio preliminare è sufficiente una semplicissima lista puntata con 5 elementi.

Primo effetto di animazione con il CSS

Possiamo ora realizzare un classico esempio di animazione diminuendo il valore di opacità di tutti gli elementi della lista ad eccezione dell’elemento puntato dal mouse. Per realizzare ciò abbiamo bisogno di due regole semplicissime e del selettore > (child). Vediamo il codice

view sourceprint?

1 ul:hover > * { opacity: 0.2; }

2 li:hover { opacity: 1; }

Nella prima riga poniamo a 0.2 il valore di opacità di tutti i figli della lista non ordinata all’attivazione dell’evento hover. Con la seconda, invece, facciamo tornare l’opacità ad 1 al solo elemento selezionato.

Effetti di transizione

Abbelliamo ora il nostro esempio inserendo un semplicissimo effetto di transizione che renderà meno “diretto” il cambiamento di opacità degli elementi. Il codice di cui abbiamo bisogno, da inserire in cima al codice visto in precedenza, è il seguente:

view sourceprint?

01 ul > * {

02  opacity: 1;

03  

04  transition-property: opacity; /*standard*/

05  transition-duration: 0.5s;

06  

07  -webkit-transition-property: opacity; /*safari*/

08  -webkit-transition-duration: 0.5s;

09  

10  -o-transition-property: opacity;   /*opera*/

11  -o-transition-duration: 0.5s;

12  

13  -moz-transition-property: opacity;   /*firefox*/

14  -moz-transition-duration: 0.5s;

15  }

In pratica abbiamo semplicemente scelto a quale valore assegnare l’effetto di transizione e la sua durata. Le altre regole sono hacking per far funzionare l’effetto in ogni browser. La compatibilità dei browser è trattata al termine dell’articolo.

Codice Completo

Abbiamo suddiviso il codice per comodità di spiegazione. L’intero codice CSS è il seguente:

view sourceprint?

01 ul > * {

02  opacity: 1;

03  

04  transition-property: opacity; /*standard*/

05  transition-duration: 0.5s;

06  

07  -webkit-transition-property: opacity; /*safari*/

08  -webkit-transition-duration: 0.5s;

09  

10  -o-transition-property: opacity;   /*opera*/

11  -o-transition-duration: 0.5s;

12  

13  -moz-transition-property: opacity;   /*firefox*/

14  -moz-transition-duration: 0.5s;

15  }

16  

17   ul:hover > * { opacity: 0.2; }

18   li:hover { opacity: 1; }

E’ possibile visualizzare l’esempio al seguente link:

Demo 1

Compatibilità dei browser

La compatibilità con i browser è determinata soprattutto dall’effetto di transizione. Esso infatti è compatibile con tutte le ultime versioni di Opera, Safari e Chrome mentre Firefox lo supporta solo nella sua versione 3.7 disponibile al momento in versione alpha. Nelle versioni precedenti di Firefox, però, è possibile utilizzare l’esempio poichè il passaggio di opacità è completamente supportato. Nota negativa, ovviamente, Internet Explorer che non supporta nè l’effetto transizione nè l’effetto opacity.

Un ulteriore esempio

Prima di chiudere l’articolo, però, vi lascio un altro semplicissimo esempio applicato ad una piccola gallery di thumbnails. L’esempio è disponibile al seguente link:

Demo 2

Consiglio ovviamente di testare quest ultimo esemp con browser come Chrome, Safari o Opera per vedere l’effetto di transizione all’opera.