Come molti di voi sapranno, è in sviluppo l’evoluzione dell’attuale CSS2, il CSS3. Una parte delle sue nuove funzioni sono già supportate dai browser WebKit (Safari, Chrome) e Gecko (Firefox), come ad esempio, border-radius o box-shadow. Inoltre, il CSS3 presenta una serie di features davvero interessanti e in costante aggiornamento, come la possibilità di creare animazioni o di gestire le sfumature. Ed è proprio della gestione delle sfumature che ci interesseremo oggi, mostrando come creare un’attraente bottone in stile web 2.0 senza utilizzare immagini. Dato che ci sono alcune differenze nel modo di applicare le sfumature tra WebKit e Gecko, il risultato di questa guida sarà compatibile solo con i browser WebKit. Potete vedere una demo del risultato finale cliccando qui, mentre potete scaricare il file utilizzato cliccando qui.

Davvero simpatico ed utile questo mini-sito dove sono raccolti, in modo sintetico, la maggior parte dei codici che permettono la corretta visualizzazione delle novità CSS3 all’interno dei vari browser. Ne permette anche la modifica e l’anteprima in tempo reale, anche se considero questa, una funzionalità piuttosto superflua.

Ho trovato davvero interessante questo articolo del blog WebDesignerWall riguardante le basi del CSS3. E’ infatti spiegato un semplice trucchetto che ti permette di utilizzare quante ombre vuoi in un solo elemento, settando ad ognuna, i valori che preferisci.

Come abbiamo visto in numerosi tutorial, una delle pecche del CSS3 è che non viene supportato da una buona parte dei browser. Tra questi, naturalmente, è presente  Internet Explorer, un vero flagello per tutti i web designer. Dato, però, che IE rappresenta la più grossa fetta di mercato nel campo dei browser web, si ha la necessità di rendere compatibile ogni sito web anche con quest’ultimo navigatore. Un vero lavoraccio.

Oggi vi voglio proporre 5 esempi dove, tramite l’uso di CSS3, vengono ricreate animazioni ed effetti suggestivi senza l’utilizzo di altre tecnologie.