Attualmente si contano più di 100 risorse e sono in costante aggiornamento. I tool sono opportunamente divisi in categorie per trovare più facilmente quello che ti serve.

Lo trovo un servizio quasi indispensabile per un web designer, dato che può velocizzare di molto il lavoro e ci permette di conoscere tecniche che altrimenti potrebbero sfuggirci

Ti segnalo inoltre la rubrica Cool Code, di Julius Design, dove vengono raccolti strumenti e codici utili per sviluppatori e grafici web.

Scarica gratis il jQuery Mega Pack con tutti i miei tutorial jQuery!

Esistono molte gallery di siti da cui prendere spunto ma a volte si rischia di perdersi: ecco perchè ho voluto selezionare per te 20 siti altamente creativi che ti lasceranno a bocca aperta!

Buona visione

Super Awesome

Wear Royale

I’m Designer

Senic

Dataveyes

Scandalous Dirt

Fiart Mare

The Beauty Shoppe

Wells Riley

Dedon

Nordic Ruby

Agenciart

Ekso Bionics

Dog Studio – Happy New Year 2012

Defend the Internet

English Workshop

Juxt Interactive

Michelberger Booze

Mezcal Buen Viaje

Pause Fest

Scarica gratis il jQuery Mega Pack con tutti i miei tutorial jQuery!

Quello che mi piace di questo servizio è che in un colpo d’occhio si può già capire quali proprietà si possono utilizzare, e soprattutto quali sono i modi per rendere compatibili tali proprietà anche con browser più datati.

Potrai filtrare le caratteristiche, utilizzando il motore di ricerca interno, oppure esplorando usando i filtri già predisposti dal servizio.

Oltre a questo servizio volevo segnalarti un bell’articolo di CodRops: 10 Motivi per utilizzare HTML5 fin da subito, che ti toglierà ogni dubbio sull’utilizzo di HTML5.

Scarica gratis il jQuery Mega Pack con tutti i miei tutorial jQuery!

In particolare oggi andiamo a vedere come far comparire degli elementi in base alla opzione scelta in una Select.

Puoi vedere subito la demo di quello che vogliamo realizzare.

Analizziamo il tutorial nei dettagli.

Codice Html

Questo il codice HTML per la Select e per i div che dovranno comparire.

Primo Div
Secondo Div
Terzo Div

Primo div
Secondo div
Terzo div

Mostriamo solo il primo div, mentre gli altri due vengono nascosti (style=”display:none”).

Codice jQuery

Oltre ad includere la libreria jQuery, dovrai scrivere queste poche righe di codice per ottenere l’effetto visto nella demo, prima della fine del tag head.

Come puoi vedere prima vengono nascosti tutti i div con il metodo .hide(), e poi con il metodo .val() vengono prelevati i valori dalla select e quindi mostrati i div in base all’opzione scelta.

Guarda la demo

Scarica gratis il jQuery Mega Pack con tutti i miei tutorial jQuery!

È importante fin da subito studiare queste proprietà, in modo da essere pronti quando diventerà uno standard. Già attualmente vengono utilizzate nello sviluppo dei siti web, ma sempre con cautela.

In CSS3 Click Chart, per ogni proprietà potrai vedere:

• un codice di esempio;
• un esempio di applicazione;
• da quali browser è supportata;
• dei tutorial su come utilizzare la proprietà al meglio;
• delle soluzioni per ottenere gli stessi effetti anche su Internet Explorer.

Per avere un supporto anche su Internet Explorer di alcune proprietà, ti consiglio di utilizzare CSS3 Pie.

Scarica gratis il jQuery Mega Pack con tutti i miei tutorial jQuery!

Si tratta di Vegas, realizzato da Jay Salvat, che ti permetterà di realizzare in pochi passi uno slideshow di impatto e con caratteristiche che altri slider non hanno.

Come puoi vedere dalla demo, le immagini si adattano perfettamente alla finestra del browser e potrai impostare facilmente un pattern, che verrà messo sopra l’immagine.

Per utilizzarlo al meglio, ti invito a leggere la documentazione, dalla quale potrai notare che basteranno pochissimi passi per utilizzare il plugin. Per qualsiasi problema non esitare a scrivermi nei commenti

In passato, sempre in questo blog, è stato proposto un tutorial jquery su come realizzare uno slideshow di immagini come sfondo del sito.

Tutorial Jquery – Slideshow Di Foto Come Sfondo Del Sito

Inoltre ti segnalo un articolo dedicato alla User Experience, dove si parla proprio dell’uso delle immagini e dei video come sfondo nei siti web.

User Experience: Immagini (Video) ed Emozioni

Scarica gratis il jQuery Mega Pack con tutti i miei tutorial jQuery!

Oggi vediamo come applicare Mosaic, plugin jQuery realizzato da Build Internet, ai post di WordPress.

Puoi vedere la demo di Mosaic per capire quello che si vuole realizzare con il tutorial.

Questa tecnica può essere particolarmente adatta per un portfolio realizzato in WordPress, o per i top post del tuo blog.

Qui metterò solamente il codice relativo a WordPress, mentre per tutti gli effetti e l’utilizzo di Mosaic in generale ti rimando alla pagina del plugin, che ti consiglio di scaricare prima di provare il tutorial.

Codice WordPress

<?php query_posts( 'posts_per_page=5&cat=2' );
  	if (have_posts()) : while (have_posts()) : the_post(); ?>

		

<?php the_title() ?>


		
<?php the_post_thumbnail() ?>


	<?php endwhile; endif; ?>

Il primo passo è quello di fare una query dove andiamo a prendere i post che desideriamo, tramite la funzione query_posts.

Poi nel ciclo classico di wordpress andiamo a prendere il link all’articolo con la funzione the_permalink(), il titolo (the_title()) che comparirà al passaggio del mouse sopra la miniatura, impostata in precedenza nell’articolo (the_post_thumbnail()).

Codice jQuery

Applichiamo ora Mosaic al box, che dobbiamo richiamare nell’header del nostro tema WordPress e applichiamolo ai box.

<script type="text/javascript" src="mosaic.1.0.1.min.js"></script>
<script type="text/javascript">
			jQuery(function($){
				$('.bar').mosaic({
					animation:'slide'
				});
		    });</script>

Finito! Appuntamento al prossimo tutorial

Scarica gratis il jQuery Mega Pack con tutti i miei tutorial jQuery!

Effetti di parallasse, zoom, rotazioni, fade verranno applicati durante lo scrolling verticale del sito  agli elementi che desideri.

Per ottenere questi effetti bastano pochi semplici passi, che ti invito ad analizzare nel sito ufficiale dove potrai scaricare l’esempio e accedere alla documentazione

Questo plugin lo trovo particolarmente indicato per siti a una pagina con navigazione verticale animata, come puoi vedere in questi quattro esempi.

Smokey Bones

Anna Safroncik

Nike Better World

Shop Pub

Scarica gratis il jQuery Mega Pack con tutti i miei tutorial jQuery!

Faccio a tutti i miei lettori gli auguri più sinceri di passare bene queste vacanze e di rilassarvi un po’.

Vi lascio con 3 regali targati Fedeweb

Non Farsi Fregare da Presunti Web Designer – Fedeweb Ebook Gratis

La prima guida in Italia per non farsi fregare da presunti web designer, più di 200 download in pochi giorni, regalatela anche tu

Voglio saperne di più

Fedeweb Horizontal Template – Tema Html Css Con Navigazione Orizzontale Animata

Il primo template html css e javascript con navigazione orizzontale animata, che potrai avere su libera donazione.

Voglio saperne di più

Fedeweb jQuery MegaPack

Tutti i tutorial jQuery realizzati in questo blog raccolti in un unico Megapack: basta che diventi Fan o ti abboni gratis ai feed rss e può essere tuo.

Voglio saperne di più

Scarica gratis il jQuery Mega Pack con tutti i miei tutorial jQuery!

A volte, dettati dalla moda, si rischia di inserire questo elemento un po’ a casaccio: dato che tutti hanno uno slideshow, allora lo metto anch’io.

Per questo ho raccolto 30 esempi creativi e funzionali di utilizzo di slider jQuery da cui prendere ispirazione per futuri progetti.

Stella Mccartney

Falcon Northwest

IWC

Jay Hollywood

Mens World

Allan Yu

Build By The Factory

Boerdam

Factoria

Marco Tortoli

Esteban

Kontoblick

Mint

Slice Machine

Tea Round

Direct Design

Vyniknite

Nealite

Pixel Novel

Gap Medics

Copimaj Interactive

Malcom Reading

Cake Php

Zuno Studios

Hyperx Media

Soda

Valen

Sven Prim

Treemo Labs

Lorem Ipsum

Scarica gratis il jQuery Mega Pack con tutti i miei tutorial jQuery!