Effetto Flip su responsive menu
Effetto Flip su responsive menu
Extrowebsite

L'articolo proposto oggi potrebbe essere una qualche giorno fa, avente come oggetto le trasformazioni CSS3, con l'ausilio dei Font Awesome.

L'effetto "Flip", come si evince dal titolo, altro non è che la rotazione di un elemento su un asse. In questo caso, ogni singola voce di menu sarà contraddistinta, nella parte anteriore, da un'icona tra quelle messe a disposizione dai Font Awesome e nella parte posteriore dal testo esplicativo per la stessa icona.

L'immagine posta all'inizio dell'articolo presenta il menu per versione desktop con l'effetto :hover sulla prima voce. Quella di seguito, invece, è lo stesso menu ma per viewport quali smartphone.

Effetto Flip su menu per smartphone
Effetto Flip su menu per smartphone

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="fa fa-home fa-3x"></i>
			</span>
			<span class="back">
				<span>HOME</span>
			</span>
		</a>
	</li>
..............
</ul>

Il codice scritto 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 classe front (per la parte anteriore)
  • i class="fa fa-home": è la classe dell'icona di Font Awesome, per la parte anteriore
  • fa-3x: è la dimensione dell'icona di Font Awesome, come dichiarato nel proprio foglio di stile
  • span class="back": l'altro elemento span con classe back (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 "transform", 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.

.