Corsi on-line

Checkbox animate CSS Only

In questo post vedremo come sia possibile animare le checkbox di un comune modulo per il feedback aggiungendo dei semplici effetti per la comparsa e la scomparsa delle selezioni effettuate; l’intera procedura descritta si baserà unicamente su regole di stile CSS, non si farà invece ricorso ad alcuna soluzione basata su JavaScript. Questa scelta dovrebbe influire positivamente sui tempi di caricamento della pagina destinata ad ospitare il codice proposto, si avranno inoltre dei vantaggi rilevanti dal punto di vista della manutenzione di quest’ultimo.

CatturaCominciamo subito con l’introdurre un possibile utilizzo delle checkbox, nel caso specifico non mostreremo l’intero form, per il nostro esempio non è infatti necessario, ci limiteremo invece a proporre la parte in cui viene proposto un breve quesito. Sarà possibile rispondere selezionando una sola opzione, o entrambe, a seconda della propria previsione, per limitare la scelta ad un unica opzione avremmo potuto utilizzare i radiobutton ai quali sarebbe stato possibile applicare lo stesso tipo di animazione:

<div class="container">
<h2>Chi vincerà la sfida scudetto?</h2>
<p>Seleziona entrambe le opzioni per il pareggio.</p>
<div>
  <input type="checkbox" id="juventus" name="juventus" />
  <label for="juventus">Juventus</label>
</div>
<div>
  <input type="checkbox" id="napoli" name="napoli" />
  <label for="napoli">Napoli</label>
</div>
</div>

A questo punto potremmo stilizzare una divbox allineata centralmente che, pur non essendo fondamentale per il risultato che vogliamo ottenere, ci permetterà di ottenere un output più gradevole e ordinato:

.container {
    margin: auto;
    width: 40%;
    border: 2px dashed teal;
    padding: 8px;
}

Il prossimo passaggio sarà quello relativo alla formattazione delle checkbox le cui regole verranno precedute soltanto dalla definizione delle dimensioni del font per le stringhe di testo associate alle opzioni selezionabili:

* {
  font-size: 20px;
}

input[type=checkbox] {display: none;}

input[type=checkbox] + label:before {
    content: "\2713";
    color: transparent;
    display: inline-block;
    border: 1px dashed grey;
    font-size: 18px;
    line-height: 20px;
    margin: -4px 4px 0 0;
    height: 18px;
    width: 18px;
    text-align: center;
    vertical-align: middle;
    transition: color ease .4s;
}

input[type=checkbox]:checked + label:before {
    color: green;
}

In sostanza il fulcro della nostra animazione sarà la proprietà content che, non a caso, viene utilizzata in CSS per far riferimento ad un contenuto; quest’ultimo sarà nello specifico un segno di spunta di colore verde indicato attraverso il carattere Unicode chiamato “CHECK MARK” che viene generato automaticamente grazie alla stringa “\2713“, in pratica ““.

Per comodità del lettore riportiamo il codice completo della pagina Web che ospiterà il piccolo quiz basato sulle checkbox:

<!DOCTYPE html>
<html>
<head>
<title>Checkbox animati con CSS</title>
<style>.container {
    margin: auto;
    width: 40%;
    border: 2px dashed teal;
    padding: 8px;
}
* {
  font-size: 20px;
}

input[type=checkbox] {display: none;}

input[type=checkbox] + label:before {
    content: "\2713";
    color: transparent;
    display: inline-block;
    border: 1px dashed grey;
    font-size: 18px;
    line-height: 20px;
    margin: -4px 4px 0 0;
    height: 18px;
    width: 18px;
    text-align: center;
    vertical-align: middle;
    transition: color ease .4s;
}

input[type=checkbox]:checked + label:before {
    color: green;
}</style>
</head>
<body>
<div class="container">
<h2>Chi vincerà la sfida scudetto?</h2>
<p>Seleziona entrambe le opzioni per il pareggio.</p>
<div>
  <input type="checkbox" id="juventus" name="juventus" />
  <label for="juventus">Juventus</label>
</div>
<div>
  <input type="checkbox" id="napoli" name="napoli" />
  <label for="napoli">Napoli</label>
</div>
</div>
</body>
</html>

content è una proprietà utilizzabile con gli pseudo-elementi CSS :before e :after è può rivelarsi particolarmente utile anche per richiamare alcune parti di un documento, come per esempio un URL.

Post correlati
I più letti del mese
Tematiche