Pubblicato il 03/10/13e aggiornato il

5 Effetti per immagini ottenuti con il solo CSS.

Semplici effetti per immagini usando solo HTML e CSS da applicare direttamente in un articolo, nel modello (Blogger) o tema (Wordpress).
Continuo la presentazione di effetti per immagini che possono essere inseriti in modo semplice nei nostri blog direttamente nel modello oppure soltanto in uno o più post o pagine statiche. Il precedente articolo che illustrava alcuni Effetti delle Foto ha avuto un buon numero di Mi Piace e di condivisioni che mi hanno consigliato di presentare altri effetti in questo nuovo post. Questi sono ancora più semplici dei precedenti perché abbisognano solo del linguaggio CSS senza javascript.

Il codice di ciascun effetto sarà suddiviso in due parti. La prima che inizia con <style> e finisce con </style> può essere incollata direttamente nell'articolo in modalità HTML oppure inserita nel modello subito sopra a </head>. La seconda parte che è formata dal codice HTML deve invece essere incollata nel punto della pagina in cui si vogliono visualizzare le immagini. Se si è optato per la prima parte del codice nel modello si potrà inserire lo stesso effetto in tutte le pagine del blog semplicemente usando la seconda parte del codice.

EFFETTO SALTO

È utile quando si abbia una serie di immagini allineate visto che quando ci si passa sopra con il mouse si vede uno spostamento verso l'alto di valore personalizzabile che produce un effetto onda

effetto-salto


Il codice da usare è il seguente

<style>
.salto img{
border: 5px solid #ccc;
float: left;
margin: 15px;
-webkit-transition: margin 0.5s ease-out;
-moz-transition: margin 0.5s ease-out;
-o-transition: margin 0.5s ease-out;
}
.salto img:hover { margin-top: 2px; }
</style>
<div id="salto" class="salto">
<img src="http://lorempixel.com/150/150/"/>
<img src="http://lorempixel.com/150/150/"/>
<img src="http://lorempixel.com/150/150/"/>
<img src="http://lorempixel.com/150/150/"/>
<img src="http://lorempixel.com/150/150/"/>
  </div>

Oltre allo spostamento (2 pixel) è possibile personalizzare anche la durata del salto (0.5 secondi).

EFFETTO SBILENCO

Con il mouse si provoca una piccola rotazione nelle immagini in senso orario o antiorario

effetto-sbilenco



Il codice da usare è il seguente

<style>
#sbilenco { width: 800px; margin: 0 auto; } #sbilenco img { margin: 20px; border: 5px solid #eee; -webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2); -moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2); box-shadow: 4px 4px 4px rgba(0,0,0,0.2); -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; } #sbilenco img:hover { -webkit-transform: rotate(-7deg); -moz-transform: rotate(-7deg); -o-transform: rotate(-7deg); }
</style>
<div id="sbilenco">
   <img src="http://lorempixel.com/200/200/"/>
   <img src="http://lorempixel.com/200/200/"/>
   <img src="http://lorempixel.com/200/200/"/>
   <img src="http://lorempixel.com/200/200/"/>
   <img src="http://lorempixel.com/200/200/"/>
   <img src="http://lorempixel.com/200/200/"/>
</div>

Possono essere personalizzate la larghezza della serie di foto (800 pixel), lo stile del bordo delle immagini con il relativo grado di opacità e ombreggiatura. Si possono anche settare la durata dell'effetto (0.5 secondi) e i gradi della rotazione delle foto (-7 gradi).






EFFETTO TITOLO CHE APPARE

Al passaggio del mouse si visualizza il titolo della foto che viene mostrato alla sua destra

titolo-immagine-effetto



Il codice da usare è il seguente

<style>
#titolo {
width: 730px;
height: 133px;
line-height: 0px;
color: transparent;
font-size: 50px;
font-family: "Georgia";
font-weight: 300;
text-transform: uppercase;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
#titolo:hover {
line-height: 133px;
color: #191919;
}
#titolo img{
float: left;
margin: 0 15px;
}
</style>
<div id="titolo">
   <img src="http://lorempixum.com/400/133"/><p>Testo</p>
</div>

Si possono settare le dimensioni della foto e quelle dei caratteri del titolo oltre anche alla famiglia di font e al colore della scritta personalizzabile. La durata dell'effetto proposta è di 0.5 secondi.

EFFETTO ZOOM

Al passaggio del mouse si assiste a un aumento delle dimensioni delle immagini

effetto-zoom



Il codice da usare è il seguente

<style>
.container {
width: 300px;
margin: 0 auto;
}
#zoom img{
height: 100px;
width: 300px;
margin: 15px 0;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
}
#zoom img:hover {
height: 150px;
width: 400px;
margin-left:-50px;
}
</style>
<div class="container" id="zoom">
<img src="http://lorempixel.com/400/133/"/>
<img src="http://lorempixel.com/400/133/"/>
<img src="http://lorempixel.com/400/133/"/>
<img src="http://lorempixel.com/400/133/"/>
</div>

