Bellissimi e creativi menu animati con CSS3

 

Il tutorial comprende ben 10 differenti menu animati con effetti davvero creativi che si attivano al passaggio del mouse. L’idea di base è di avere una semplice composizione di elementi: un’icona, un titolo principale e un titolo secondario, che verranno animati al passaggio del mouse utilizzando solo le transizioni e le animazioni CSS.


Codice HTML di base

Consultate il tutorial dell’autore o scaricate i file sorgente del codice per vedere come applicare i vari stili relativi ai 10 menu animati. Per vedere dal vivo tutti i menu animati visualizzate la demo.

Demo Download Tutorial | Autore

pixolo ads
Animal Comix
7008 | Articolo pubblicato 4 anni fa nella categoria Css - Html, In evidenza.
Puoi seguire tutti i nuovi articoli e gli aggiornamenti di Pixolo.it attraverso i Pixolo feeds feed RSS.
Puoi inoltre lasciare un commento, oppure fare un trackback dell'articolo dal tuo sito.
  • vaVi

    è stupendo come effetto, ma uso dreamweaver e non ho capito come si fà, c’è un tutorial in italiano?

    • pixolo

      Ciao vaVi, la struttura html è sempre la stessa, poi nei fogli di stile (CSS) da scaricare per ogni esempio è presente il relativo codice CSS da applicare. Aprendo i file html di esempio nel pacchetto da scaricare si vede come strutturae il codice html e css per ogni esempio disponibile. Ti allego uno screenshot di una pagina di esempio dove ti ho evidenziato le parti del codice da includere per ottenere uno dei menu.
      Se hai bisogno dimmi pure, saluti.

  • Ho una domanda. Ma se volessi inserire un bottone in un articolo del mio sito, che codice devo incollare?
    Ho un sito fatto con wordpress, e mi piacerebbe inserire un bottone con questo stile, anzichè usare un plugin.
    Grazie

    • pixolo

      Ciao, dovrresti inserire il relativo codice css, magari nel file style.css del tuo tema, e richiamarlo poi in un tuo post utilizzando l’editor html (vedi immagine commento sopra). Saluti

2
SHARES
Be Sociable,
share and enjoy!
Resta aggiornato!
Segui Pixolo anche su Facebook!
Don't show more - I am already fan
×
Salva il post su Facebook
What is a Facebook Save Button?

The save button lets you save the current page to your private list on Facebook for a future use or consultation.
info | close
×