Come creare tasti “a porta” usando solo CSS3

Continuiamo con la serie di articoli realizzati per mostrare il potenziale di CSS, senza usare il tanto amato e odiato Javascript.

Oggi vediamo come creare dei tasti che possiedano un’animazione simile all’apertura di una porta (o di una finestra, dipende dai punti di vista :D ).

Ci serviremo del CSS3 quindi va da sé che, usando una tecnologia così avanzata, ci sia il rischio di incompatibilità, soprattutto con browser non aggiornati.

Ciò che andremo a trattare sono tasti, quindi sta a voi decidere in quale ambito e con quale mansione usarli. In ogni caso con questo tutorial creeremo un tasto per la condivisione social.

Ringrazio la mia amica e collega Agnieszka Czerwinska che mi ha aiutato nella redazione dell’articolo.

Iniziamo, dunque.

HTML

La struttura HTML è tanto semplice quanto ingegnosa. Ci serviremo di un <div> che conterrà al suo interno il codice di condivisione sul social scelto (o quello che volete), un input “checkbox” e una label a lui associata.

La checkbox ci servirà per simulare un cosiddetto “click hack” (perché, appunto, non esiste una pseudoclasse “click” in CSS, non ancora almeno ;) ) e ne avremo bisogno per “triggerare” l’animazione a porta. La label costituirà la porta in sé, che si aprirà e chiuderà al nostro click.

Al div “wrapper” assegniamo una classe che si occuperà di donare l’aspetto e l’animazione ai vari elemento del tasto.

HTML

<div class="wrapper_tasto">
<p>Condividi!</p>
<input id="facebook" type="checkbox">
<label for="facebook"><img src="facebook.png" alt=""></label>
</div>

Lo scheletro è già pronto. Adesso immergiamoci ancora una volta nella magia del CSS3! :)

CSS

Vediamo subito la base del nostro CSS, quello che darà lo stile generale al tasto:

CSS


.wrapper_tasto {
display: inline-block;
text-align: center;
background-color: #F2F2F2;
border: 1px solid #E1E1E5;
height: 72px;
perspective: 500px;
position: relative;
width: 144px;
}

.wrapper_tasto input {
display: none;
}

Abbiamo specificato la proprietà “display” con l’attributo “inline-block” perché sarà utile nel caso voleste creare più tasti di questo genere (per Google+, per Twitter ecc.).

Soffermiamoci per un momento sulla proprietà “perspective”.

Se il tasto fosse reale e non elettronico, tra noi e il tasto ci sarebbe uno spazio. Questa proprietà permette di dire all’elemento che si animerà quanto spazio tra lui e noi dovrà prendersi per animarsi (o, nel caso non si effettui una animazione, quanto spazio prendersi per darsi un effetto 3d).

Per farla breve, con questa proprietà assegniamo uno spazio al nostro elemento sull’asse Z (lo stesso che manipoliamo quando usiamo la proprietà z-index ;) ).

Questa proprietà va specificata sull’elemento padre dell’elemento che si vuole manipolare. L’elemento che, nel nostro caso, si animerà, per farlo, riceverà la proprietà transform.

Quindi, guardando al nostro esempio, noi vogliamo che la “label” si muova a mo’ di porta/finestra. Quindi assegniamo a suo padre (il wrapper_tasto per intero) la proprietà perspective per dire quanto spazio dovrà essere usato sull’asse Z, poi a label assegneremo la proprietà transform (vedrete a breve ;) ).

All’input che, ricordiamo, è una checkbox, assegnamo il valore “display:none”. Questo perché, ovviamente, non vogliamo che la checkbox sia visibile, ci serve soltanto per attivare l’animazione (a breve vedrete come).

Tutto il resto è puro e semplice stile, niente di speciale. Andiamo avanti :) .

CSS

.wrapper_tasto label {
box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.4);
background-color: yellow;
display: block;
left: 0;
position: absolute;
top: 0;
transform-origin: center bottom 0;
transform-style: preserve-3d;
transition: all 0.3s ease-out 0s;
}
.wrapper_tasto label img {
display: block;
}

Anche qui, nulla di speciale, abbiamo dato uno stile alla label che potete personalizzare come meglio credete. Soffermiamoci, piuttosto, sulle proprietà transform-origin e transform-style: il primo dei due si occupa di assegnare all’elemento che andremo ad animare un punto di origine dell’animazione stessa.

