Cookie

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.


TheJoe

Mantengo questo blog a livello amatoriale dal 2009. Sono appassionato di grafica, tecnologia, software Open Source. Fra i miei articoli non sarà difficile trovarne circa la musica, ed alcuni di riflessioni personali, ma preferisco indirizzare la linea del blog principalmente verso la tecnologia. Per informazioni contattami.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.