Neanche farlo apposta, pochi giorni dopo il mio articolo è uscito Spritely, un incredibile plugin per animare sfondi e oggetti, con solo javascript e html.

Il plugin funziona su tutti i browser (e quando dico tutti, intendo anche IE6..); l’unico accorgimento è quello di utilizzare un plugin per gestire le trasparenze, dato che Internet Explorer 6 non le supporta. Inoltre è supportato da iPhone, iPod Touch e iPad.

L’utilizzo è di una semplicità disarmante e nella pagina gallery puoi vedere anche alcuni siti che hanno già utilizzato spritely.

Ed ecco un semplice tutorial che sfrutta questo plugin.

Prima di iniziare scarica i file necessari per realizzare il tutorial.

Passo 1. Inizializzazione dello script

Tra i tag head, inserisci il codice necessario per inizializzare lo script

Passo 2. Inserimento dei div necessari

Ora dobbiamo inserire il div che farà da sfondo, cioè le nuvole e i div di primo piano dove metteremo i grattacieli e la scritta.

Passo 3. Applichiamo gli stili

Applichiamo gli stili necessari. Importante la proprietà position per quanto riguarda il div text, senza il quale lo script non funziona. Per ulteriori informazioni sulla proprietà position ti invito a leggere l’articolo di Your Inspiration Web.

#background {
			margin:auto;
			width: 798px;
			height: 400px;
			background: transparent url(sfondo.jpg) ;
			border: 1px #3f00f4 solid;
		}

#skyline {
			margin-top:192px;
			margin-left:0px;
		}

#text {
			position:absolute;
		}

Passo 4. Animamo la scritta e lo sfondo

Ora dobbiamo far muovere le nuvole e la scritta, semplicemente inserendo questo codice, sempre tra i tag head.

		(function($) {

			window.app = {

				init: function() {
				//inserisco i metodi da applicare a background e text
				$('#background').pan({fps: 30, speed: 2, dir: 'left'});
				//fps:frame al secondo, speed:velocità e dir:direzione
				$('#text')
						.spRandom({
						//delimito l'area di movimento della scritta
						top: 100, left: 100, right: 800, bottom: 400,
						//velocità e tempo di pausa (ms)
						speed: 3500,
						pause: 1000
					});
				}
			};

			$(document).ready(function() {
			window.app.init();
			});

		})(jQuery);
	

Semplice vero? Per qualunque dubbio o curiosità chiedi pure nei commenti.

Scarica il sorgente

Guarda l’esempio

Troverai 20 set di pennelli per tutte le esigenze: effetti di luce,  pennelli floreali, splatter e molto altro ancora.

L’ennesima risorsa che si va ad aggiungere a tutti gli altri pennelli segnalati fino ad oggi.

Buone creazioni!

Ecco quindi le migliori raccolte realizzate ultimamente dai maggiori blogger stranieri.

The Best Free Fonts of 2010 – CSSAwards

Unique Handwritten Free Fonts For Your Next Designs – PV.M Garage

Top 30 Free But Very Professional Fonts For Everyday Use In 2010 – Slodive

30 Free Fonts For Creative Projects – Web Designer Wall

22 Fresh High-Quality Fonts for Your Designs – Web Design Ledger

10 Free Beautiful Calligraphic Fonts – Noupe

50+ Free High Quality Gothic & Horror Fonts – Hongkiat

Inoltre ti segnalo la rubrica Font Inspiration, realizzata da Giuliano Ambrosio, dove vengono presentati font originali e dei suggerimenti sul loro utilizzo.

Le cose che si riescono a realizzare sono davvero incredibili, ma è anche vero che per sfruttarlo al meglio bisogna essere bravi a disegnare.

Alcuni di questi tutorial sono avanzati, e quindi se è la prima volta che utilizzi Illustrator ti consiglio di andare a vedere questi tutorial in italiano.

A queste risorse sono felice di aggiungere 40 bellissimi wallpaper raccolti da Naldz Graphics, da poter scaricare liberamente e da cui prendere ispirazione. Magari ci scappa anche un tutorial

