Rendere circolari le immagini quadrate o rettangolari con i CSS.

Come rendere le immagini circolari partendo da foto rettangolari o quadrate.

I widget che ho proposto su questo sito con le miniature circolari hanno ricevuto una accoglienza piuttosto positiva da parte dei lettori. Ricordo tra gli altri il widget degli ultimi commenti con miniature ruotanti o quello delle icone circolari dei social o ancora quello con gli avatar dei commentatori circolari. L'obiettivo di questo articolo è quello di illustrare come si possa rendere circolare una qualunque immagine rettangolare o quadrata. Ovviamente si può usare un programma di grafica e modificare l'immagine direttamente. Vediamo come si possa invece procedere lasciando inalterata la foto e operando solo con i fogli di stile.

Questo sistema può essere usato per una sola foto o anche per più immagini inserendo il CSS nel modello. Nel caso si voglia inserire una foto circolare in un post si apre l'Editor di Blogger e si pigia su HTML che è sulla destra di Scrivi. Si incolla un codice come questo

<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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi56br-73oig14B-IZ5BAy7Kt-GWR9X7uqLabeLztgwb3hxAdId8JfseiFQ_WeTS7u1RAa-grGuPDYd5cUyAeOILgi3irS9e7O4IxQehQxrk_M3dJhVnunDQku_sHj2DCDd-acwJdXxe3E/s640/island_cocktails-3066.jpg"/>

dove le dimensioni e l'URL dell'immagine possono essere scelte a piacere. Il risultato è il seguente

Se invece vogliamo utilizzare questo sistema per più di una immagine su più post dobbiamo andare su Modello > Modifica HTML e cliccare sull'area del codice. Si digita Ctrl+F e nella casella Search si incolla la riga ]]></b:skin> e si preme su Invio. Verrà evidenziato tale codice e subito sopra va incollato

.circolare {
  width: 300px;
  height: 300px;
  border-radius:999em;   
-moz-border-radius:999em; 
-webkit-border-radius:999em;
  -o-border-radius: 999em;  
}

Si salva il modello. Per postare una immagine circolare si utilizza quest'altro codice

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

CASO IN CUI SI POSTANO LE IMMAGINI CON L'EDITOR DI BLOGGER

Se si utilizza l'Editor di Blogger per postare le foto, quando si va su HTML si visualizzerà un codice simile

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

Per fare in modo che l'immagine risulti circolare dobbiamo inserire 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>

Se abbiamo inserito il codice nel modello non ci sono altre cose da fare mentre se vogliamo visualizzare solo questa immagine in forma circolare dobbiamo inserire all'inizio del post il codice che va da  <style type="text/css"> fino a </style> compresi. Poi si pubblica l'articolo come al solito. Anche se le immagini sono di dimensioni più grandi si visualizzeranno comunque con il raggio scelto nei CSS. Si possono anche far ruotare le immagini oltre a renderle circolari.