Vai al contenuto

Demo effetto riflesso CSS3, ed animazione CSS3

  • Web

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.

9 commenti su “Demo effetto riflesso CSS3, ed animazione CSS3”

  1. Un sogno che si avvera! Speriamo spesso diventi uno standard per tutti i browsers, e che i ritardatari si sveglino.

  2. 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 😀

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.