Migliorare la UX dei bottoni con effetti di transizione ...sui bordi

In questo breve tutorial lavoreremo alla creazione di un particolare effetto di transizione che può risultare utile per rendere più accattivante l'aspetto di menu e pulsanti grafici. Ecco subito la prima demo. Per attivare l'effetto basterà passare con il mouse su uno dei pulsanti che compongono la lista dei vari servizi.

La cosa più interessante e a prima vista non facilmente intuibile è che l'effetto viene ottenuto sfruttando le transizioni sui bordi dell'elemento dallo stato normale a quello hover.

Il markup HTML

Il codice HTML della demo è dei più semplici:

<nav>
  <ul id="menu">
  <li id="blogger"></li>
  <li id="rss"></li>
  <li id="youtube"></li>
  <li id="facebook"></li>
  <li id="twitter"></li>
  </ul>
</nav>

Una lista ul con id="menu" racchiusa in un elemento nav, con ciascun item definito con un id.

Nessuna immagine viene inserita via HTML. La grafica dei cinque pulsanti, infatti, è impostata come sfondo dei li nel CSS.

Abbiamo appena imparato la cosa fondamentale: per ricreare l'effetto si deve lavorare su immagini definite come sfondo.

Il CSS

Nei vari fogli di stile allegati all'articolo, troverete la parte rilevante in fondo, nella sezione 'Stili demo'.

Per prima cosa impostiamo la lista come menu orizzontale nel modo consueto, azzerando innanzitutto gli stili di default:

nav #menu {
 list-style: none;
 list-style-image: none;
}

Poi passiamo ai li:

nav #menu li {
 [...]
}

Con queste regole disponiamo gli item come voci di un menu orizzontale, floattando a sinistra e separando con il margine destro:

float: left;
margin-right: 5px;

Assegniamo poi una larghezza e un'altezza. Nel nostro esempio width e height dei li corrispondono alle dimensioni delle immagini di sfondo (128x128px), ma possono anche avere valori più grandi per ricreare varianti particolari dell'effetto a livello grafico. La cosa fondamentale è che i valori per larghezza e altezza siano uguali. L'effetto così concepito, insomma, nella sua forma più semplice, funziona bene soprattutto su elementi quadrati. Vedremo poi in fondo all'articolo come si possa adattare il tutto a box rettangolari. Per il momento ecco il codice con le nostre dimensioni:

width: 128px;
height: 128px;

Visto che i nostri pulsanti sono circolari, facciamo in modo che lo siano pure i li:

border-radius: 50%;

Ed ora la regola più importante. Dobbiamo fare in modo che inizialmente il pulsante sia 'ricoperto' dal bordo. Per fare ciò, impostiamo un bordo con uno spessore che in pixel sia pari alla metà del valore impostato per larghezza e altezza:

border: 64px dotted rgba(0,0,0,0.5);

Nella demo, come si nota, per definire il colore del bordo abbiamo usato la sintassi RGBa, settando una leggera trasparenza che rende comunque visibile il pulsante. Potete ovviamente personalizzare questo aspetto come meglio credete, anche usando un colore solido per esempio.

Per chiudere la regola dei li, impostiamo una semplice transizione:

-webkit-transition:0.3s ease;
-moz-transition:0.3s ease;
-ms-transition:0.3s ease;
-o-transition:0.3s ease;
transition:0.3s ease;

Riassumiamo per comodità l'intera regola:

nav #menu li {
 list-style: none;
 float: left;
 margin-right: 5px;
 width: 128px;
 height: 128px;
 border-radius: 50%;
 border: 64px dotted rgba(0,0,0,0.5);
 -webkit-transition:0.3s ease;
 -moz-transition:0.3s ease;
 -ms-transition:0.3s ease;
 -o-transition:0.3s ease;
  transition:0.3s ease;
}

Per applicare gli sfondi facciamo così:

