CSS  »  Articoli  »  Effetti con CSS 

Abbiamo parlato in diverse occasioni di rollover grafico, ad esempio nella serie Menu grafici con rollover e preload via CSS e nell'articolo Grafica per blog con i CSS.

In questo appuntamento riprenderemo le basi della tecnica, presentando un semplice esempio, costituito da un solo link. Si tratta di un ottimo modo per rendere graficamente piacevole un link importante della pagina, quei link che veicolano funzionalità del tipo:

• Iscriviti gratis
• Registrati ora
• Richiedi informazioni
• Richiedi un preventivo
• Maggiori dettagli
• Inizia il tour
• Ordina il prodotto
• Procedi con la registrazione
• Conferma l'ordine

In generale si tratta quindi di link presenti nei siti che offrono prodotti e/o servizi, e un singolo link ben visibile e ben presentato può fare la differenza determinare, o quanto meno favorire, il click da parte dell'utente.

Vedremo qui come sia possibile attraverso una singola immagine trasformare un semplice link testuale, che in assenza di CSS si presenta così:

Figura 1 - Un link in assenza di CSS

In un link decisamente accattivante e funzionale, presentato in questo modo:

Figura 2 - un link con grafica CSS

Esempio di base

Cominciamo così presentando l'esempio di base, un semplice link-bottone con grafica e CSS. Il markup è il più semplice possibile: si tratta di un solo link con class="button", che potrà essere inserito come ultimo elemento di un paragrafo oppure all'interno di un div, come nel caso dell'esempio. Qui di seguito l'unica immagine di sfondo utilizzata nell'esempio:

Figura 3 - Immagine di sfondo per il link-bottone del primo esempio:

Il CSS è costituito da due sole regole: una per lo stato normale del link, e uno per lo stato :hover. In sostanza si tratta di:

• Rendere il link display:block così da potergli attribuire le dimensioni
• Eliminare la sottolineatura tipica dei link
• Assegnare le proprietà del testo e centrarlo
• Definire colore del testo e immagine di sfondo

In fase :hover basterà definire un colore del testo più acceso, così da accompagnare il passaggio del mouse. Vediamo per intero le due regole:

Da evidenziare che per la centratura orizzontale è bastato dichiarare text-align:center, mentre per quella verticale è sufficiente specificare l'altezza di linea nello shorthand font (indicata da /35px nel codice sopra) pari all'altezza del link.

Bastano una semplice immagine e due sole regole CSS per rendere accattivante il nostro link-bottone. Ma si può fare di più, rendendolo ancora più piacevole e funzionale grazie al rollover.

Altri articoli

Altre guide

Altre newsletter