Rebelia.it

[css] Simulare dei pulsanti

Notizia del 12/12/2006

Per questo tutorial sono state usate due piccole gif di 17 pixel di larghezza e 15 di altezza; come si può vedere, i due fiori rappresentati sono l'uno allineato a sinistra e l'altro a destra per meglio creare l'effetto del pulsante premuto:

Il codice xhtml usato per il menu è come per l'altro tutorial un normale elenco puntato:

Vediamo il CSS commentato pezzo per pezzo:

Trattandosi di una pagina che non contiene nient'altro che il menu, mi limito a dichiarare i parametri necessari per il font dopo aver azzerato a tutti gli elementi padding, margin e border.

Unici parametri necessari la larghezza e l'eliminazione del punto elenco

Imposto un bordo inferiore minimo a <li> per superare un problema con Internet Explorer che altrimenti distanzierebbe troppo gli elementi a causa del display: block dato ad <a>.

La maggior parte della formattazione dev'essere impostata per <a>:

• display: block; impostando questo valore, il tag <a> normalmente inline, cioé che non costringe quanto viene dopo ad andare a capo e che occupa solo il minimo spazio necessario, diventa un tag blocco, cioé occupa tutto lo spazio a propria disposizione: in questo modo TUTTA la superficie disponibile è attiva (per rendersene conto, è sufficiente passare il mouse sul colore di sfondo lontano dal testo)
• height: 20px; imposto l'altezza in modo da aumentare la superfice cliccabile; per la misura esatta devo anche tener conto dell'altezza delle immagini che andrò ad usare
• color: #006200; imposto il colore di sfondo uguale a quello usato per le immagini
• background: #aeaeae url(fiore_verde.gif) no-repeat center left; imposto il colore di sfondo uguale a quello usato per lo sfondo delle immagini e inserisco il fiore come sfondo del tag a sinistra del testo facendo in modo che non si ripeta (no-repeat)
• padding-left: 20px; inserisco dello spazio tra il bordo del tag e il testo vero e proprio, in modo da non sovrapporre quest'ultimo all'immagine
• text-decoration: none; tolgo la sottolineatura dal link: essendo un menu, non ci saranno comunque confusioni
• font-weight: bold; imposto il grassetto
• da border-top: 1px solid #cecece; a border-left: 1px solid #808080; per ottenere l'effetto pulsante, formatto i quattro lati del bordo usando in alto e a sinistra una sfumatura più chiara del colore dello sfondo, mentre a destra e in basso uso una [sfumatura più scura

Per l'effetto "pulsante premuto" vero e proprio modifico i seguenti parametri:

• color: #fff; cambio il colore del testo per dare maggior risalto alla posizione del mouse
• background: #aeaeae url(fiore_arancione.gif) no-repeat center left;
• padding-left: 23px; aumento lo spazio a sinistra del testo per l'effetto "premuto"
• da border-top: 1px solid #808080; a border-left: 1px solid #808080; per l'hover inverto i colori rispetto a prima: per i due lati che prima erano più scuri userò la tonalità più chiara e viceversa

La somma delle varie modifiche (fiore spostato nell'immagine, maggior spazio tra bordo e testo, inversione dei colori) crea l'impressione di un pulsante premuto e senza usare un solo comando Javascript:

Il foglio di stile completo:

Scarica il codice e le immagini che compongono il menu (file zip - 2kb)

I campi con * sono obbligatori.