Ecco alcuni tra i miei preferiti presi dalla raccolta

Ti ricordo che questi sono solo alcuni dei wallpaper che troverai nella raccolta.

Prima di iniziare, scarica l’immagine che viene usata nel tutorial.

Ed ecco il video tutorial.

Al solito vediamo i semplici passaggi nel dettaglio

Passo 1 – Aggiungi il testo

Con lo strumento testo e con un carattere non di piccole dimensioni (nel nostro caso 12 pixel), scrivi un testo, che puoi prendere da loremipsum.com.

Passo 2 – Lavoriamo sul testo

Nei livelli, fai tasto destro sul livello del testo e scegli la voce Alfa a selezione.

Poi inverti la selezione, andando nel menu su Seleziona-Inverti (CTRL+I).

Passo 3 – Trasformazione

Seleziona il livello dell’immagine e premi CANC, in modo da eliminare la selezione.

Poi nascondi il livello del testo. Dovresti essere arrivato a questo punto.

Passo 4 – Tocco finale

Aumenta il contrasto dell’immagine, andando su Colori – Contrasto e luminosità e imposta il valore del contrasto a 76 e la luminosità a -24. Questi valori sono arbitrari e dipendono dall’immagine che si va ad elaborare.

Se ti interessa la versione per photoshop, ti consiglio di andare a leggere il tutorial realizzato dall’amico Giuliano Ambrosio di juliusdesign.net.

Ecco quindi alcune fantastiche foto scattate di notte prese dalla raccolta, che immortalano giochi di luce sensazionali.

Queste e molte altre splendide foto le troverai nella raccolta completa, stilata da Web Desisgn Dev.

Ho raccolto per te otto incredibili fonti di ispirazione per qualsiasi esigenza: loghi, menu, html5, template originali, utilizzo delle trasparenze e molto altro tutto in questo articolo!

Si comincia!

Fantastic Content Sliders for your Inspiration – Web Designer Depot

Uno dei modi più eleganti di visualizzare più informazioni possibili in poco spazio, è quello di utilizzare dei content slider, dove i contenuti scorrono in automatico, oppure è l’utente a decidere quale contenuto vedere.

Nell’articolo troverai tantissimi esempi da cui prendere ispirazione per i tuoi progetti.

40 Exclusively Reviewed And Criticized Deviantart Designs – 1st Web Designer

In questo articolo troverai 40 bellissimi template presi da Deviantart, dove oltre a stilare la lista l’autore ha anche espresso delle critiche rispetto ai diversi template.

20 Unique and Creative Logo Designs – Toxel

Il primo passo nella progettazione di un sito è la creazione di un logo vincente. Toxel ha stilato una raccolta di 20 loghi altamente creativi da cui prendere ispirazione.

25 Mega Menus for Your Design Inspiration

Quando si devono progettare siti con molte pagine, creare un menu adeguato per una facile navigazione non è semplicissimo. E quindi ecco 25 esempi di menu realizzati per siti con numerose pagine.

20 exceptionally cool websites using HTML5 as their markup – Web Developer Juice

Ormai se ne sente parlare costantemente di HTML5 e CSS3: ecco 20 esempi che utilizzano i futuri standard per la creazione di pagine web. Da notare tra i siti che anche l’Italia gioca il suo ruolo!

55 Colorful Web Designs to Inspire You- Web Design Ledger

Utilizzare tanti colori in un sito web è pericoloso, perchè si rischiano di creare delle “carnevalate” (come diceva il mio prof di web design..). Questa raccolta di 55 siti invece è un esempio di come sposare tanti colori fra loro in modo perfetto.

50 Examples of Beautiful Illustration in WebDesign – Acris Design

Splendida raccolta dove vengono unite le capacità di disegno al web design. Questi siti sono fatti per chi è bravo a disegnare (non è il mio caso….).

Showcase of Transparency in Web Design – Vandelay Design

