Pulsanti stile web 2.0

Stampa E-mail
Creare dei pusanti per siti web 2.0 è molto semplice e richiede davvero pochi minuti.
Vediamo passo passo come fare usando Fireworks Mx.


Questo è il risultato che otterremo (forse per un uso pratico le dimensioni vanno rimpicciolite). bottoni-web-2-0

L'esempio è riferito al pulsante verde, per il blu basta semplicemente cambiare il colore del gradiente.

Creare il gradiente e il bagliore interno

Tracciamo un rettangolo con angoli arrotondati e coloriamolo con un gradiente verticale (nel caso specifico il colore va da #2B822B a #00CC00). 

gradiente

 
Selezioniamo ancora il rettangolo e impostiamo un bagliore interno di colore bianco, largo 2px e con trasparenza 30%.

bagliore-interno 

Creare il riflesso

Tracciamo un ellisse come nella figura (lo sfondo nero ha solo lo scopo di far vedere l'immagine semitrasparente), con gradiente orizzontale da bianco a bianco, e impostiamo a 10 l'opacità del colore di sinistra (v. figura). Allineiamo l'ellisse sul rettangolo, scriviamo il testo (ho usato un Trebuchet Ms da 25px) ed il gioco è fatto. 

riflesso

Altre applicazioni

Con questo tipo di pulsanti si potrebbe facilmente creare un menu orizzontale a tab

menu-a-tab-web-2-0 

Edit: il risultato di questo tutorial non mi è piaciuto tanto. Il tutorial sui pulsanti stile glossy è sicuramente migliore ;) 

Discuti di questo articolo sul forum. (0 posts)

Ultimo aggiornamento ( martedė 17 luglio 2007 )

Home arrow Webdesign arrow Pulsanti stile web 2.0

 I Feed RSS di miniDesign

In evidenza
Il file htaccess
Tutorial mappa Google
Ultime notizie
Le pių lette
Ricerca rapida