Pubblicato il 01/05/13e aggiornato il

Come visualizzare foto rettangolari in forma circolare e ruotanti.

Come mostrare una foto rettangolare in forma circolare e che ruoti al passaggio del cursore.
Nel precedente articolo abbiamo visto come mostrare come circolari delle immagini quadrate o rettangolari mentre in un post di qualche tempo fa illustrai come far ruotare una foto al passaggio del mouse. Per entrambi gli effetti vengono utilizzati solo dei fogli di stile e non servono in alcun modo i programmi di grafica. Vediamo adesso come combinare i due effetti cioè come mostrare una qualsiasi immagine di forma rettangolare o quadrata in forma circolare e che ruoti al passaggio del mouse. Quando il cursore smetterà di puntare la foto si assisterà alla rotazione in senso opposto.

Si possono personalizzare le dimensioni, il numero di gradi della rotazione e la sua durata. Se si vuole postare solo una foto con questa particolarità basta andare nell'Editor di Blogger e in HTML incollare, nel punto in cui si vuole visualizzare la foto, il seguente codice

<style type="text/css">
.circolare {
  width: 300px;
  height: 300px;
  border-radius:999em;   
-moz-border-radius:999em; 
-webkit-border-radius:999em;
  -o-border-radius: 999em;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
transition-duration: 1s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
overflow:hidden; 
}
.circolare:hover {
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
}
</style>
<img class="circolare" src="https://lh6.googleusercontent.com/-YpxWCbR9vzI/UT7zfsRZYrI/AAAAAAAAgys/bbbzu3UuIas/s912/natura4.jpg"/>

che produce questo risultato



I parametri da personalizzare sono colorati di rosso e mostrano una immagine di 300 pixel di diametro, che effettua una rotazione di 360 gradi nel tempo di 1 secondo. Se vogliamo utilizzare questa personalizzazione per più immagini allora dobbiamo andare su Modello > Modifica HTML e cercare la riga di codice ]]></b:skin> quindi, subito sopra incollare la parte di codice tra <style… > e </style>. Quando volessimo postare una immagine con quella particolarità basterà incollare questa riga

<img class="circolare" src="URL_IMMAGINE" alt="nome-immagine" title="titolo immagine"/>

dove i tag Alt e Title sono stati messi per una migliore ottimizzazione SEO.




14 commenti :

  1. Ciao, volevo proporti un post...se non l'hai già fatto. Come inserire in una pagina (sul blog) l'elenco di blog che si seguono ma con l'aggiornamento dei contenuti e l'immagine del post che hanno inserito. Spero di essere stata chiara nella mia richiesta. Ciao Bogomilla

    RispondiElimina
    Risposte
    1. @# Non si può fare esattamente quello che chiedi ma ci si può andare vicino. Tempo fa ho pubblicato un post su come si potesse creare un aggregatore di siti con Blogger, qui c'è l'articolo
      http://www.ideepercomputeredinternet.com/2012/02/come-creare-un-aggregatore-di-siti-con.html
      e qui c'è la demo
      http://design-prova.blogspot.it/p/aggregatore.html
      in una pagina statica. Basta mettere nel blogroll i siti che si seguono.

      Elimina
  2. Ok, grazie...provo a vedere, spero di capire! ;-)
    Siccome non posso inserire link, posso scriverti il nome del blog che ha utilizzato quanto ti ho domandato?
    ciao grazie 1000
    Bogomilla

    RispondiElimina
    Risposte
    1. Puoi incollare il suo URL senza problemi. Non amo i link cliccabili ma gli URL si possono tranquillamente postare

      Elimina
  3. ciao scusa se ti stresso sempre ma ho un problema nel mio blog. le immagini che ho inserito non me li fà vedere come mai?? ho inserito il tuo codici per le foto e ho notato che a parecchi post mi dice no photo ma io lo inserita. grazie in anticipo

    RispondiElimina
    Risposte
    1. @# Non ho doti di chiaroveggenza :). Forse non hai reso pubblico l'album ...

      Elimina
  4. A me funziona le immagini diventano circolari però non ruotano :)

    RispondiElimina
    Risposte
    1. @# Forse hai Internet Explorer 9 o inferiore

      Elimina
    2. figurati, uso google chrome, per usare internet explorer dovrebbero minacciarmi di morte ...forse :)

      Elimina
    3. @# allora hai copiato male il codice

      Elimina
    4. @# Prova a incollare il codice di questo post su questo sito
      http://htmledit.squarefree.com/
      per verificare e poi magari cambia l'URL della immagine

      Elimina
    5. Ci sono riuscito proprio ora :) eh si, dovrei decisamente smanettare di più e commentare di meno. Ti ringrazio!

      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.