Come probabilmente sapete, Mac OS X Lion è stato rilasciato qualche giorno fa con + di 250 nuove funzioni rispetto al precedente OS Snow Leopard. A primo impatto, ciò che salta maggiormente all’occhio è probabilmente la nuova interfaccia grafica, curata e trasformata nei minimi particolari rendendo il nuovo Mac OS semplicemente splendido, infatti, sono state ricreate tutte le icone, i pulsanti e le barre di caricamento rendendo l’impatto grafico più raffinato ed elegante.
Oggi, voglio mettere a disposizione questa fantastica libreria di icone del nuovo Mac os x Lion ridisegnate dal buon pixify.com che potete scaricare liberamente ed utilizzare all’interno dei vostri siti o applicazioni web.
Come utilizzare il set di icone
Le icone utilizzate in queste tutorial sono state tutte quante racchiuse all’interno di un unico file (cosa sempre consigliata in quanto è meglio caricare un’unica immagine contenente tutte le icone e poi giocare con le classi e i posizionamenti del foglio di stile piuttosto di caricare più 200 icone di dimensioni minori in immagini separate).
Per utilizzare le icone è sufficiente creare uno “span” contenuto all’interno di un “link” ed assegnare a quest’ultimo una classe, ad esempio:
<a class="icon icon1" href="#"><span>Label</span></a>
ora nel nostro foglio di stile occorre solamente posizionare l’icona corretta grazie al posizionamento del background sfruttando la classe appena assegnata “icon1″:
a.icon1 span {background:url(button-icons.png) -0px -36px;}
In questo caso abbiamo richiamato l’immagine “button-icons.png” che corrisponde all’immagine contenente tutte le icone e l’abbiamo posizionata a “0px” e “-36px” per mostrare esattamente l’icona che ci interessa.
Create tanti link quante sono le icone che desiderate mostrare creando nuove classi ed il gioco è fatto!!!
Infine non dimenticate di applicare l’effetto “Hover” aggiungendo la classe “icon” al nostro link come mostrato nell’esempio sopra per applicare l’effetto l’evidenziato.
Guardate la demo o scaricare il file.zip per utilizzare questo tutorial nei vostri progetti e non dimenticate di lasciare dei commenti in caso di problemi, dubbi o consigli.
