Mostrare le immagini con bordi e cornici animati.

Come pubblicare immagini con bordi animati solo con CSS e HTML.

Dopo aver illustrato come pubblicare le immagini su Blogger con delle cornici non solo utilizzando lo strumento del Designer Modelli ma anche operando con il codice direttamente nel template oppure solo in un singolo post adesso facciamo un passo ulteriore e vediamo come sia possibile inserire anche delle cornici animate.

Mi limiterò a prendere in considerazione solo la possibilità di postare l'immagine con bordi animati in un singolo articolo. Dobbiamo semplicemente creare una regola con i CSS per poi richiamare nell'HTML. Chi non abbia nessuna idea di quello sto dicendo può leggersi il mio ebook Guida all'HTML e al CSS che si può scaricare gratuitamente. 

Il codice da utilizzare è il seguente 

<style>
.bordi-animati.colonna {
  width: 420px;  /* Larghezza immagine */
  height: 283px; /* Altezza immagine */
 border-width: 12px 12px; /* Larghezza bordi */
 border-radius: 16px; /* Arrotondamento */}
@keyframes bordi-animati-riga{
  0% {
    border-color: rgba(0, 0, 0, 0.3);    border-top-color: #000;
  }
  25% {
    border-color: rgba(0, 0, 0, 0.3);
    border-right-color: #000;
  }
  50% {
    border-color: rgba(0, 0, 0, 0.3);
    border-bottom-color: #000;
  }
  75% {
    border-color: rgba(0, 0, 0, 0.3);
    border-left-color: #000;
  }
  100% {
    border-color: rgba(0, 0, 0, 0.3);
    border-top-color: #000;
  }
} .bordi-animati {
  border: 12px solid #000;
}
.bordi-animati.riga {
animation: bordi-animati-riga 0.9s linear infinite;/* Durata Transizione */}
</style>
<div class="bordi-animati colonna riga"><img src="URL_IMMAGINE" width="420" /></div>

da incollare nell'Editor in modalità HTML. I codici dei colori sono stati inseriti in esadecimali e in RGBA. Per personalizzarli si può usare il convertitore da HEX a RGB e viceversa. È stata inserita anche una percentuale di opacità (trasparenza) di 0.3 che poi è proprio quella che crea l'animazione. Da notare che la larghezza della immagine oltre che nel CSS è presente anche come attributo del tag <img>. La durata della transizione è stata settata in 0.9 secondi

Si tratta di un modo originale per pubblicare immagini a cui si voglia dare una particolare evidenza. I valori e i parametri colorati in rosso possono essere personalizzati a piacere.Le cornici animate saranno perfette in una pagina web bianca mentre in un post ci potrebbero essere delle influenze ereditate dal template. In questo secondo caso si possono modificare le dimensioni del contenitore del primo blocco oppure la larghezza dell'immagine per rendere simmetriche foto e cornice.