Nel nostro caso, vogliamo che l’effetto di apertura della porta/finestra si origini dal centro e si proietti verso il basso. Quindi questo è, letteralmente, il fulcro dell’animazione; la seconda, invece, si occupa dei “figli”, degli elementi innestati, dell’elemento che vogliamo animare.

Con il valore “preserve-3d” facciamo in modo che, nel nostro caso, l’immagine si animi insieme al suo elemento padre (la label) preservando le caratteristiche 3d del padre stesso. Quindi, invece di creare un’animazione apposita per l’immagine, usando questa proprietà ci scrolliamo di dosso molto lavoro inutile.

CSS

.wrapper_tasto input:checked + label {
transform: rotateX(-180deg);
}

Siamo giunti alla fine. Abbiamo tutto settato. Ciò che ci resta da fare è attivare l’animazione e, come abbiamo detto in precedenza, per farlo ci serviremo di un “click hack”, cioè di un piccolo trucco per simulare una pseudoclasse “click” con CSS, in modo da attivare l’animazione con un click, appunto, lasciando completamente da parte il Javascript.

Soffermiamoci un momento, però, sul selettore e sul simbolo “+”. I più esperti tra voi sanno certamente benissimo a cosa serva quel simbolo nel selettore, gli altri potrebbero immaginarlo o addirittura ignorare a cosa serva. Magari non avendolo nemmeno mai visto usare e io ricordo benissimo l’espressione facciale mia quando vidi un “+” nel CSS (e vi assicuro che non era un bel vedere :) ).

Quel simbolo sta per “adjacent sibling selector”, letteralmente “selettore del fratello adiacente”. Per sapere cosa significa, esaminiamo subito il nostro esempio: abbiamo selezionato input e gli abbiamo assegnato “:checked”, in modo che, le proprietà scritte, abbiano effetto solo quando la checkbox è “checked”, appunto (si puù utilizzare, chiaramente, solo con le checkbox e con i tasti radio).

Ma poi abbiamo “+ label”. Significa che, quando input sarà selezionato, le proprietà scritte sotto non avranno effetto su input stesso, ma sul fratello subito adiacente che, in questo caso, è proprio label! Il label che dovrà effettuare l’animazione a porta e che, appunto, riceve l’ordine di ruotare sull’asse X (quindi orizzontalmente) di -180 gradi.

Il risultato finale sarà questo:

Condividi!

Conclusioni

Per dovere, soprattutto nei vostri confronti, di essere preciso ma sintetico, nel codice CSS ho omesso tutte le varie sigle proprietarie per le proprietà transform, transition e box-shadow. Voi, mi raccomando, ricordatevi SEMPRE di metterli. Questa è tecnologia che già di per sé ha difficoltà di compatibilità. Il minimo che noi possiamo fare è raggiungere il massimo di compatibilità possibile.

Spero, come sempre, che questo tutorial vi sia utile, fatemi sapere nei commenti.
Il link completo lo trovate a questo link

Alla prossima!

Master per Web Designer Freelance
In tutti questi anni abbiamo ricevuto centinaia di richieste di approfondimento sulle numerose tematiche del web design vissuto da freelance. Le abbiamo affrontate volta per volta. Ma ci siamo resi conto che era necessario fare qualcosa di più. Ecco perché è nato One Year Together, un vero e proprio master per web designer freelance che apre finalmente le porte al mondo del lavoro.
Scopri One Year Together »
Tag: , ,

L'autore

Da sempre appassionato di PC e tecnologia in generale, ho creato e pubblicato il mio primo sito internet a 13 anni. Non avevo mai considerato il web design e la programmazione come un lavoro vero e proprio fino all'anno scorso quando, insieme alla mia più grande amica e collega, abbiamo deciso di lanciarci nel mondo della programmazione e del web design freelance.

Altri articoli scritti da

Articoli correlati

Potresti essere interessato anche ai seguenti articoli:

2 commenti

  1. Nicolò

Trackback e pingback

  1. Come creare tasti “a porta” usando ...
    […] Continuiamo con la serie di articoli realizzati per mostrare il potenziale di CSS, senza usare il tanto amato e …

Lascia un Commento

Current day month ye@r *