immagin top

27.2.13

aggiungere un effetto transizione ai links

27.2.13

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:
a:link {
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;
}
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.

Se lo provate, mi raccomando scrivetemi se l'effetto vi garba o no ;)

17 commenti:

  1. Che bella rinfrescata!
    Sempre pù belllo e più fresco il tuo blog!

    Grazie mille per la dritta!
    Un valore aggiunto certamente.

    Mary

    RispondiElimina
  2. mi piace tantissimo la nuova grafica :) bravissima! non riesco xò a capire l'effetto del tutorial..o meglio, non l'ho visto qui nel tuo blog :/

    RispondiElimina
  3. ...domanda da una principiante-ante-ante ;)...di che link stai parlando che non vedo il tasto in blogger!?

    RispondiElimina
    Risposte
    1. Hai ragione, qui praticamente parlo per chi già conosce come arrivare nell'HTML del blog.
      da 'MODELLO' (che trovi nel menu a sinistra del pannello amministrativo del tuo blog) anziché scegliere 'personalizza' clicca su 'MODIFICA HTML' scorrendo la finestra che ti si apre troverai dei codici, tra cui uno con la scritta 'a:link'...ecco lì, fra le parentesi graffe, devi incollare quel codice che ho scirtto in grassetto :)

      Elimina
  4. Grazie lo faccio subitissimo:)))

    RispondiElimina
  5. Evvai fatto tutto: sei bravissima a spiegare!thanks

    RispondiElimina
  6. ciao Simona,
    mi dai il link per il tuo shop su etsy?
    grazie!
    germana

    RispondiElimina
    Risposte
    1. ciao cara, purtroppo non ho più il negozietto su etsy...è un po' complicato -.-
      ne ho parlato qui nuovo inizio

      Elimina
  7. Ciao Simona, scusa la domanda, ma come hai fatto ad inserire le immagini sotto il titolo, tra l'altro ognuna con un link di rimando? Vorrei farlo anch'io ma non saprei proprio da dove cominciare... Magari c'è già un tutorial sull'argomento, me lo sono perso...
    Ti ringrazio in anticipo! ;)

    RispondiElimina
    Risposte
    1. Ciao Anne, puoi seguire questo mio tutorial su come inserire le immagini nelle tabelle (così come sono le mie), poi ho inserito tutto il codice all'interno del gadget HTML/Javascript e ho trascinato questo stesso gadget subito sopra l blocco dei post :)
      Per vedere un'anteprima e verificare se procedi correttamente puoi inserire i codici in un post di prova ;)

      Elimina
    2. e beh certo se non ti dò il link del tutorial... -.-
      inserire le immagini nelle tabelle

      Elimina
    3. Grandissimaaaa!! Hahahahahaha!!! Mi fai morire! XD
      Grazie mille Simona, sei un tesoro! :*

      Elimina