Innanzitutto la novità! Quale? La grafica!
Vi piace? Stavolta ho usato una di quelle presenti nel mio shop su etsy, anche se l'ho modificata un pochettino :P
E ora passiamo al piccolo tutorial di oggi: links con 'transition effect' !
Avete notato l'effetto del mio menu in alto? Quello sotto il logo...
Ecco quello è l'effetto 'transition', ossia passare da un colore ad un altro, quando si passa su col mouse, con un specie di effetto 'fade' .
Non è complicato ottenere questo effetto, bisogna solo aggiungere una piccola voce negli stili dei links, ossia quello scritto in grassetto:
Se lo provate, mi raccomando scrivetemi se l'effetto vi garba o no ;)
Vi piace? Stavolta ho usato una di quelle presenti nel mio shop su etsy, anche se l'ho modificata un pochettino :P
E ora passiamo al piccolo tutorial di oggi: links con 'transition effect' !
Avete notato l'effetto del mio menu in alto? Quello sotto il logo...
Ecco quello è l'effetto 'transition', ossia passare da un colore ad un altro, quando si passa su col mouse, con un specie di effetto 'fade' .
Non è complicato ottenere questo effetto, bisogna solo aggiungere una piccola voce negli stili dei links, ossia quello scritto in grassetto:
a:link {Il valore numerico sta ad indicare il numero dei secondi che impiega l'effetto a passare dal colore iniziale a quello d'arrivo; potete cambiarlo a seconda del vostro gusto.
text-decoration:none;
color: $(link.color);
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
}
Se lo provate, mi raccomando scrivetemi se l'effetto vi garba o no ;)