Pubblicato da: Max
In data:
8 Mar 2022
Tempo di lettura:
Ciao! Nel video-tutorial di oggi, realizzeremo un
Testo menu con effetto 3D
al passaggio del mouse.
Mettiamoci subito all’opera!
Partiamo sempre dalla struttura di base: la nostra pagina minima html
Realizziamo un semplice menu con 4 voci
Stilizziamo il body, e posizioniamo al centro dello schermo il menu
Stilizziamo il tag ul che contiene le voci di menu
Assegniamo una position relative alle voci di menu list-item, ed eliminiamo l’elenco puntato che viene assegnato di default con i tag li
Stilizziamo le etichette di menu, rappresentate dal tag a
Ritorniamo sull’ html, e all’interno del tag di apertura a, subito dopo href, inseriamo un elemento che chiamiamo text, e assegniamogli come valore, per ognuno la rispettiva voce di menu. Questo elemento lo richiameremo nel foglio di stile, come contenuto dell’elemento fittizio before del tag a
Ritorniamo sul file css, e inseriamo l’elemento fittizio before del tag a, utilizzando come contenuto l’elemento text inserito precedentemente nel tag a.
Gestiamo l’effetto hover.
Aggiungiamo qualche ritocco
Bene! Anche questo video-tutorial è completo! Abbiamo realizzato un menu con un effetto di testo 3d al momento dell’hover.
Puoi migliorare l’effetto giocando un pò con le proprietà e con i colori.
Per scaricare i file realizzati, clicca su Download e dopo decomprimi il file ZIP.
Se invece vuoi guardare il video completo, vai sul mio canale YouTube, dove troverai tantissimi altri video su html/css.
Ciao! Alla prossima 🙂
