La formattazione dei collegamenti ipertestuali (hyperlinks) tramite CSS prevede, come noto, la definizione delle proprietà delle differenti pseudoclassi dinamiche.

Queste vengono normalmente distinte in due gruppi: il primo corrispondente al link “a riposo”, cioè non attivato ed il secondo corrispondente al link attivato con uno dei vari dispositivi di puntamento possibili, con la seguente sintassi nel foglio di stile:

a {
// qui le proprietà comuni a tutte le pseudoclassi dinamiche
…
}

a:link, a:visited {
// qui le proprietà dei link a riposo, già visitati o meno
…
}
a:hover, a:focus, a:active {
// qui le proprietà dei link attivati tramite un dispositivo di puntamento
…
}

(si rammenti che l’ordine in cui le pseudoclassi vengono definite è tassativo in base alle raccomandazioni del W3C).

Di solito i link visitati vengono formattati nello stesso modo di quelli non ancora visitati, tuttavia in casi particolari è possibile assegnare loro proprietà particolari: ad esempio, in un elenco con un numero molto elevato di collegamenti, si potrebbe volere agevolare il visitatore segnalando visivamente quali di questi sono già stati visitati.

Tramite i CSS è quindi possibile variare colore del testo, colore di sfondo, sottolineatura o meno ed altre proprietà, tenendo conto che le regole di fruibilità del sito sconsigliano l’evidenziazione dei links tramite il solo colore differente da quello del testo ordinario, soprattutto quando tali links si trovano nel corpo del testo e non isolati in un menu a parte.

I CSS3 hanno introdotto alcune proprietà che permettono di migliorare l’aspetto dei collegamenti ipertestuali con effetti semplici e gradevoli che, fino ad oggi, richiedevano l’utilizzo di Javascript.

Vediamone un paio che impiegano la proprietà transition.

Innanzitutto, è possibile ottenere una transizione tra il colore del link “a riposo” e quello “attivato” usando la nuova proprietà transition applicata al colore:

a {
-webkit-transition: color 0.5s linear 0.2s;
-moz-transition: color 0.5s linear 0.2s;
-ms-transition: color 0.5s linear 0.2s;
-o-transition: color 0.5s linear 0.2s;
transition: color 0.5s linear 0.2s;
}

La regola di cui sopra – in cui ciascuna dichiarazione è stata scritta per motivi precauzionali con sintassi differenziata per ogni famiglia di browser – determina una transizione che si applica a tutti i collegamenti ipertestuali e sintetizza le seguenti proprietà:

transition-property: color;  /* attiva la transizione sulla proprietà colore */
transition-duration: 0.5s; /* tempo di durata della transizione */
transition-timing-function: linear; /* transizione a velocità costante */
transition-delay: 0.2s; /* ritardo prima che l’animazione inizi */

Impostando quindi dei colori differenti per i due gruppi di pseudoclassi dinamiche, come visto all’inizio, il passaggio da uno all’altro quando il cursore si posiziona sul link avverrà in modo graduale invece che istantaneo.
Nei browser più datati, che non supportano la proprietà transition, l’effetto non sarà ovviamente visibile ma senza conseguenze negative sulla fruibilità.

Una seconda possibilità è quella di sfruttare ancora la proprietà transition applicata, stavolta, al margine del link in modo tale che ponendo il cursore al di sopra, questo si sposti a destra con un effetto di “scivolamento”:

a {
-webkit-transition: margin 0.5s linear 0.2s;
-moz-transition: margin 0.5s linear 0.2s;
-ms-transition: margin 0.5s linear 0.2s;
-o-transition: margin 0.5s linear 0.2s;
transition: margin 0.5s linear 0.2s;
text-decoration: underline;
}
a:link, a:visited {
color: black;
}
a:hover, a:focus, a:active {
color: red;
margin-left: 15px; /* a questo margine sarà applicata la transizione */
}

Qualora si vogliano combinare i due effetti, sarà possibile dichiarare:

transition-property: all;

dopo di che la transizione sarà applicata, con i medesimi parametri di durata, velocità e ritardo, sia al cambio di colore sia al margine.

PPotete vedere un esempio di quanto sopra nei 3 link testuali sotto le immagini nella pagina: http://www.corsidiwebdesignavigevano.it/links.php

Per il dettaglio sulle transizioni CSS3 vedere: http://www.w3.org/TR/css3-transitions/