Come inserire una immagine ruotante con sfondo personalizzato.

Come inserire un widget di una immagine ruotante. Può essere posto in una sidebar o in una pagina statica.

Visto che siamo in un periodo di tregua per quello che riguarda il caldo estivo ho pensato di realizzare un piccolo widget che richiama la situazione meteorologica. Non è altro che un divertissement ma può essere personalizzato con immagini, testo e link che non hanno nulla a che vedere con questo argomento che è servito solo come pretesto. Tale widget è opportuno inserirlo in una sidebar o in una pagina statica.

E' un modo credo piuttosto originale per pubblicizzare il nostro blog, una nostra iniziativa, per mettere in risalto un sito amico o per spingere una campagna di sensibilizzazione. C'è bisogno solo di due immagini di dimensioni all'incirca di 400 pixel di larghezza e di 350 pixel di altezza. Possiamo comunque usare anche immagini di dimensioni molto diverse cambiando i parametri collegati.

Quello che è importante è soprattutto il rapporto tra larghezza e altezza che deve portare a una visualizzazione delle immagini nella sidebar in modo non troppo distorto. Postare in un articolo l'immagine rinfrescante che ruota in uno sfondo estivo rende molto peggio che non inserirla in una sidebar

---

E' sempre estate
con I.p.C.e.I

Il codice da incollare su Layout > Aggiungi un gadget > HTML/Javascript è il seguente

<style>
@-webkit-keyframes imgrotazione {
   from { -webkit-transform: rotateY(0deg);    }
   to   { -webkit-transform: rotateY(-360deg); }
  }
  @-moz-keyframes imgrotazione {
   from { -moz-transform: rotateY(0deg);    }
   to   { -moz-transform: rotateY(-360deg); }
  } 
   #imgrotazione {    
       -webkit-animation-name: imgrotazione;
    -moz-animation-name: imgrotazione;
    animation-name: imgrotazione;
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-duration: 20s;
    -moz-animation-duration: 20s;
    animation-duration: 20s;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;  
  }
</style>
<a href="#"><div style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_E_3ItcjKa22cyEQfEslTCPo5yIzk37hyxua87kMw8Frhr0ydwkX9WRK9qeCWvMx5g-DMIqhK8-dqb_Jd0lJz_wDG8Z6c8tRZYKBY7v6ewIDz1rh8jprS0MheDYhuCSFUyAf4PwaW5o0/s442/caribbean-beach.jpg);width: 100%;border-left:1px solid #000000;border-right:1px solid #000000;">
<hr style="width: 100%; height: 5px; color: #FFC63C; background: #000000;-moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px;-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);-moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);box-shadow: 0px 0px 10px rgba(0,0,0,.8);" />
<center><span style="color:#F7F679;font-size:23px;font-family:century gothic;text-shadow: 1px 1px 1px #000, -1px -1px 0px #000;"><b>E' sempre estate<br/>con I.p.C.e.I</b></span>
<br/>
<img id="imgrotazione" style="-moz-border-radius: 150px; -webkit-border-radius: 150px; border-radius: 150px;" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcVtqGqbYak4bOOHoawSEz0tstxqAYBHw78LOvTAwfYD3ZdTw4Qu43x8WPy1jCVxoWtbYaV5_KMPeTFE0xiGtKj02PGfFkPoxSv4QrhtM3pfLbdf2HPj51Nc0dUsGU-dKJodFwVrgvtlz1/s355/cocktail.jpg" height="250" width="250" /></center></div></a>

I due tag per inserire l'URL del collegamento colorati di viola possono anche essere tolti se non si vuole indirizzare i visitatori che cliccano sopra alle immagini. Gli URL delle foto in rosso possono essere sostituiti così come la scritta in blu. Il tag <br/> non è altro che un semplice salto di riga. Ovviamente possono anche essere settati diversamente altri parametri come per esempio la durata della rotazione impostata sui 20 secondi. Trattandosi di una rotazione realizzata con CSS3 tale effetto non sarà visibile su Internet Explorer ma solo su Chrome, Safari e Firefox.