Effetti di transizione al cambiamento della pagina con i Css

Corso online Responsive Design
Realizzare siti responsivi con HTML5 e CSS3.

Scritto da Luca Ruggiero nella sezione Css

Un effetto molto carino ottenibile con i Css è la sfumatura, l'entrata o l'uscita da una pagina con una serie di forme diverse, è sufficiente inserire questo meta Tag nell'header della pagina:

<meta http-equiv="Page-Enter" content="RevealTrans(Duration=5,Transition=0)">
Esistono 24 diversi effetti enumerati da 0 a 23, nell'esempio abbiamo utilizzato il primo (0)
Transition=0
e lo abbiamo impostato nella pagina in entrata
http-equiv="Page-Enter"
ma è possibile stabilire che l'effetto debba verificarsi in uscita, è sufficiente modificare l'ultima parte di codice proposto con
http-equiv="Page-Exit"
Per modificare la durata dell'effetto, ovvero il suo tempo di esecuzione, attualmente impostato a 5 secondi, basta modificare questa parte del codice:
Duration=5
con ad esempio
Duration=1
Purtroppo l'effetto funziona solo con Ms Internet Explorer. Per vedere tutti gli effetti disponibili è sufficiente cambiare numero da 0 a 23 in questa parte di codice, come credo sia stato già possibile immaginare:
Transition=1

Transition=2

Transition=3

...
Consiglio un utilizzo parsimonioso di questo effetto dato che aumenta i tempi di attesa dell'utente per il raggiungimento della pagina desiderata.

Clicca qui per vedere un esempio di tutti gli effetti.

I più cliccati della sezione Css

:: Effetto testo barrato con con i Css (47.859)

:: Referenze dei fogli di stile Css (41.725)

:: Menu ad effetto mouseover con i Css (39.069)

:: Effetti sui link con i Css (29.539)

:: Testo verticale coi Css (19.848)

:: Angoli smussati in un box coi Css (18.827)

:: Posizionare un layer centrato rispetto alla risoluzione con i Css (16.115)

:: Box con effetto ombra con i CSS3 (16.113)

:: Stilizzare i form Html con i Css (15.868)

:: CSS Expression, ovvero: integrare Javascript in un foglio di stile (15.516)

IN EVIDENZA
DOWNLOAD