[CSS3] Tabbed section senza JS.. si può!

[Al_katraz984]

Passiamo al lato pratico dell'esercizio..

il progetto verte a realizzare un form di modifica dati utente con una visualizzazione tabulare, potete adattare l'esempio anche ad altre sezioni del vostro progetto.

Per fare questo solamente tramite CSS useremo dei radio-button e la funzionalità :checked nonchè alcune animazioni per abbellire un po' la cosa..

la struttura html del nostro form è la seguente:

<form>
 <input type="radio" />
 <label></label>
 <input type="radio" />
 <label></label>
 <input type="radio" />
 <label></label>

 <fieldset>
  <legend>Dati utente</legend>
 </fieldset>

 <fieldset>
  <legend>Indirizzo</legend>
 </fieldset>

 <fieldset>
  <legend>Altro</legend>
 </fieldset>
</form> 

come potete vedere la struttura ricalca quella indicata nel primo post.. il form sarà il nostro contenitore, i radio i nostri pulsanti e i fieldset i contenuti

nel prossimo post aggiungiamo un po' di dati e associamo le classi per intervenire con il foglio di stile
keep UP!