Psicomante Blog

Realizzato in collaborazione con Domenico Monaco (kiuz) per la parte di mockup/design in Photoshop e Livio Carpignano (oracle) per logo e skyline, il sito del DrupalCamp è aperto da qualche giorno è già sono più di 60 gli iscritti all'evento!

Si ringrazia Riccardo Bessone, Livio Carpignano, Marco Vito Moscaritolo, Dario Ghilardi e Claudio Beatrice per l'aiuto e i consigli che hanno dato.

La pagina Credits sul sito del Drupalcamp mostra più dettagli sulla realizzazione.

Iscrivetevi, ci troviamo il 2 Ottobre a Torino!

Il sito drupalcamp.it si aggiorna con una splash page che ho realizzato in PhotoshopCS4, con alcune idee di H-BES. Spero vi piaccia :P.

Per quanto riguarda il prossimo DrupalCamp, gli aggiornamenti in merito non dovrebbero tardare ad arrivare, restate sintonizzati sul sito dell'Associazione Drupal Italia e Drupal Italia.

Il druplicon fiammeggiante è opera di Kiuz, realizzato in occasione del DrupalCamp 2009 tenutosi a Crema.

Una delle tante novità di Firefox 3.7 (oltre all'attesissimo supporto per WebGL) saranno le CSS3 Transitions.

C'è da dire che questa volta Gecko è indietro rispetto agli altri engine poiché sia Webkit (e le sue più famose implementazioni, Chrome e Safari) e Presto (o Tardi, l'engine di Opera) hanno già implementato le CSS3 Transitions come da Working Draft del W3C. Come al solito IE/Triton non fa testo, neanche nell'ultima versione, la 9 - Microsoft Wake UP!!

Vediamo la sintassi originale del W3C.

transition:  [ <transition-property> || <transition-duration> || <transition-timing-function> || <transition-delay> ]

Questa sintassi si traduce nei vari browser con i prefissi tipici delle working draft che caratterizzano alcune delle specifiche css3.

-moz-transition:
-webkit-transition:
-o-transition:

Vediamo un esempio:

<style type="text/css">
div#animate1 {
 border: 1px solid black; 
 -webkit-transition: border .5s ease;
 -moz-transition: border .5s ease;
 -o-transition: border .5s ease;
}
div#animate1:hover {
 border: 10px solid green;
}
</style>

Cos'ho fatto in questo esempio?
Ho segnalato l'animazione del border, con la funzione ease (ottenuta tramite una curva di bezier e nello specifico la cubic-bezier(0.25, 0.1, 0.25, 1.0)), per una durata di mezzo secondo.

More Info:
http://webkit.org/blog/138/css-animation/
https://developer.mozilla.org/en/CSS/-moz-transition

Alla prossima puntata con una demo probabilmente più interessante.