Demo effetto riflesso CSS3, ed animazione CSS3
9
Massimo Mastromarino
il 12 febbraio 2011
Di giorno in giorno scopriamo con esempi pratici le potenzialità di CSS3. Una premessa, per una corretta visione è indispensabile l’utilizzo di browser che supportino le nuove proprietà introdotte con CSS3. Attualmente per una visione ottimale di questi demo css3 servirà Chrome o Safari.
Una semplice animazione con CSS3
il primo esempio che vi porgo più che un demo è una domanda esistenziale che attualmente tocca ne profondo chi lavora nel mio campo: “l’esperienza visiva da noi creata in un sito viene vissuta nello stesso modo in tutti i browser?”, la risposta è molto chiara e la trovata su questo sito. Vi invito fortemente a sbirciare il codice sorgente e scoprire con quante poche righe è stato creato questo piacevole effetto.
Effetto riflesso CSS3
Un’altro demo CSS3 molto interessante ci viene proposto da hardboiledwebdesign. Mette in pratica quanto in passato era solo una fantasia di noi web designer. Il riflesso dinamico perfetto! Un riflesso che non necessiti la creazione di un apposita immagine con creata Photoshop, e che non richieda l’uso di nessun tipo di javascript o Flash. Caricando una singola immagine potrete ruotarla e dissolverla con un gradiente in grado di regolare lo start e l’end dell’alpha del riflesso. Guardare per credere, commuovente!!
Per approfondire vi direziono verso blog.typekit.com.
Un sogno che si avvera! Speriamo spesso diventi uno standard per tutti i browsers, e che i ritardatari si sveglino.
Bell’esempio di css3 , questi effetti al momento l’unico modo per riproporli in maniera cross browser sarebbe, lasciare un foglio di stile per i browser con supporto css3 ( gc e safari ) e per i browser che non lo supportano utilizzare jquery.
Questa è una piccola tecnica che ho sviluppato negli ultimi tempi.
Guarda caso ne ho parlato l’altra giornata al mio seminario online su html5 e css3
Bravo rocco! Diffondi il messaggio
Ho pure fatto un’articolo è condiviso le slide dell’evento
http://www.ebug.it/report-buginar-%e2%80%9chtml5-e-css3-nei-miei-progetti-cosa-ho-fatto/
Si venerdì sera se non sbaglio… non avevo la possibilità di essere in diretta ma ora mi guardo volentieri il materiale
Ottima segnalazione!
Speriamo che quelli del W3C si muovano e che IE scompaia! IE 9 non ha aumentato di molto la compatibilità HTML5/CSS3…
Ciao sul mio FF4 però nn funziona…. strano.
L’unico browser che riesce a vedere questi gradienti è Safari 5.05 , Opera, FF4 e IE9 no. E sono tutti aggiornati!