L'effetto dura 1 secondo e le immagini vengono trasformate da 100 pixel di altezza e 300 pixel di larghezza rispettivamente a 150 e 400 pixel. Da notare che è stato inserito anche un rientro a sinistra di 50 pixel per mantenere le immagini allineate.

EFFETTO DISSOLVENZA

Al passaggio del mouse vengono mostrati bagliori e riflessi

effetto-dissolvenza



Il codice da usare è il seguente

<style>
#fadein { width: 700px; margin: 0 auto; min-height: 300px; } #fadein img { margin: 25px; opacity: 0.8; border: 10px solid #eee; /*Transizione*/ -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; /*Riflesso*/ -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.1))); } #fadein img:hover { opacity: 1; /*Riflesso*/ -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4))); /*Bagliore*/ -webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8); -moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8); box-shadow: 0px 0px 20px rgba(255,255,255,0.8); }
</style>
<div id="fadein">
   <img src="http://lorempixel.com/200/200/"/>
   <img src="http://lorempixel.com/200/200/"/>
   <img src="http://lorempixel.com/200/200/"/>
   <img src="http://lorempixel.com/200/200/"/>
   <img src="http://lorempixel.com/200/200/"/>
   <img src="http://lorempixel.com/200/200/"/>
   <img src="http://lorempixel.com/200/200/"/>
   <img src="http://lorempixel.com/200/200/"/>
</div>

Anche in questo ultimo effetto oltre a sostituire gli indirizzi delle immagini si possono personalizzare gli stessi parametri che riguardano la durata della transizione, i colori, l'opacità e l'ombreggiatura.




12 commenti :

  1. Wow! Bellerrimi! ;)

    L'effetto testo potrebbe p.es. essere usato in un menu verticale come alternativa al classico tooltip.

    RispondiElimina
  2. Ciao Ernesto, se possibile, potresti creare un tutorial su come personalizzare le miniature di un articolo?

    RispondiElimina
  3. cioè quindi ernesto se applico il codice per un effetto questo funziona di default su qualsiasi immagine io inserisca?
    grazie

    RispondiElimina
    Risposte
    1. Se la prima parte la inserisci nel modello è così. C'è scritto chiaramente:
      "Il codice di ciascun effetto sarà suddiviso in due parti. La prima che inizia con < style > e finisce con < /style > può essere incollata direttamente nell'articolo in modalità HTML oppure inserita nel modello subito sopra a < /head >. La seconda parte che è formata dal codice HTML deve invece essere incollata nel punto della pagina in cui si vogliono visualizzare le immagini. Se si è optato per la prima parte del codice nel modello si potrà inserire lo stesso effetto in tutte le pagine del blog semplicemente usando la seconda parte del codice."
      @#

      Elimina
  4. Ciao :D ,come dovrei scrivere se voglio che al passaggio del mouse su un link, sull'immagine si attivi l'effetto sblilenco ????

    RispondiElimina
    Risposte
    1. @# Per prima cosa devi incollare questo codice subito sopra alla riga </head> in Modello > Modifica HML

      <style>
      #sbilenco { width: 800px; margin: 0 auto; } #sbilenco img { margin: 20px; border: 5px solid #eee; -webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2); -moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2); box-shadow: 4px 4px 4px rgba(0,0,0,0.2); -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; } #sbilenco img:hover { -webkit-transform: rotate(-7deg); -moz-transform: rotate(-7deg); -o-transform: rotate(-7deg); }
      </style>

      poi devi inserire le immagini nell'Editor del post su Blogger con questo codice

      <a href="URL DEL LINK"><div id="sbilenco"><img src="URL IMMAGINE"/></div></a>

      Elimina
    2. Questo commento è stato eliminato dall'autore.

      Elimina
    3. Grazi ma sfortunatamente non mi funziona... mi sapresti dire dove sbaglio...

      i44.tinypic.com/154bwaq.jpg

      Elimina
    4. Non so che dirti. Prova a andare nel sito di un Editor in Real Time come questo
      http://htmledit.squarefree.com/
      e prova a incollare questo codice
      <style>
      #sbilenco { width: 800px; margin: 0 auto; } #sbilenco img { margin: 20px; border: 5px solid #eee; -webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2); -moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2); box-shadow: 4px 4px 4px rgba(0,0,0,0.2); -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; } #sbilenco img:hover { -webkit-transform: rotate(-7deg); -moz-transform: rotate(-7deg); -o-transform: rotate(-7deg); }
      </style>
      <a href="#"><div id="sbilenco"><img src="http://lorempixum.com/400/133"/></div></a>
      In basso vedrai l'immagine che si sposterà a sinistra di 10 gradi quando il cursore ci passa sopra
      @#

      Elimina
    5. ah scusa ,allora, forse non mi sono spiegato bene :/ io vorrei che al passaggio del mouse su un testo-link, l'immagine si muovi in effetto sbilenco.

      Elimina
  5. Vorresti che si muovesse l'immagine anche se il mouse passa su un link e non sulla stessa? Mi sembra molto complicato :)
    @#

    RispondiElimina
    Risposte
    1. si esattamente... eh eh non sapevo che fosse complicato :/ vbb mi inventerò qualcosa, grz cmq :D

      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.