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.)

7 risposte a Karina. Galleria di immagini via css.

  1. faustine scrive:

    mi sto muovendo in wordpress…ma non so se resisterò:(

  2. T4n|n0 Ru|3z scrive:

    interessante… cmq m piace qst blog.. levami 1 curiosità… ma ” Come quando fuori piove ” lo hai scritto per ricordarti la scala del poker cuori quadri fiori picche?? hihi

    cmq m piace,t aggiungo ai links.. se hai 1 banner t aggiungo anche quello.. ciao😉

  3. carl0z scrive:

    T4n|n0 Ru|3z,

    grazie per il commento e i complimenti😉

    non ho un banner, no :-))

    il titolo del blog era inizialmente “no space left on /dev/brain” – poi mi sembrava troppo simpaticamente tecnico, e un giorno ho messo questo. pensavo al poker, si’ – e a una cosa che avevo scritto qualche anno fa

    ti mettero’ nei miei link🙂

    ciao – carloz

  4. carl0z scrive:

    una soluzione simile a questa, sempre di galleria di immagini via css, stavolta con anche thumbnails (che in ogni caso sono facilmente implementabili anche nel codice di karina – galleria di immagini) è proposta come tutorial su webmasterpoint:
    http://www.webmasterpoint.org/webdesign/css/60-galleria-fotografica-con-css.asp

    c. – c.

  5. Ryo scrive:

    C’è da dire una cosa che mi sembra sia stata un po’ tralasciata, che però è decisamente fondamentale: ovvero che Karina è anche molto carina, e non mi riferisco alla tecnica!😐

  6. general scrive:

    Hi there friends, its fantastic post concerning teachingand fully
    defined, keep it up all the time.

  7. Linnie scrive:

    Thanks on your marvelous posting! I really enjoyed
    reading it, you’re a great author.I will make certain to bookmark your blog and may come back at some point. I want to encourage one to continue your great job, have a nice morning!

Lascia un commento

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...

%d blogger cliccano Mi Piace per questo: