La raccolta sta aumentando sempre più di volume ed è arrivato a più di 400 font in archivio. Trovare quello adatto e di qualità per le nostre esigenze può diventare un’operazione davvero lunga.

Beautiful Web Type ci aiuterà in questo, raccogliendo il meglio, con costanti aggiornamenti.

Ecco alcuni esempi presi dal sito:

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

Sono andato alla ricerca del plugin perfetto e la scelta è caduta su Portfolio Slideshow.

Ho trovato questo plugin completo, grazie ai diversi settaggi messi a disposizione e soprattutto di facile utilizzo da parte del cliente. Infatti per popolare la gallery, basterà aggiungere le immagini nella galleria dell’articolo. 

Inoltre ti voglio svelare un trucco per aprire le immagini della gallery con effetto fancybox.

Prima della fine del tag head e dopo aver richiamato fancybox, aggiungi queste poche righe di codice:

jQuery(".slideshow-content a").fancybox();

Ti invito a visitare il sito ufficiale di fancybox per sfruttarlo al meglio.

Tu cosa utilizzi per realizzare gallery e slideshow in wordpress?

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

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!