Vuoi decorare i tuoi link di testo in modo che reagiscano al passaggio del mouse con delle linee, ma in un modo diverso da una semplice sottolineatura fissa?
Bene, allora puoi continuare a leggere, e forse alcuni di quelli qui sotto potrebbero interessarti per tutti i tuoi link o solo per alcuni in particolare. Dopo ogni esempio, viene descritto in dettaglio il codice CSS che ti permetterà di animarli, in tutti i sensi della parola, in questo modo.
Come ormai consuetudine, potete sperimentare anche con gli stessi codici in Codepen e alla fine del post troverete una piccola spiegazione aggiuntiva per quello più goffo ( BPT ).
a {
posizione: relativa;
overflow: nascosto;
visualizzazione: blocco in linea;
decorazione testo: nessuno;
colore: #333;
}
a:after {
contenuto: "";
posizione: assoluta;
fondo: 0;
sinistra: -100%
; larghezza: 100%;
altezza: 2px;
sfondo: #333;
transizione: sinistra .8s;
}
a:hover:after {
sinistra: 0;
}
a {
posizione: relativa;
overflow: nascosto;
visualizzazione: blocco in linea;
decorazione testo: nessuno;
colore: #333;
}
a:after {
contenuto: "";
posizione: assoluta;
fondo: 0;
destra: -100%
; larghezza: 100%;
altezza: 2px;
sfondo: #333;
transizione: destra .8s;
}
a:hover:after {
destra: 0;
}
a {
posizione: relativa;
overflow: nascosto;
visualizzazione: blocco in linea;
decorazione testo: nessuno;
colore: #333;
}
a:prima,
a:dopo {
contenuto: "";
posizione: assoluta;
alto: 0;
sinistra: -100%;
larghezza: 100%;
altezza: 2px;
sfondo: #333;
transizione: sinistra .8s;
}
a:hover:prima {
sinistra: 0;
}
a:dopo {
alto: se stesso;
basso: 0;
sinistra: se stesso;
destra: -100%;
sfondo: #333;
transizione: destra .8s;
}
a:hover:dopo {
destra: 0;
}
a {
display: inline-block;
posizione: relativa;
colore: #333;
decorazione del testo: nessuno;
}
a: dopo {
contenuto: "";
display: blocco;
margine: sé;
altezza: 2px;
larghezza: 0px;
transizione: tutto .8s;
}
a: hover: dopo {
larghezza: 100%;
sfondo: #333;
}
5. Piegare dal centro verso i lati
a {
display: inline-block;
posizione: relativa;
colore: #333;
decorazione del testo: nessuno;
}
a: prima,
a: dopo {
contenuto: "";
display: blocco;
margine: sé;
altezza: 2px;
larghezza: 0px;
sfondo: #333;
transizione: tutto .8s;
}
a:hover: prima,
a:hover: dopo {
larghezza: 100%;
}
a {
display: inline-block;
position:relative;
color: #333;
text-decoration: none;
padding: 0 4px;
}
a:before,
a:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
transform: scale(0);
transition: 0.5s;
}
a:before {
border-bottom: 2px solid #333;
border-left: 2px solid #333;
transform-origin: 0 100%;
}
a:after {
border-top: 2px solid #333;
border-right: 2px solid #333;
transform-origin: 100% 0%;
}
a:hover:after,
a:hover:before {
transform: scale(1);
}
a {
display: inline-block;
overflow: hidden;
position:relative;
color: #333;
text-decoration: none;
padding: 0 4px;
}
a:before,
a:after {
content: "";
width: 100%;
height: 2px;
position: absolute;
box-sizing: border-box;
transform: scale(0);
}
a:before {
transform: translateX(100%);
bottom: 0;
left: 0;
height: 2px;
border-bottom: 2px solid transparent;
border-left: 2px solid transparent;
transition: .1s transformation linear, .1s height linear .1s;
}
a:after {
transform: translateX(-100%);
top: 0;
left: 0;
height: 2px;
border-top: 2px solid transparent;
border-right: 2px solid transparent;
transition: .1s transformation linear .2s, .1s height linear .3s;
}
a:hover:after,
a:hover:before {
trasforma: translateX(0);
altezza: 100%;
colore del bordo: #333;
}
a {
posizione: relativa;
decorazione del testo: nessuno;
colore: #333;
indice z: 1;
}
a:before {
contenuto: "";
sfondo: #ccc;
posizione: assoluta;
larghezza: 100%;
altezza: 2px;
fondo: 0;
sinistra: 0;
trasformazione: scalaX(0);
animazione: .8s no-hover;
modalità di riempimento dell'animazione: in avanti;
indice z: -1;
}
a:hover:before,
a:focus:before {
animazione: .4s hover lineare;
modalità di riempimento dell'animazione: in avanti;
}
@keyframes hover {
0% {trasformazione: scalaX(0);altezza: 5px;}
45% {trasformazione: scalaX(1.05);altezza: 5px;}
55% {altezza: 5px;}
100% {trasformazione: scalaX(1.05);altezza: 100%;}
}
@keyframes no-hover {
0% {trasformazione: scalaX(1.05);altezza: 100%;}
45% {altezza: 5px;}
55% {trasformazione: scalaX(1.05);altezza: 5px;opacità: 1;}
100% {trasformazione: scalaX(0);altezza: 5px;opacità: .02;}
}
a {
display: inline-block;
position:relative;
color: #333;
text-decoration: none;
transition: all .5s ease;
transform-style: preserve-3d;
}
a:after {
content: "Link";
position: absolute;
top: -100%;
left: 0px;
width: 100%;
background: #ccc;
transform-origin: left bottom;
transform: rotateX(90deg);
}
a:hover {
transform-origin: center bottom;
transform: rotateX(-90deg) translateY(100%);
}
Una volta scelto lo stile desiderato, il codice corrispondente dovrebbe essere aggiunto al template in una qualsiasi delle aree della pagina che supportano CSS. Per Blogger, ho già spiegato come e dove includerlo .
Così com'è, interesserà TUTTI i link sulla pagina, quindi in alcuni casi potrebbe essere conveniente limitarlo solo ai link nel blocco in cui si trovano i post. Per fare ciò, dovresti modificare tutti i selettori a , a:hover , a:after , ecc. in selettori identici, ma preceduti dalla classe (o id) del box contenente i post in questione.
Ad esempio, in un template standard di Blogger, quel contenitore sarebbe .post-body , quindi quello sopra sarebbe .post-body a , .post-body a:hover , .post-body a:after , ecc.
In questo modo, la prima opzione ("Da sinistra a destra") dovrebbe essere così, in modo che influisca solo sui link nel testo dei post e non su altri:
.post-body a {
posizione: relativa;
overflow: nascosto;
visualizzazione: inline-block;
decorazione del testo: nessuno;
colore: #333;
}
.post-body a:after {
contenuto: "";
posizione: assoluta;
fondo: 0;
sinistra: -100%;
larghezza: 100%;
altezza: 2px;
sfondo: #333;
transizione: sinistra .8s;
}
.post-body a:hover:after {
sinistra: 0;
}
...e i selettori per gli altri stili dovrebbero essere modificati allo stesso modo per ottenere un risultato che influisca solo sui post.
Se vogliamo applicare questo stile solo a link molto specifici e non allo stile generale, dobbiamo anche includere un "tag" nell'HTML. Per fare ciò, creiamo prima un selettore speciale invece di quelli generici. Proseguendo con l'esempio 1, il nostro CSS dovrebbe essere incluso in questo modo:
a.links {
posizione: relativa;
overflow: nascosto;
visualizzazione: inline-block;
decorazione del testo: nessuno;
colore: #333;
}
a.links:after {
contenuto: "";
posizione: assoluta;
fondo: 0;
sinistra: -100%;
larghezza: 100%;
altezza: 2px;
sfondo: #333;
transizione: sinistra .8s;
}
a.links:hover:after {
sinistra: 0;
}
E ora, ogni volta che vogliamo un link specifico con quello stile specifico, dobbiamo aggiungere quella classe ( .enlacedes ) al link. In questo modo:
<a class="enlacedes" href="http://direccionenlace.com"> Collegamento</a>
Sia in questa voce che nel Codepen a cui ho fatto riferimento all'inizio di questo post, tutti gli esempi sono realizzati in quest'ultimo modo, in modo che possano essere visualizzati singolarmente.
Commenti
Posta un commento