L'articolo che viene proposto oggi potrebbe essere considerato una "naturale conseguenza" di quello scritto qualche giorno fa sull'effetto transition applicato alle voci di menu con i CSS3, con l'ausilio dei Font Awesome icon fonts.
L'effetto Flip, come si evince dal titolo, altro non è che la rotazione di un elemento sul proprio asse verticale, nello stato hover. In altri termini: ogni volta che con il mouse, o con il dito nel caso degli smartphone, saremo sulla voce di menu, essa girerà di 180 gradi, mostrando la scritta descrittiva della voce stessa.
L'immagine posta all'inizio dell'articolo presenta il menu in versione desktop con l'effetto :hover sulla prima voce. Quella di seguito, invece, mostra lo stesso menu per media quali smartphone o tablet.
Il markup HTML del menu
Il codice HTML non ha nulla di particolare rispetto a qualsiasi altro menu ma si differenzia dagli altri per la presenza di elementi <span> con classi associate. Tali elementi <span> contengono icone di Font Awesome, in sostituzione di elementi grafici.
<ul class="menu"> <li class="home"> <a href="#"> <span class="front"> <i class="fas fa-home fa-3x"></i> </span> <span class="back"> <span>HOME</span> </span> </a> </li> .............. </ul>
Il codice riguarda una sola delle voci del menu. Le altre possiamo compilarle a nostra scelta, a seconda delle esigenze del progetto da realizzare.
li class="home": Ogni voce di menu avrà la propria classe associata in quanto, come vedremo nell'esempio finale, ogni singola voce avrà un colore di testo e di background differente dalle altre.span class="front": elemento span con classefront(per la parte anteriore)i class="fas fa-home": è la classe dell'icona Font Awesome, per la parte anteriorefa-3x: è la dimensione dell'icona di Font Awesome, come dichiarato nel proprio foglio di stilespan class="back": l'altro elemento span con classeback(per la parte posteriore)- HOME: è il testo che si leggerà, nella parte posteriore, dopo essere passati con il mouse sulla voce di menu anteriore.
Il codice CSS del menu
Ho realizzato un menu a tutta pagina, con larghezza in base al viewport. Di conseguenza il codice per l'elemento ul è il seguente:
ul{
list-style: none;
width: 100%;
margin: 0 auto 40px;
padding: 0;
position: relative;
overflow: hidden;
}
ul li a {
height: 60px;
line-height:60px;
text-decoration:none;
perspective: 1000px;
}
In quest'ultima dichiarazione cominciamo a vedere del codice che ci permetterà di avere l'effetto "flip", o rotazione, con i CSS3. Siccome vogliamo la rotazione su ogni singola voce di menu, si deve impostare la "prospettiva", nell'esempio settata a 1000px. Cosa vuol dire? La funzione perspective cambia la prospettiva con cui viene visualizzato un elemento, dando l'illusione di profondità. Più alto è il valore assegnato alla funzione di prospettiva, più l'elemento apparirà lontano dall'utente che guarda. Il valore deve essere maggiore di 0 ed è espresso in pixel.
Il codice CSS per lo span.front visitato e non
Vediamo adesso come implementare il codice CSS per quanto riguarda la parte anteriore, cioè quando un link non è stato ancora visitato.
ul li .front {
transform: rotateX(0deg) rotateY(0deg);
transition: all 0.5s ease-in-out;
backface-visibility: hidden;
transform-style: preserve-3d;
text-align: center;
display:block;
}
ul li:hover .front {
transform: rotateX(0deg) rotateY(180deg);
}
Il primo gruppo di codice "prepara" l'effetto "transform" che avviene quando si passa con il mouse, o con il dito, su un elemento, in presenza di schermi touch. Dalla rotazione iniziale impostata a 0 (zero) rotateX(0deg) rotateY(0deg). Tipo di transizione, proprietà e tempo in cui essa deve avvenire transition: all 0.5s ease-in-out.
Nascondere la parte retrostante di un determinato elemento backface-visibility: hidden. La proprietà transform-style indica la modalità di rendering degli elementi nello spazio 3D. Impostando la proprietà di un elemento su flat, il rendering di tutti gli elementi figlio coinciderà con il loro appiattimento sull'elemento stesso. Le specifiche W3C definiscono per questa proprietà una parola chiave: preserve-3d. Ciò sta ad indicare che non è previsto nessun appiattimento.
Quando siamo sulla voce di menu, viene chiamata in causa la proprietà "transform". L'elemento subirà una rotazione, sull'asse Y, di 180° mostrandoci il successivo elemento, vale a dire lo span.back.
Il codice CSS per lo span "back"
Avendo capito il concetto per quanto riguarda la parte anteriore, è facilmente intuibile il codice di seguito riportato.
ul li .back{
transform: rotateX(0deg) rotateY(-180deg);
transition: all 0.5s ease-in-out;
backface-visibility: hidden;
transform-style: preserve-3d;
display:block;
width:100%;
height:100%;
margin:-60px 0 0 0;
text-align: center;
z-index: -1;
}
La dichiarazione seguente, invece, si riferisce sempre allo span.back, ma nello stato :hover.
nav ul li:hover .back {
z-index: 1;
transform: rotateX(0deg) rotateY(0deg);
}
Questo è tutto il codice per quanto riguarda la proprietà transform. Proseguendo con il codice CSS, abbiamo:
nav ul li i {
line-height: 60px !important;
vertical-align: middle !important;
}
per l'allineamento verticale, centrato, del tag i del Font Awesome.
I colori personalizzati per ogni voce di menu
Per distinguere, mediante i colori, un item dall'altro, oltre che per conferire un effetto più simpatico, ho scelto di assegnare dei colori differenti per ogni singola voce. Da qui l'assegnazione della classe home per la voce di esempio.
/*Home*/
nav ul li.home .front{
color: #435a6a;
background: #fff;
}
nav ul li.home .back {
color:#fff;
background-color: #435a6a;
}
In base al progetto e in base al tema del sito da realizzare, possiamo assegnare tutti i colori che vogliamo per ogni item del menu.
Rendere il menu responsive
Per visualizzare il menu anche nei dispositivi quali smartphone e tablet, senza perdere alcuna caratteristica rispetto al monitor del pc, è sufficiente pochissimo codice CSS per ottimizzare il menu per renderlo responsive:
@media screen and (max-width:767px){
nav ul li{
width: 100%;
border-bottom:1px solid #f0f0f0;
}
}
@media screen and (min-width:768px){
nav ul li {
float: left;
width:25%;
}
}
Fino ad una dimensione di 767 pixel, avremo ogni voce di menu una sotto l'altra, motivo per cui ho dichiarato width:100%, con un bordo, tra una voce e l'altra, pari ad un pixel e di colore grigio molto tenue border-bottom:1px solid #f0f0f0. Quando, invece, siamo a 768 pixel o più su, come dimensione di schermo, le voci saranno affiancate e rese flottanti, con una dimensione pari al 25% del viewport: float:left; width:25%.
Conclusioni
Se fino a qualche tempo fa poteva sembrare utopia muoversi "nello spazio" con i soli CSS3, oggi possiamo pensare di introdurre nelle pagine web effetti non molto invasivi, con poco codice e qualche idea nuova.
Nella demo di esempio, la rotazione delle voci di menu sullo stato hover con i css.