Pubblicato il 18/06/13e aggiornato il

Effetti hover e transizioni per galleria con immagini circolari.

Piccola galleria di immagini circolari con effetto hover, trasparenza e transizioni.
Nella nuova versione CSS3 ci sono delle proprietà che permettono di creare delle animazioni di immagini senza bisogno di usare i sempre pesanti javascript. Inoltre adesso il CSS3 è supportato anche dalle nuove versioni di Internet Explorer e non più solo da Safari, Chrome, Firefox e Opera.
Con la proprietà border radius possiamo innanzitutto rendere circolare una immagine quadrata e applicare delle trasformazioni alle miniature circolari che si prestano molto di più delle rettangolari per ricevere gli effetti speciali. L'effetto particolare che vado a presentare l'ho preso da Codrops e, se susciterà l'interesse dei lettori, sarà seguito da altri che pubblicherò in altri post.

Ciascuna miniatura potrà essere collegata a un post e vi potremo inserire una descrizione per creare una galleria originale dei nostri articoli più interessanti

immagini-circolari

Il codice per realizzare una tale galleria può essere incollato su Layout > Aggiungi un gadget > HTML/Javascript oppure in una pagina statica con modalità HTML.
Oltre agli URL delle immagini che debbono essere caricate su Picasa si debbono modificare i link e le descrizioni. Gli altri parametri che riguardano dimensioni, colori di sfondo e margini è opportuno modificarli solo da chi abbia un minimo di conoscenze.  Si possono inserire anche più di tre immagini lasciando inalterata la struttura dei CSS e modificando solo l'ultima parte dell'HTML mantenendo la stessa struttura del codice. E' opportuno dare una occhiata anche al post sulla trasparenza (opacità)





6 commenti :

  1. Ciao Ernesto, interessante effetto, grazie. L'ho velocemente provato (ma subito tolto in quanto impossibilitato ora di metterci mano soprattutto per motivi di tempo) nel modello di blogger che uso :awesome posizionandolo sotto all'header, nelle schede.
    Ho notato che non si centra automaticamente, diversamente dal demo nel tuo blog.Ma a parte questo inconveniente (penso dovuto alla mia scelta di posizionarlo nelle schede) funziona benissimo.
    I soliti(scontati) complimenti.

    RispondiElimina
  2. Buongiorno Ernesto! Grazie per il post...molto utile! :)
    Ho una domanda: se creassi una pagina statica con una galleria di 50 immagini o più, secondo te la pagina diventerebbe troppo pesante da caricare???

    RispondiElimina
    Risposte
    1. @# Una sola pagina può anche essere lentissima a caricare. L'importante è la media di velocità del blog. Poi puoi usare anche Crazy Load
      http://www.ideepercomputeredinternet.com/2012/11/lazy-load-plugin-blogger.html

      Elimina
    2. Ok grazie!
      Ma il plugin funziona anche se ho un template personalizzato (cioè di quelli che si scaricano da internet e poi si caricano sul proprio blog)???

      Elimina
    3. @# Non si può dire a priori. Devi testare in un blog di prova oppure nel tuo stesso modello ricordandoti di salvare il template.

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.