CSSDeck: tante idee dai professionisti del web design
Attenzione
Questo articolo è stato pubblicato più di un anno fa, potrebbero esserci stati sviluppi.
Ti preghiamo di tenerne conto.
Dalla nascita dei CSS3 i web designer sono letteralmente impazziti per le innumerevoli nuove possibilità a disposizione. Alcune delle più eclatanti sono la possibilità di creare un’ombreggiatura (anche sfocata) sotto al testo o a qualsiasi elemento, la possibilità di ruotare gli elementi di quanti gradi si voglia, effetti fade-in e fade-out ed alcune semplici animazioni in genere. La tendenza sembra essere quella di abbandonare (o comunque diminuire) l’utilizzo di software grafici in favore di rendering sofisticati via CSS.
Va ricordato che i CSS3 non sono ancora pienamente supportati dai browser, che explorer anche nelle nuove versioni solitamente risponde in modo atipico a molte istruzioni, e che Firefox (e i programmi basati su Gecko) possiede argomenti alternativi a quelle dettate dal W3C. La conseguenza è che non è consigliato utilizzare i CSS3 se non si garantisce la retrocompatibilità con i browser che ancora non supportano le specifiche.
A questo proposito, di recente mi sono imbattuto in un sito che mi ha lasciato letteralmente a bocca aperta, non tanto per come sia strutturato, quanto per i contenuti. Si tratta di “CSSDeck“, un calderone contenente decine di esempi di utilizzo dei CSS3 di indubbia abilità. In particolare mi hanno piacevolmente affascinato alcuni esempi di utilizzo in cui prima era indispensabile l’utilizzo di JavaScript, mentre ora è possibile strutturare un CSS. Di seguito propongo alcune delle creazioni più eclatanti.
Stretchy Searchbox
Si tratta di un classico menù di navigazione, in cui sfondo a gradiente, bordi arrotondati, effetto fade-in / fade-out al passaggio del mouse e animazione sul focus del campo ricerca sono creati direttamente tramite CSS, l’unica immagine utilizzata è la piccola lente d’ingrandimento, il resto è un render CSS3.
Amazing CSS3 Pressable Button
Un’altra animazione di un certo impatto grafico sono i bottoni a pressione. In questo caso però alla pressione corrisponde anche una piccola ombreggiatura, che rende la pressione più realistica.
Shiny Semi-Transparent Colored Buttons
Un set di bottoni dal tocco realistico con un’animazione al passaggio del mouse e un’altra al click.
0 commenti