CSS  »  Articoli  »  Effetti con CSS 

In molti articoli della sezione CSS abbiamo fatto uso del fast CSS rollover per ottenere effetti rollover senza la necessità di preload, con poche e semplici regole CSS e una singola immagine.

Abbiamo usato il rollover grafico con i CSS ad esempio nei menu, nei bottoni e negli spotlight, ma è possibile applicarlo anche ad altri elementi grafici. È proprio quello che vedremo in questo appuntamento, in cui realizzaremo un widget di selezione di località con grafica e CSS, cioè una mappa con rollover.

Ecco l'esempio che accompagna l'articolo e il suo screenshot:

Figura 1 - Screenshot dell'esempio

Vediamo innanzitutto il markup: si tratta di un titolo e di una lista non ordinata inseriti in un div. Da notare che ogni list-item ha un id univoco, così da consentirne l'individuazione e la personalizzazione con i CSS.

Il markup è semantico e minimale, e consente di ottenere un contenuto accessibile anche a CSS disabilitati. Ecco come rende l'esempio in assenza di CSS:

Figura 2 - L'esempio in assenza di CSS

Altri articoli

Altre guide

Altre newsletter