Realizzare un menu responsive con effetto Flip e proprietà transform con CSS3, HTML5 e Font Awesome

L'articolo proposto oggi potrebbe essere una naturale "conseguenza" di quello scritto qualche giorno fa, avente come oggetto le trasformazioni CSS3, con l'ausilio di HTML5 e Font Awesome.

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

Di seguito alcune screen del progetto finale:

Vista frontale del menu per schermi oltre i 768 pixel
Voci di menu con icone per schermi oltre i 768 pixel
Vista frontale del menu per smartphone
Menu responsive per schermi fino a 767 pixel
Vista posteriore della voce di menu con testo
Voce di menu con proprietà transform

Il codice 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.

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 del 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;
}

Liberamente si possono assegnare tutti i colori che vogliamo, in base al tema del sito in cui, eventualmente, inserire il menu.

Il codice CSS per il menu responsive

Per visualizzare il menu anche nei dispositivi quali smartphone e tablet, senza perdere alcuna caratteristica rispetto al monitor del pc, è sufficente 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%.

Dopo tutta questa carrellata di codice e testo, non resta che visualizzare la demo completa con il menu in azione.

Conclusioni

Se fino a qualche tempo fa poteva sembrare utopia muoversi "nello spazio" con i soli CSS3, oggi possiamo anche pensare di introdurre nelle pagine web effetti non molto invasivi, con poco codice e qualche idea nuova.

© www.extrowebsite.com - Grafica, layout, articoli e guide sono di esclusiva proprietà del webmaster - Tutti i diritti riservati