Paolo De Feo
a- a+

Transizioni con CSS3 come dissolvenza o effetti sullo sfondo di una immagine senza JavaScript

Vediamo come utilizzare la nuova style property per aggiungere effetti o cambiare stile agli elementi della pagina.

Con Transizione CSS3 (CSS3 Transition) si indica una style property di nuova introduzione che permette di aggiungere effetti o cambiare gradualmente stile agli elementi pagina senza fare uso di tecnologie web come Adobe Flash o JavaScript. La proprietà CSS3 Transition non è supportata da Microsoft Interent Explorer. Per gli altri browser (Chrome, Safari, Firefox 4 e Opera 11) richiede invece l’implementazione di un “prefisso” durante la codifica del foglio di stile. In sostanza, la visualizzazione della proprietà applicata è visibile solo sui software di ultima generazione.

Nella creazione del nostro CSS dobbiamo ricordarci di redigere 2 specifiche fondamentali: la sottoproprietà (effetto) CSS da aggiungere e la durata.

Facciamo un piccolo esempio.

div
{
width:100px; /* larghezza di partenza */
height:100px; /* altezza di partenza */
background:red; /* sfondo */
transition:width 2s, height 2s; /* durata della transazione */
-moz-transition:width 2s, height 2s, -moz-transform 2s; /* prefisso per Firefox 4 */
-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* prefisso per Safari e Chrome */
-o-transition:width 2s, height 2s, -o-transform 2s; /* prefisso per Opera */
}
div:hover
{
width:200px; /* larghezza definitiva durante la trasformazione */
height:200px; /* altezza definitiva durante la trasformazione */
transform:rotate(180deg); /* gradi di rotazione */
-moz-transform:rotate(180deg); /* prefisso per Firefox 4 */
-webkit-transform:rotate(180deg); /* prefisso per Safari e Chrome */
-o-transform:rotate(180deg); /* prefisso per Opera */
}

Nell’esempio in alto è stato creato un piccolo DIV di colore rosso che al passaggio del mouse ruota di 180 gradi, un’implementazione multipla che mostra tutte le azioni che si possono compiere.



Ti potrebbe interessare anche

commenta la notizia

C'è 1 commento
Lorenzo
Hai qualche domanda da fare?