Category Archives: links

The HTML5 test, quanto supporta l’HTML5 il tuo browser?

The HTML5 test è un tool che permette di quantificare il livello di supporto del vostro broeser al nuovo standard HTML5.
Questa utility serve a far capire agli utenti e agli sviluppatori web quale browser supporta al meglio questo linguaggio.

Link: http://www.html5test.com/

Zoomer Gallery, un plugin jQuery per visualizzare le immagini con effetto zoom!

Questo bellissimo plugin jQuery permette di mostrare le immagini con un effetto zoom simile a quello utilizzato da Adobe Flash. È un modo semplice ma elegante per dare un risalto in più alle vostre immagini. Il plugin pesa solamente 2KB ed è facile da usare.

Link: http://addyosmani.com/blog/zoomer-gallery-a-jquery-plugin-for-displaying-images-with-flash-like-zooming-effects/

Demo: http://www.addyosmani.com/resources/zoomer/zoomer.html

BonBon Buttons, pulsanti realizzati con i CSS3!

i BonBon Buttons sono dei pulsanti realizzati con i CSS3, molto flessibili e realizzati con pochissimo codice!
E' possibile applicare tre tipi di materiale "solido", "lucido" e "vetro". Ovviamente è ancora prematuro aggiungere questi pulsanti sui vostri progetti perchè i browser supportati sono Safari, Chrome e Firefox.

Link: http://lab.simurai.com/css/buttons/

Creare una pagina 404 animata!

A chi non è capitato di digitare un'URL sbagliata e di finire nella famigerata pagina 404? Sicuramente al 99% di voi.
Per rendere questa esperienza meno frustrante, oggi vi proponiamo una soluzione diversa dalle altre, che quasi quasi vi verrà voglia di incappare su una di queste pagine. Creeremo una pagina di errore 404 animata!

Per creare questa animazione sarà necessario utilizzare i CSS e jQuery, seguite questo tutorial e non ve ne pentirete!

Demo: http://demo.tutorialzine.com/2010/08/animated-404-not-found-page-css-jquery/404.html

Link: http://tutorialzine.com/2010/08/animated-404-not-found-page-css-jquery/

Riprodurre l’effetto tooltips presente nell’homepage di jQuery!

Se visitate l'homepage di jQuery, potete notare l'effetto tooltip presente nella parte superiore della pagina.
La quantità di codice jQuery necessaria per riprodurre questo bellissimo effetto è quasi nulla, anzi, c'è più codice CSS che jQuery.

Link: http://davidwalsh.name/jquery-tooltips

Aggiungere il supporto Finger-Swipe alle vostre pagine web!

Uno degli aspetti più interessanti e divertenti di utilizzo iPad è la capacità di produrre un cambiamento in una pagina web strisciando il dito sullo schermo dell' iPad. Ad esempio, strisciando verso sinistra per passare alla pagina successiva in una serie di pagine, o strisciando per visualizzare l'immagine successiva in una serie di immagini. Per gli utenti iPad, queste azioni sono intuitive e naturali. Tuttavia, per coloro che realizzano pagine web, l'aggiunta di questa funzionalità può essere un processo impegnativo e difficile. Non più, in questo articolo troverete un tutorial che vi spiegherà come fare!

Link: http://padilicious.com/code/touchevents/

Demo: http://padilicious.com/code/touchevents/basicswipe.html

Effetto Bianco e Nero con HTML5!

Il nuovo tag HTML5 è noto per il suo potere di illustrazione. Ma oggi ve lo mostreremo sotto un'altro aspetto, la manipolazione delle immagini!

Questo è l'elemento più importante che differisce da SVG. Con il canvas è possibile eseguire operazioni sui pixel, si può scrivere una nuova immagine pixel per pixel o importare un'immagine e modificarla. In questo articolo vi mostreremo alcuni fondamenti della manipolazione dei pixel con il tag canvas, e su come utilizzare queste conoscenze per ottenere effetti interessanti!

Link: http://spyrestudios.com/html5-canvas-image-effects-black-white/

Sprites animate con le transizioni CSS3

Nel tutorial di oggi vedrete come creare un'animazione con i CSS3 utilizzando le transizioni.
Il vantaggio di questa tecnica è che non viene utillizzato nessun javascript e quindi avremo un minor peso complessivo del nostro sito. Lo svantaggio però, è che questa caratteristica non è ancora supportata da tutti i browser ma solamente dai browser basati su WebKit come Chrome e Safari.

Link: http://www.impressivewebs.com/animated-sprites-css3/

WanderWall, un’interfaccia Hover-Based realizzata in jQuery, CSS3 e HTML5!

Addy Osmani vi insegnerà come creare un utile interfaccia utente hover-based utilizzando jQuery, CSS3, HTML5 e @ font-face.
Con la popolarità di applicazioni web touch su dispositivi mobili, è stata semplificata  la navigazione, in quanto, con un semplice tocco è possibile passare da una pagina all'altra. Perchè non applicare tutto questo anche sui dispositivi desktop? Seguite il tutorial e lo scoprirete!

Link: http://addyosmani.com/blog/wanderwall/

Manipolare i colori in tutte le possibili combinazioni? Con xColor si può!

Il plugin xColor è un'estensione jQuery facile da usare per manipolare i colori in tutte le combinazioni immaginabili.
Questo plugin implementa un parser dei colori ed un insieme di metodi per la loro manipolazione. Una tra le più importanti e interssanti funzioni è isReadable() che permette di verificare se un testo è leggibile su un certo sfondo.
Il valore dei colori può essere passato in differenti modelli: RGB, HSV/HSB, HSL e la loro estensione alpha.

Link: http://www.xarg.org/project/jquery-color-plugin-xcolor/

Creare un’interfaccia scrollabile con jQuery Image Scroller Plugin

jQuery Image Scroller Plugin crea un'interfaccia scorrevole facendo scorrere un'immagine di grandi dimensioni in una zona più piccola. L'idea è che abbiamo un contenitore con una altezza e larghezza fissa e un contenitore per l'anteprima di tale immagine. Una volta che il plugin viene applicato, verrà allegata una piccola area che rappresenta la zona in cui è possibile trascinare su e giù.

Link: http://www.viget.com/uploads/file/image-scroller/