CSS  »  Articoli  »  Effetti con CSS 

Nel recente articolo Bottoni con rollover abbiamo visto una semplice tecnica per ottenere link-bottoni accattivanti. In chiusura d'articolo ho evidenziato però il problema della soluzione proposta, ovvero una scarsa flessibilità grafica e la necessità di preparare immagini a misura tale da contenere il testo. Un secondo difetto della tecnica proposta è il testo dimensionato in pixel, che rende la soluzione ancora meno flessibile.

In questo appuntamento vedremo come sia possibile superare queste due limitazioni attraverso diversi esempi. Cominciamo subito.

Bottoni flessibili con rollover

Eccoci quindi al primo esempio che accompagna l'articolo. Per prima cosa, vediamo il markup:

Da notare che all'interno del link c'è un elemento span: semanticamente non ha influenza sulla pagina, ma è indispensabile per ottenere la flessibilità degli esempi di questo articolo.

A questo punto vediamo la grafica per l'esempio: si tratta di un'unica immagine larga 350 pixel e alta 70, che è composta dai due stati grafici del bottone:

Figura 1 - Immagine di sfondo dell'esempio

Si potrebbe pensare che l'immagine di sfondo dell'esempio sia più larga del dovuto, ma è per garantire che sia in grado di contenere un testo sufficientemente lungo: in effetti, dell'immagine si useranno solo le parti utili. L'immagine seguente aiuterà a capire la costruzione grafica dell'esempio:

Figura 2 - Costruzione grafica dell'esempio

Per lo stato normale, al link viene attribuita la parte superiore sinistra dell'immagine, insieme ad un padding sinistro, mentre allo span viene assegnata la parte superiore destra dell'immagine, insieme ad un padding destro. Ciò permette di far sì che l'immagine si adatti al testo al suo interno, garantendo un effetto di continuità tra i due sfondi assegnati al link e allo span. Per quanto riguarda il rollover, la costruzione è identica: solo che verrà usata la porzione inferiore dell'immagine, che riproduce lo stesso bottone ma in diverso colore.

Altri articoli

Altre guide

Altre newsletter