Come postare nel blog immagini circolari e ruotanti.

Come usare il CSS per pubbblicare in un sito le immagini in foma circolare o ruotante.

Lo standard delle immagini è come noto rettangolare e sono i due parametri with e height che determinano rispettivamente larghezza e altezza delle stesse immagini. La sintassi con cui si può postare in modalità HTML una qualsiasi immagine è la seguente 

<img src="URL_IMMAGINE" with="200" height="200"/>

dove oltre alle dimensioni della immagine bisogna inserire anche il suo URL diretto.  Naturalmente tutti avrete visto delle immagini dalle forme diverse dal classico rettangolo. Tali tipi di immagini si realizzano tramite il formato PNG o GIF che permettono di creare uno sfondo trasparente per avere tale effetto. Si possono però anche usare i CSS per mostrare solo la parte circolare centrale di una immagine, utile anche nei widget come quello dei commenti recenti. 

Per mostrare una immagine in forma circolare si può utilizzare per esempio 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;  
}
</style>
 <img class="circolare" src="URL_IMMAGINE"/>

che può essere incollato così com'è in modalità HTML oppure incollare nel modello la parte evidenziata di giallo subito sopra alla riga ]]></b:skin> mentre la parte evidenziata di verde si incolla nel post tutte le volte che si vuole rendere circolare una immagine quadrata o rettangolare. 

Gli utenti di Blogger che avessero postato delle immagini con l'Editor della piattaforma possono incollare il codice evidenziato di giallo nel template come già detto e modificare il codice della immagine andando su HTML che si trova accanto a Scrivi e incollando l'espressione class="circolare" in questo modo 

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjynN2JGQFmJJbEVvT8l-zTQ_YOHqhFnjRjGTHGDm5CJud2iSMadIwtkP_tdKOlgP3C1E3XazkfOf_ZO0G6Cr-QojfIe3CRo1c88Bzye20WYWiredIxqIIp-21gZLSp7mkt1m_r5Syh2k96/s1600/island_cocktails-3066.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img class="circolare" border="0" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjynN2JGQFmJJbEVvT8l-zTQ_YOHqhFnjRjGTHGDm5CJud2iSMadIwtkP_tdKOlgP3C1E3XazkfOf_ZO0G6Cr-QojfIe3CRo1c88Bzye20WYWiredIxqIIp-21gZLSp7mkt1m_r5Syh2k96/s320/island_cocktails-3066.jpg" width="300" /></a></div>

 

IMMAGINI CIRCOLARI CON SFONDO CHE RUOTANO

Si possono anche creare immagini circolari che ruotano intorno al proprio asse

---

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

Il codice utilizzato è il seguente che potrà essere modificato a piacimento

<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://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>

dove i due tag colorati di viola servono per inserire un collegamento alla immagine e possono essere tolti mentre il tag <br/> rappresenta un salto di riga per il testo colorato di blu.