Pubblicato il 24/07/12e aggiornato il

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="URL_DEL_LINK"/><div style="background:url(https://lh5.googleusercontent.com/-dgB4oUX6m3o/UA5Yy9ond1I/AAAAAAAAZOM/kl768bdvsGA/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://lh4.googleusercontent.com/-bN2Vj8bk7VE/UA5Yvhx31lI/AAAAAAAAZOE/jSs9WsVdw7w/s355/cocktail.jpg" height="250" width="250" /></center></div></a>
I due tag per inserire l'URL_DEL_LINK 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.




5 commenti :

  1. Bel widget. Utilizzato. Grazie come al solito.

    RispondiElimina
    Risposte
    1. @Stefano
      Inserito in un post si vedono delle imperfezioni se le immagini vengono pubblicate con un bordo, trasparente nel mio caso. C'è un'altra imprecisione nell'articolo. Forse la dimensione ideale per le immagini è quadrata o addirittura con l'altezza superiore alla larghezza (per quella sullo sfondo).

      Elimina
    2. Ho messo il tuo bel widget nella sidebar. Mi pare che vada tutto bene ma ne approfitto per una domanda: sono riuscito a modificare le dimensioni della foto ruotante perchè ho trovato height="250" width="250". Nella foto sullo sfondo non ho trovato invece dove fare le modifiche.

      Elimina
    3. @Stefano
      Per modificare le dimensioni della immagine di sfondo devi operare sui due tag
      width:100%;
      mettendo per esempio
      width:320px;
      in entrambe le occorrenze.

      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.