Home + Webmaster + Servizi utili + Manuali + Manuale CSS + Effetti sui link con CSS

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