#blogger {background: url('blogger-128x128.png') no-repeat 50% 50%;}
#rss {background: url('rss-128x128.png') no-repeat 50% 50%;}
#youtube {background: url('youtube-128x128.png') no-repeat 50% 50%;}
#facebook {background: url('facebook-128x128.png') no-repeat 50% 50%;}
#twitter {background: url('twitter-128x128.png') no-repeat 50% 50%;}
#linkedin {background: url('linkedin-128x128.png') no-repeat 50% 50%;}

L'effetto con transizione avviene all'hover, per cui dobbiamo aggiungere quest'ultima regola:

nav #menu li:hover {
 cursor: pointer;
 border: 1px dotted rgba(0,0,0,0.7);
}

L'unica proprietà che modifichiamo, quella a cui verrà applicata la transizione, è la dimensione del bordo, che passa da 64px a 1px.

Fatto. Questa la tecnica di base. Le varianti, con cui possiamo modificare il tipo di effetto, si possono implementare agendo unicamente sullo stile del bordo! È forse questa la 'magia' di questa tecnica.

Nella seconda demo, abbiamo usato lo stile dashed al posto di dotted:

nav #menu li {
 border: 64px dashed rgba(0,0,0,0.5);
}
nav #menu li:hover {
 border: 1px dashed rgba(0,0,0,0.7);
}

Nel terzo esempio, il valore usato è invece il classico solid:

nav #menu li {
 border: 64px solid rgba(0,0,0,0.5);
}
nav #menu li:hover {
 border: 1px solid rgba(0,0,0,0.7);
}

Notate come di volta in volta cambiano lo stile della transizione e l'effetto finale.

Nella quarta demo, abbiamo innanzitutto modificato il markup HTML inserendo lo sfondo con il classico metodo dell'image replacement:

<nav>
 <ul id="menu">
 <li id="blogger" class="ir"><a href="#">Blog</a></li>
 <li id="rss"  class="ir"><a href="#">Feed RSS</a></li>
 <li id="youtube" class="ir"><a href="#">Canale YouTube</a></li>
 <li id="facebook" class="ir"><a href="#">Facebook</a></li>
 <li id="twitter" class="ir"><a href="#">Twitter</a></li>
 </ul>
</nav>

E nel CSS abbiamo reso del tutto trasparente il bordo nello stato hover, introducendo una nuova variazione sul tema:

nav #menu li:hover {
 cursor: pointer;
 border: 1px dashed rgba(0,0,0,0.0);
}

Nel quinto esempio abbiamo applicato la tecnica ad una galleria con immagini squadrate e senza border-radius.

Per concludere, come si accennava, vediamo come si possa applicare l'effetto a box non quadrati (esempio 6).

Le immagini di sfondo sono qui pari a 300x100px. Il div .foto cui le applichiamo come sfondo avrà questa regola nel CSS:

.foto {
 width: 300px;
 height: 100px;
 background-image: url(1-rect.jpg);
 background-repeat:  no-repeat;
 background-position: 50% 50%;
 -webkit-transition: all 0.4s ease;
 -moz-transition: all 0.4s ease;
 -ms-transition : all 0.4s ease;
 -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
 border-top: 50px solid  rgba(0,0,0,0.7);
 border-right: 150px solid rgba(0,0,0,0.7);
 border-bottom: 50px solid  rgba(0,0,0,0.7);
 border-left: 150px solid  rgba(0,0,0,0.7);
}

Come si vede, per il bordo non si può usare la proprietà abbreviata border con agiamo su tutti e quattro i bordi contemporaneamente. Andranno invece create quattro regole, una per ciascun lato. I bordi superiore e inferiore avranno uno spessore pari a metà dell'altezza; quelli sinistro e destro pari alla metà della larghezza. Rimandiamo per tutti i dettagli allo studio delle demo, che sono come sempre disponibili in allegato.

I crediti per la tecnica che abbiamo adattato vanno ad uno sviluppatore giapponese di cui siamo riusciti a individuare solo il nick utilizzato su Twitter, ksk1015.