html5 e css3

Il prossimo futuro dei browser :   HTML5  e  CSS3

• per scaricare il codice clicca css3tutorial.zip
• guarda la demo del codice in funzione
• Guarda il video su Vimeo : http://vimeo.com/20939385

In questo articolo vorrei mostrarvi le potenzialità che verranno introdotte da HTML5 e CSS3. La standardizzazione di questi è ancora in  fase di definizione e ci vorrà ancora del tempo prima che venga definitivamente rilasciato. Nonostante ciò , i più importanti browser supportano già buona parte delle nuove funzioni che il nuovo standard metterà a disposizione. Vediamo quali :

• Firefox 3.7 (disponibile in versione alpha) – Le versioni precedenti supportano il CSS3 ma non i transitional dinamico –
• Google Chrome 4.0+ – attulamente il browser che implementa nel migliore dei modi HTM5 e CSS 3 –
• Safari 3.1+ – buon supporto a HTML5 e CSS3  –
• Opera 10.5+ – supporta il CSS3 statico e il transitional dinamico pur mostrando qualche bug –
• Internet Explorer 9 – supporta il CSS3 statico  ma non supporta il transitional  dinamico –
• Internet Explore v.6/v.7/v.8 – nesun supporto all ‘ HTML5  e CSS3 –

Se quindi volete cominciare a comprendere il funzionamento del futuro standard e , se usate windows , vi consiglio vivamente di installare Google Chrome che,  oltretutto , a mio avviso ,  è anche il miglior browser da tutti i punti di vista.

Ora , se siete pronti , vorrei mostrarvi le caratteristiche più avanzate del CSS3 e cioè il transitional dinamico senza l’utilizzo di javascript. Nei vostri fogli di stile potrete inserire le istruzioni per far si che quando l’utente scatena un evento ( per esempio  si posiziona su un elemento <div> o su un’immagine <img> ) viene avviato un effetto grafico che si prolunga nel tempo secondo determinate regole. Si può scegliere quali sono i parametri dei vostri elementi che verranno “animati”  e  la durata della transizione per ognuno di essi. Vediamo un esempio :

Video Articolo :

IL CSS :

.ul_menu li

{

/* Parametri di partenza */

width: 150px;

height: 30px;

color: #954A00;/* impostiamo un bordo arrotondato /

-o-border-radius: 8px; /* opera */

-moz-border-radius: 8px; /* firefox */

-webkit-border-radius: 8px; /* crhome , safari */

border-radius: 8px; /* standard , per ie9 */

/* abilitiamo la transizione per tutti i parametri css :

all -> la transizione verrà applicata a tutti i parametri css ,

.6s -> la transizione durerà 1 secondo ,

ease-in-out -> la ransizione avverrà con l’effetto ease sia quando l’evento viene scatenato “in”

sia quando l’evento viene “rilasciato” “out” */

-o-transition: all 1s ease-in-out; /* opera */

-webkit-transition: all 1s ease-in-out; /* firefox */

-moz-transition: all 1s ease-in-out; /* crhome , safari */

transition: all 1s ease-in-out; /* standard , per ie9 */

}
.ul_menu li:hover

{

/* Quano andremo con il mouse sopra un elemento <li> comincerà la transizione dei parametri css

che subiscono una variazione rispetto allo stato precedente */

/* prima il border radisu era di 8px , ora 15px , quindi vedremo una strasizione da 8 a 15 */

-o-border-radius: 15px;

-moz-border-radius: 15px;

-webkit-border-radius: 15px;

border-radius: 15px;

/* il cole di background prima era none , cioe trsparente , ora è #F4FEFF e qundi vedremo una

transizione anche sul background */

background: #F4FEFF;

/* prima il bordo non era impostato : la transizione avverrà anche sui parametri che non erano

stati impostati esplicitamente nello stato precedente e cioè si trovano nello stato di default

nel caso del border lo stato e niente bordi */

border: 1px solid #0F7799;

}

L’ HTML :

<div id=“menu”>

<ul class=“ul_menu”>

<li>Home Page</li>

<li>Blog</li>

<li>Download</li>

</ul>

</div>

Vediamo un ‘ altro esempio :

Ora prendiamo in considerazione un esempio un p0′ più articolato. Questa volta andremo a definire le porpietà transitional una alla volta impostando quali parametri saranno soggetti all’animazione e per ogni ognuno di essi imposteremo la durata dell’animazione e il  tempo di delay .

IL CSS :

p

{

height:100px;

width:100px;

margin-left:50px;

border:1px solid #ccc;

/* standard */

transition-timing-function: ease;

transition-property: background-color, width, height , margin-left;

transition-duration: 0.5s, 1s, 1s , 2s;

transition-delay: 0s, 0s, 1s , 1s;

/* crhome , safari */

-webkit-transition-timing-function: ease;

-webkit-transition-property: background-color, width, height , margin-left;

-webkit-transition-duration: 0.5s, 1s, 1s , 2s;

-webkit-transition-delay: 0s, 0s, 1s , 1s;

/* Mozzila Firefox */

-moz-transition-timing-function: ease;

-moz-transition-property: background-color, width, height , margin-left;

-moz-transition-duration: 0.5s, 1s, 1s , 2s;

-moz-transition-delay: 0s, 0s, 1s , 1s;

/* Opera */

-o-transition-timing-function: ease;

-o-transition-property: background-color, width, height , margin-left;

-o-transition-duration: 0.5s, 1s, 1s , 2s;

-o-transition-delay: 0s, 0s, 1s , 1s;

}p:hover

{

height:300px;

width:400px;

background:red;

margin-left:200px;

}

L ‘ HTML :

<p>Paragrafo di esempio</p>