Slider in puro CSS3

L'elemento slider nel design moderno è sempre più prezioso. Permette di salvare spazio raggruppando immagini e contenuti in pannelli scorrevoli, molto eleganti da presentare e assolutamente efficaci in ottica usabilità  e "presentazione". L'uso di immagini grandi e significative permette, più di ogni altra cosa, di catturare subito l'attenzione del visitatore.

Per costruirli si fa ricorso a procedure in JavaScript. Esistono plugin di ogni tipo e di ogni ordine di complessità , per cui è davvero molto semplice realizzarli. Ma un designer inglese ha presentato la sua soluzione creativa: niente uso di JavaScript, solo puro CSS3, quindi sfruttando le feature della nuova versione dei fogli di stile per il Web.

Il meccanismo è in realtà  davvero molto semplice: si sfrutta il floating degli oggetti e la proprietà  overflow per nascondere quelli che non devono essere mostrati all'interno dell'area di visualizzazione. Per creare l'effetto animazione si fa ricorso al selettore tilde (il sibling selector).

Qui una demo del risultato finale ottenuto.