Crea sito

CSS: link sfumato al passaggio del mouse

css-iconOggi andiamo ad affrontare un argomento molto semplice è facile, cioè come creare l’effetto link sfumato al passaggio del mouse con CSS.

Il link sfumato, è molto spesso utilizzato nella sezione del menù di navigazione di un sito web, questo perché da la sensazione effettiva di movimento e un’animazione, che rende l’interazione dell’utente con il portale moto più gradevole.


Ovviamente, nel gioco del link sfumato entrano anche le tonalità dei colori e la posizione del menù stesso. Però il nostro argomento riguarda solo come implementare questa “funzione” in CSS. non serve gran che per fare questo lavoro.

Ecco la sorgente CSS:

Il risultato è questo:
link sfumato Cambiando i valori sulla proprietà opacity, quindi passando opacity: 0.5; al .link e opacity: 1.0; al .link:hover, l’effetto è il seguente:

link sfumato Un’ultima nota, la proprietà text-decoration, vi da la possibilità di aggiungere alcuni effetti tipici e classici, cioè: testo sottolineato, aggiungere un linea spra il testo oppure testo tagliato. Noi con text‐decoration: none; stiamo indicando che non vogliamo nessuna di queste decorazioni, ma che si possono ottenere con le seguenti dichiarazioni:

  • text-decoration: underline;
  • text-decoration: overline;
  • text-decoration: line-through;

Penso che per il momento questo piccolo tutorial, dedicato all’argomento: “link sfumato al passaggio del mouse”; possa finire qui, ci aggiorniamo con un prossimo appuntamento.

 

Consiglio:

Pubblicato da Flavius Florin Harabor

Appassionato d'informatica e da sempre dedicato al mondo della tecnologia e soprattutto al mondo open source. Dedico molto del mio tempo ai sistemi operativi Linux e anche alla programmazione web.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.