Pubblicato il 01/05/13e aggiornato il

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://lh4.googleusercontent.com/-Z0WQ8_4qAxg/UT7zPxW-3xI/AAAAAAAAgyE/o6LuvWMN5sA/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="http://4.bp.blogspot.com/-fDWaKxLNxFY/UYDYZW2F1kI/AAAAAAAAhXg/eDQxSN_fmFg/s1600/island_cocktails-3066.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="300" src="http://4.bp.blogspot.com/-fDWaKxLNxFY/UYDYZW2F1kI/AAAAAAAAhXg/eDQxSN_fmFg/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="http://4.bp.blogspot.com/-fDWaKxLNxFY/UYDYZW2F1kI/AAAAAAAAhXg/eDQxSN_fmFg/s1600/island_cocktails-3066.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img class="circolare" border="0" height="300" src="http://4.bp.blogspot.com/-fDWaKxLNxFY/UYDYZW2F1kI/AAAAAAAAhXg/eDQxSN_fmFg/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.




2 commenti :

  1. Ciao, è possibile farlo solo per un widget? Vorrei farlo per gli ultimi articoli, di cui avevo usato un tuo tutorial...

    RispondiElimina
    Risposte
    1. Tutto è possibile però in linea di massima non è un lavoro semplicissimo a meno che non si abbia un codice molto semplice
      @#

      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.