Pulsanti web 2.0 stile glossy

Stampa E-mail

Nell'altro articolo sui pulsanti mi sono impegnato poco e il risultato non mi è tanto piaciuto. Proviamo a fare un altro tentativo per realizzare dei pulsanti tipo "glossy", sempre con Macromedia Fireworks.

Il risultato sarà questo (l'immagine è il file sorgente di Fireworks con i livelli): 

 Esempio bottoni glossy

Come si vede nell'immagine, il pulsante è composto da tre livelli sovrapposti:

  •  Il primo è un rettangolo 193x5px con angoli arrotondati (valore 31), ombra esterna (nero, 7px, 65%, angolo 270°) e gradiente verticale (da scuro, a chiaro nella zona centrale, a scuro in basso). La zona in basso è leggermente più scura di quella in alto;
  • Il secondo elemento è la scritta. Ho usato il font Mido (35 px);
  • L'ultimo livello è il riflesso, un rettangolo (185x26px) arrotondato (valore 38) e gradiente verticale da bianco (trasparenza 70%) a bianco (trasparenza 0%). Va posizionato a 4 px si distanza dal bordo superiore e da quelli laterali del rettangolo più grande.


Scarica il file sorgente in formato .png

Discuti di questo articolo sul forum. (0 posts) 

Ultimo aggiornamento ( domenica 15 luglio 2007 )

Home arrow Webdesign arrow Pulsanti web 2.0 stile glossy

 I Feed RSS di miniDesign

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