Effetti sui link con CSS

La potenza dei CSS ci permette di gestire in maniera ottimale lo stile dei link di una pagina, ottenendo anche una serie di effetti particolarmente gradevoli.

Col normale Html possiamo agire sul colore dei link semplicemente implementando nel body il seguente codice:

<body link="#0000FF" alink="#FF0000" vlink="#CECECE">

impostando in questo modo il colore del link da visitare in blu (#0000FF), il colore del link attivo il rosso (#FF0000) ed il colore dei link visitati in grigio (#CECECE).

Con i CSS possiamo agire analogamente sulle stesse tre proprietÓ e non solo, possiamo utilizzare una quarta proprietÓ che ci consente di scatenare un effetto al passaggio del mouse su di un link, vediamole:

a:link { color: #0000FF; } /* link da visitare */
a:active { color: #FF0000; } /* link attivo */
a:visited { color: #CECECE; } /* link visitato */
a:hover { color: #FF0000; } /* link al passaggio del mouse */

impostando, ad esempio, anche il colore del link al passaggio del mouse in rosso.

Specificate le quattro proprietÓ, vediamo come possiamo agire in maniera pi¨ snella e veloce, impostiamo il colore del link da visitare, attivo e visitato di una sola tonalitÓ e con un solo passaggio, abbiamo due modi per fare questo, vediamoli entrambi:

a:link, a:active, a:visited { color: #0000FF; } /* primo metodo */
a { color: #0000FF; } /* secondo metodo */

Altro vantaggio offerto dai CSS Ŕ quello di eliminare la sottolineatura dei link e di reimpostarla ad esempio al passaggio del mouse, o volendo possiamo scegliere anche di far apparire la sottolineatura al di sopra della scritta, vediamo un esempio:

a { color: #0000FF; text-decoration: None; } 
/* il link in partenza non Ŕ sottolineato */
a:hover { color: #FF0000; text-decoration: Underline; } 
/* il link diventa sottolineato  al passaggio del mouse */

in questo modo, invece, otteniamo l'effetto di "sopralineatura"

a { color: #0000FF; text-decoration: None; }
a:hover { color: #FF0000; text-decoration: Overline; }

Possiamo anche combinare i due effetti:

a { color: #0000FF; text-decoration: None; }
a:hover { color: #FF0000; text-decoration: Underline Overline; }

Gli effetti che si possono ottenere sono svariati, possiamo ad esempio scegliere di impostare un link che al passaggio del mouse aumenta le proprie dimensioni o viene evidenziato in grassetto o in corsivo, basta provare e riprovare finchŔ l'effetto desiderato no salta fuori!

Autore: Luca Ruggiero