Karina. Galleria di immagini via css.

Perchè fare via javascript (e/o Ajax) quello che si può fare via css? (Che forse è qualcosa di simile a “perchè prendere la macchina per andare in un posto in cui puoi arrivare comodamente a piedi?”)

Sicuramente non si può fare tutto, con i css. E dove non arrivano, per ottenere quello che vogliamo, servono altri linguaggi/soluzioni. Eppure i css arrivano molto lontano – molto più di quanto la maggioranza di noi sospettino.

Una galleria di immagini via css che mi ha molto impressionato, e di cui ho scritto, mesi fa, è Hoverbox. Adoro la sua eleganza e la sua semplicità.

Più di recente ho studiato i menu stile dropdown, via css. E fatto qualche esperimento (tipo Suckerloz e Newdrop).

Adesso, con lo stesso codice html base (una lista dai cui item si aprono sottoliste interne, child lists), e con la stessa tecnica css (le sottoliste sono nascoste di default, e si attivano al passaggio del mouse sull’elemento “padre”), faccio vedere come si può gestire una – semplice – galleria di immagini.

Ecco i due esempi che ho preparato, di Karina (che è la persona ritratta nelle foto, e il nome della tecnica). Una versione orizzontale e una versione verticale.

La tecnica è davvero abbastanza basilare, e funziona con IE6, IE7, Firefox (testato sulla 2.0, ma non dovrebbe aver problemi neppure la 1.x). Dovrebbe funzioniare anche con Opera & cia – browser sicuramente meno problematici che la famiglia IE (che cmq con ie7 ha fatto dei discreti passi avanti).

Il layout della pagina di esempio è tutto sommato molto semplice, ma è facile immaginare l’implementazione della tecnica in contesti + complessi (magari + avanti farò qualche demo).

(Un’altra aggiunta interessante potrebbe essere quella di un “loader”, che segnali che le immagini stanno caricando, in background.)