Un’altra tecnica, utilizzata spesso quando bisogna scrivere dei testi sopra le imamgini, è l’uso delle trasparenze. Ecco quindi 35 esempi creativi dove viene usata questa tecnica.

Anche il peso gioca il suo ruolo, dove i filmati in flash rallentano di molto il caricamento delle pagine, a dispetto di javascript dove gli elementi vengono caricati volta per volta.

Tu dirai: dimostramelo caro Federico!

Una prima dimostrazione sono i tutorial javascript che io ho proposto in questo blog, per realizzare navigazioni animate, slideshow e molto altro ancora.

Non ti bastano neanche questi? Allora ecco quattro articoli che ti faranno ricredere sulle potenzialità di javascript, e di jquery in particolare.

How jQuery is Killing Flash + jQuery Tutorials & Plugins to Beat Up Flash Animations

L’articolo che mi ha ispirato ad aprire questa discussione. Aext.net ha esposto le sue ragioni sul fatto che Flash piano piano stia morendo, rispetto a determinate applicazioni. Poi propone diversi tutorial e plugin che permettono di realizzare effetti equivalenti a flash.

Top 10 Tutorials to Replace Flash With jQuery

Anche Smashingwebs non è rimasto indifferente alle potenzialità di jquery, proponendo 10 tutorial che possono aiutarti a rimpiazzare Flash per determinate applicazioni.

10 jQuery Transition Effects: Moving Elements with Style

DevSnippets ha raccolto 10 tutorial per realizzare effetti di transizione, per menu o slideshow. Sono effetti nuovissimi e sono sicuro che alcuni non li hai mai visti.

25 Amazing and Fresh jQuery Plugins

Speckyboy ha raccolto 25 plugin jquery per le più svariate applicazioni, come slideshow, realizzazione di tooltip, gestione delle mappe di google e molto altro ancora.

Come vedi grazie a questi tutorial puoi fare moltissime cose che fino a qualche anno fa solo con flash si potevano realizzare, mentre ora la musica è cambiata.

Tu cosa ne pensi? In quali casi non puoi fare a meno di flash?

Ci vuole veramente poco per ottenere questo effetto. Vediamo quali sono i passi per realizzarlo.

Scarica i sorgenti prima di iniziare con il tutorial.

Passo 1. Inizializzazione script

Al solito tra i tag head bisogna inserire i codici necessari per inizializzare lo script.

Passo 2. Inserimento della textarea

Ecco il codice HTML per inserire la textarea

	Scrivi e la textarea si ingrandirà
		
			Prova a scrivere e vedrai che la textarea
            si ridimensionerà automaticamente
		

Passo 3. Applichiamo lo script

Ora non resta che applicare lo script alla textarea, con queste poche righe di codice.

Passo 4. Textarea con stile

Ognuno di poi poi potrà personalizzare come preferisce la textarea. Ecco un esempio.

body,html { margin: 0; padding: 0; background: #d5b88e; }
.label {
padding: 5px;
font: bold 10px Georgia, sans-serif;
}

.form {
padding: 20px 20px 10px;
background: #d5b88e;
width: 580px;
overflow: hidden;
}

.form label { font: bold 0.9em Georgia, Arial, sans-serif;
color: #583d17;
padding: 0 0 0 5px;}

.form .w {
float: left;
clear: both;
padding: 5px 5px 0;
background: #b39a76;
font: bold 0.8em Helvetica, Arial, sans-serif;
color: #333;
overflow: hidden; }

.form .w span { padding: 0 0 5px; float:left; }

.form .input {
border: 1px solid #d5b88e;
line-height: 20px;
padding: 5px 5px 5px 5px;
margin: 0 0 5px 0;
width: 537px;
font: 16px Georgia, Arial, sans-serif;
}

.form .w label { padding:0; }

Questa è una soluzione per rendere le form meno scontate e cercare di coinvolgere maggiormente l’utente nell’interazione con il sito.

Scarica il sorgente

Guarda il tutorial