Tag Archives: Web development

Un bel set di icone creato usando solo CSS

L’inglese Nicolas Gallagher è un front end developers di Twitter e, al momento, lavora anche a Normalize.css e HTML5 Boilerplate. Sul suo blog c’è un esperimento davvero interessante: Nicolas ha creato un vasto set di icone utilizzando solo CSS. I risultati, a mio parere, sono davvero notevoli. Alcune funzionano bene anche in Explorer 8. Non ho testato Explorer 9, ma assumo che vada anche meglio del suo predecessore. I browser standard compliant, invece, le visualizzano perfettamente.

Questo cerchio e’ fatto usando solo CSS

Anche questo cuore è interamente fatto di CSS

È chiaro che esistono diversi modi di creare e usare icone nelle nostre interfacce web. Possiamo utilizzare semplici immagini come nell’esempio che segue

Questo check mark è un’immagine

Oppure qualcosa come Font Awesome, ad esempio, che ci fornisce una collezione davvero bella di icone, ma il metodo usato da Nicolas è assai interessante da diversi punti di vista. Primo fra tutti quello dell’ottimizzazione dato l’evidente risparmio di banda che questo metodo ci permette.

css_icons