CSS  »  Articoli  »  CSS Sprite e Image Replacement 

Il rollover grafico è uno degli aspetti fondamentali del web design ed è un argomento che abbiamo trattato in moltissimi articoli qui sulla sezione CSS: a partire dall'ormai datata serie (ma a parer mio sempre attuale) dedicata ai menu grafici con rollover e preload, passando per gli spotlight con i CSS, ai bottoni flessibili con rollover fino ad arrivare alle sperimentazioni con il menu gloss con i CSS e JQuery solo per citarne alcuni. Manca però in questa sezione un articolo che sia totalmente incentrato su un concetto così imporante: in questo appuntamento faremo una sorta di riepilogo esplorando le diverse soluzioni pratiche che ogni web designer e/o appassionato avrebbe bisogno di conoscere. Sarà inoltre un ottimo modo per raccogliere in unico articolo i casi più rappresentativi di rollover.

Prima di cominciare, è importante fissare un concetto. Ci sono alcuni elementi di una pagina che hanno una predominanza di utilizzo per la loro natura: l'header, il menu, le foto e i bottoni, ovvero tutti quegli elementi ipertestuali che non sono semplici link di testo. È importante accompagnare ogni passaggio su link con una transizione che sia visivamente percettibile, così da far capire all'utente un potenziale cambiamento di stato o pagina. Lo è ancora di più per gli elementi che abbiamo appena citato e la loro natura squisitamente grafica è un ottimo spunto per arrichire l'esperienza di navigazione dell'utente. Vedremo qui come sia possibile farlo tecnicamente nel migliore dei modi. Cominciamo.

Rollover disgiunto

Cominciamo questa serie con un semplicissimo esempio: un link-bottone con rollover, ottenuto con una semplice classe "button" attribuita sul link (<a class="button">..</a>). La grafica che caratterizza l'esempio è costituita da due immagini di sfondo distinte: una per lo stato a riposo del bottone e una per lo stato hover, su cui viene poi sovrapposto il testo del bottone.

Figura 1 - I due stati del bottone

Il CSS dell'esempio è piuttosto semplice: si tratta di rendere il link block-level, per poi attribuire dimensioni, altezza di linea e centratura del testo al link, insieme alle proprietà sul testo. Vediamolo per intero:

Concentriamoci per ora sul meccanismo di rollover, e in particolare sulle due dichiarazioni chiave che corrispondono ai due sfondi per i due stati:

In stato normale viene attribuita l'immagine per il bottone un po' più tenue, per poi mostrare in fase "hover" lo sfondo più acceso così da accompagnare il rollover. Quello che succede in questo caso è che però al primo caricamento di pagina e sul primo passaggio del mouse si verifica una latenza percettibile anche con la più veloce ADSL. Questo perchè il browser interpreta il CSS e richiede la seconda immagine di sfondo al bisogno, cioè solo in fase hover. Questa latenza sparisce in passaggi successivi al primo e visite seguenti, fintanto che l'immagine per la fase :hover resta nella cache del browser.

Altri articoli

Altre guide

Altre newsletter