Effetti sui link con i Css

Corso online Responsive Design
Realizzare siti responsivi con HTML5 e CSS3.

Scritto da Luca Ruggiero nella sezione 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!

Ricordo che è possibile consultare le Referenze Css messe a disposizione da questo sito per una lista completa delle proprietà a disposizione.

I più cliccati della sezione Css

:: Effetto testo barrato con con i Css (49.937)

:: Referenze dei fogli di stile Css (41.900)

:: Menu ad effetto mouseover con i Css (39.300)

:: Testo verticale coi Css (20.102)

:: Angoli smussati in un box coi Css (18.980)

:: Box con effetto ombra con i CSS3 (16.391)

:: Posizionare un layer centrato rispetto alla risoluzione con i Css (16.291)

:: Stilizzare i form Html con i Css (16.111)

:: CSS Expression, ovvero: integrare Javascript in un foglio di stile (15.893)

:: Colorare le barre di scorrimento del browser con i Css (14.400)

IN EVIDENZA
DOWNLOAD