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 height li

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

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

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

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.