Categoria:

Link hover e CSS3

07/01/2014 07:08 Pubblicato da
Share on FacebookTweet about this on TwitterGoogle+Share on Reddit

Screenshot 2014-01-07 07.04.34
Di seguito mostrerò un effetto particolare di link hovering. L’animazione consiste nella comparsa e l’allargamento di una linea orizzontale sotto il link su cui viene posizionato il cursore del mouse.

Demo Download

I browser che non supportano le animazioni mostreranno gli elementi di tipo a come dei semplici link.
Per prima cosa definiamo il contenitore del nostro link, p. Avrà un’altezza di 600px ed il testo al suo interno verrà centrato.

Impostiamo la posizione del link relativa alla sua posizione normale, rimuoviamo la decorazione del testo, settiamo il colore e la dimensione del font. Inoltre ci assicuriamo che il colore del link non cambi anche quando viene posizionato il cursore del mouse sopra.

Successivamente aggiungiamo un bordo e lo nascondiamo tramite una transformation. Facciamo ciò utilizzando il selettore :before ed impostando la scaleX pari a 0. Impostiamo come visibilità hidden per i browsers che non supportano le animazioni.

Infine, rendiamo visibile il bordo e settiamo scaleX a 1 una volta che viene posizionato il cursore del mouse sul link.

Demo Download

21/07/2017 10:14

Leave a Reply

Your email address will not be published. Required fields are marked *