Con l'arrivo dei CSS3 è oggi possibile creare delle animazioni sui nostri menu senza l'ausilio di Flash e JavaScript.

Tramite le proprietà “transition-property” delle classi degli stili CSS3 possiamo gestire l'animazione, decidere la durata di suddetta animazione nonchè impostare tutta una serie di variazioni che solo fino a poco tempo fa sembravano impensabili realizzarle in solo HTML e CSS.

Vediamo come in questo semplice esempio:

Data una pagina composta da questo semplice codice:

<div id='nav'><br />      <ul><br />        <li><a href='#'>Menu 1</a></li><br />        <li><a href='#'>Menu 2</a></li><br />        <li><a href='#'>Menu 3</a></li><br />        <li><a href='#'>Menu 4</a></li><br />      </ul><br />    </div>

vediamo come creare dei semplici e simpatici effetti di rollover con tanto di animazione.

All'interno del tag <style></style> della pagina (o su un foglio di stile esterno se preferito) per la definizione degli stili, scriviamo quanto segue:

#nav li {<br />      display:block;<br />      background-color:#cccccc;<br />    }

Quindi impostiamo le caratteristiche del rollover:

#nav li:hover {<br />      background-color:#ff9900;<br />      padding-left:10;<br />    }

Se provassimo il nostro esempio noteremmo un semplice rollover. Come possiamo animarle? Per creare una “transition” basterà implementare lo stile della lista nella seguente maniera (in grassetto le aggiunte):

#nav li {<br />      display:block;<br />      background-color:#cccccc;<br />    <b>  -moz-transition-property:background-color,padding-left;</b><br />    <b>  -moz-transition-duration:1s;</b><br />    <b>  -webkit-transition-property:background-color, padding-left;</b><br />    <b>  -webkit-transition-duration:1s;</b><br />    <b>  -o-transition-property:background-color, padding-left;</b><br />      <b>-o-transition-duration:1s;</b><br />    <b>  transition-property:background-color, padding-left;</b><br />    <b>  transition-duration:1s;</b><br />    }

Come potete vedere lo stile è particolarmente semplice: basta specificare (moz per Firefox, o per Opera, webkit per Safari e Chrome) la proprietà su cui lavorare (ad esempio background-color e padding-left) e la durata (transition-duration) ed il gioco è fatto!

Passando con il mouse sopra una delle voci di menu, vedrete un effetto gradevole di cambio colore e posizione della label del link.

The following two tabs change content below.