Sono fiero di introdurre una nuova fantastica rubrica che interesserà a tutti i webdesigners e web developer. Ogni sabato (abbiamo deciso di iniziare con un giorno di anticipo) vi offriremo gratuitamente un psd (Photoshop file) che potete usare come meglio preferite, modificare oppure semplicemente usarlo da ispirazione. Questa rubrica è ispirata al recente progetto 365psd. I webdesigner che si occuperanno di questa rubrica saranno il sottoscritto (autore del tema Skinbu e di Skimbu.it), Kikkozzo (autore del tema di iPhoneHacks.it e scrittore per Skimbu) e Webdesigner92 (autore di numerosi tutorial di carattere grafico su Youtube e scrittore per Skimbu).

Come primo appuntamento direi di iniziare con qualcosa di molto semplice: dei bottoni estremamente web 2.0, dopo il salto l’analisi ed il download di essi…

Struttura

Il file PSD si suddivide nella cartella Layout che comprende il layout generico della rubrica e la cartella PSD della settimana, che contiene invece gli elementi grafici proposti questa settimana.

Dentro la cartella PSD della settimana trovate tre cartelle: Button, Button Hover, Button Active, che rispettivamente riguardano il bottone iniziale, quando il mouse ci passa sopra e quando il bottone viene cliccato. Ovviamente sarà dovere vostro poi ritagliare ed esportare le immagini e scrivere il codice HTML.

Ogni bottone ha principalmente tre livelli:

• Button, che comprende il rettangolo del bottone con i dovuti stili (ombra esterna, sovrapposizione sfumatura)
• Gloss, che sarebbe il riflesso applicato al bottone
• Text: il testo

Utilizzi

Sono normalissimi bottoni che danno sicuramente un tocco di stile alle vostre pagine, è possibile utilizzarli come bottoni secondari delle pagine (es. come bottoni di download di files o bottoni che mandano a pagine speciali) oppure potete utilizzarli in una barra di navigazione, in quest’ultimo caso vi consiglio di rimuovere l’ombra esterna.

Text-shadow con CSS3

Con CSS3 è possibile aggiungere al testo del bottone il bordo bianco che nel PSD è caratterizzato dal bagliore esterno applicato al testo. La proprietà si chiama text-shadow, ecco un’esempio di un div del bottone.

div#bottone {

background-image:url('indirizzo del bottone');

text-shadow: 0px 1px 0px #fff;

}