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.
- Articolo precedente Sito web a 3 colonne con CSS: layout liquido, compatibile con tutti i browser e risoluzioni monitor e ottimizzato per Google
- Articolo successivo Siti web mobili per cellulari e tablet pc come iPhone, Android o iPad con CSS3