Slider in puro CSS3

giovedì 19 aprile 2012 - 15:22

di Kiko

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.

Categoria: CSS | Commenta

Commenti per Slider in puro CSS3

Veramente notevole!

# - Postato da gabriel 19 aprile 2012 alle 17:32

Da Windows XP é un fail… IE8 tutto fermo e Chrome si pianta chiudendosi.

# - Postato da Alessandro 20 aprile 2012 alle 09:32

@alessandro

é un esperimento, un case study per il futuro che speriamo arrivi presto dove vecchi SO e vecchi non standard browser spariscano

# - Postato da sunny 20 aprile 2012 alle 10:04

Un bell’esercizio di stile.
Pero’ ancora non sono riuscito a vedere buone soluzioni in puro CSS applicabili in un progetto serio…

# - Postato da Matita 20 aprile 2012 alle 14:26

Alessandro a me su Chrome funziona benissimo, non capisco come mai a te non funziona !

# - Postato da Alessandro Papa 20 aprile 2012 alle 14:54

purtroppo é ancora presto per i CSS3, bisognerà  aspettare un pò…

# - Postato da Andrea 20 aprile 2012 alle 21:20

il futuro:
css per le cose semplici (spider, dropdown, animazioni lineari, ecc) – javascript per dom manipulation estremo – assenza di flash

# - Postato da Michele 22 aprile 2012 alle 09:12

Bello, si avvicina molto alle classiche headers in Jquery! é un peccato che a molti clienti non si riesca far capire la potenza di questi strumenti. Spesso prediligono ancora animazioni lunghe, pesantissime e al limite del ridicolo a discapito della compatibilità  con i nuovi dipositivi. Su Chrome funziona bene, come pure su iphone e ipad.

Se lo guardiamo con IE 8 e precedenti invece… beh speriamo che queste versioni scompaiano in fretta.

# - Postato da Web Designer Monza 28 maggio 2012 alle 15:09

Lascia un Commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

È possibile utilizzare questi tag ed attributi XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>