I CSS3 sono, almeno per il sottoscritto, entrati ormai nell' "olimpo" delle tecnologie "risolvi problemi".
Eh già perchè tramite i CSS3 oggi possiamo fare talmente tante di quelle animazioni o lavori in generale tanto da non far rimpiangere Flash, il chè detto da un Flash-ista è tutto!

Vediamo quindi  come possiamo creare una semplice animazione per visualizzare la didiascalia di un'immagine tramite rollover.

Anzitutto all'interno di una pagina HTML, inseriamo l'elemento desiderato:

<div id="img1" class="element"><img src="logo.png"><br />    <span class="didascalia">HTML5Today Logo</span><br />    </div>

Con l'HTML possiamo fermarci qui. Infatti basterà impostare correttamente gli stili CSS per avere l'effetto desiderato.

Quindi, se vogliamo restare all'interno di un file HTML possiamo scrivere il seguente codice:

<style type="text/css"><br />    .element{<br />    width:140px;<br />    height:70px;<br />    background-color:#113366;<br />    color:#ffffff;<br />    float:left;<br />    margin-right:10px;<br />    overflow:hidden;<br />    -moz-transition-property:height;<br />    -moz-transition-duration:1s;<br />    -o-transition-property:height;<br />    -o-transition-duration:1s;<br />    -webkit-transition-property:height;<br />    -webkit-transition-duration:1s;<br />    }<br />    <br />    .element img{<br />    width:140px;<br />    height:70px;<br />    }<br />    <br />    .element:hover{<br />    height:160px;<br />    -moz-transition-property:height;<br />    -moz-transition-duration:1s;<br />    -o-transition-property:height;<br />    -o-transition-duration:1s;<br />    -webkit-transition-property:height;<br />    -webkit-transition-duration:1s;<br />    }<br />    </style>

Come potete vedere, nelle classi "element" abbiamo impostato (per Safri e Chrome, per Opera, per Firefox) la possibilità di gestire l'animazione tramite "transition-property"  e "transition-duration". 

Ovviamente nella pseudo classe "element:hover" abbiamo specificato la nuova altezza e quindi impostato anche in questo caso la proprietà su cui l'animazione deve andare a lavorare.

Da qui potete scaricare l'esempio.

The following two tabs change content below.