Siamo tutti un po Facebook, almeno per quanto riguarda la condivisione di amicizie e partecipazione a gruppi vari, ma siamo sempre più contaggiati anche dallo stile di questo fantastico Social Network così minimale e allo stesso tempo funzionale da prendere spesso ispirazione per i nostri progetti. Proprio di ispirazione voglio parlarvi in questo post, mirato a offrire in una singola pagina alcuni stile presenti appunto in Facebook e arricchiti da un piccolo script jQuery con il quale potrete mostrare contenuti aggiuntivi di una News.

Tengo a precisare che la risorsa che potete scaricaricare è a scopo didattico, ma nulla toglie che possiate utilizzare gli stili presenti nella risorsa o magari prendere ispirazione per vostri progetti, magari implementando gli stessi.

Il CSS presente è stato scritto in modo modulare partendo da una formattazione di base degli elementi comuni in un sito, eseguendo un Reset di alcuni valori come liste, fonts e altro per poi accuparsi della definizione di DIV specifici ed elementi figli. L’intero file mostra alcune formattazioni tipiche di Facebook, ma viene affiancato da alcune varianti di mia ispirazione; aggiungendo due dichiarazioni CSS specifiche ho ottenuto angoli arrotondati per alcuni elementi, mentre l’assoluta assenza di dimenzioni specifiche per alcuni elementi è stata appositamente voluta al fine di poter adattare questi elementi in progetti gia esistenti.

Nei miei progetti ricorro spesso ad una Classe CSS generica chiamata .pad o magari .padding nella quale definisco appunto i valori di padding; utilizzo poi la stessa all’interno di un DIV definito per distaccare il contenuto in essa definito senza provocare errori di padding generico o conflitti di margini doppi nei vari Browser; a questo proposito vi segnalo un comodo Plugin per jQuery studiato apposta per eliminare il problema del doppio margine su IE6: box-model-fix-hack

Per quanto riguarda il piccolo script jQuery che ho inserito nell’esempio, potete vedere come senza l’ausilio di Plugin si possono donare al progetto piccole animazioni capaci di rendere la fruizione del sito più gradevole, il tutto con 4 righe di semplice e intuitivo codice; a riguardo vi suggerisco un simpatico articolo scritto da Mauro Accornero su come creare Slide di contenuto con jQuery visitando: howtoweb.it

Infine, troverete in fondo alla pagina di esempio un piccolo CSS script da incollare in un file CSS dedicato che corregge alcuni eventuali problemi di compatibilità di IE6.

Buon lavoro e se vi va dite la vostra.

Scarica la risorsa Beat Fly Facebook Style