Pubblicato il 08/10/14e aggiornato il

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.




4 commenti :

  1. Secondo me troppi fronzoli rendono la lettura di un post o blog più difficile. Più semplice è una cosa, più semplice sarà vederla e leggerla.

    Jan

    RispondiElimina
  2. ciao Ernesto è sparito il like button facebook....ho provato ad inserirlo come gadget ma non si vede nemmeno così---help

    RispondiElimina
    Risposte
    1. Se non hai modificato nulla può darsi sia un problema momentaneo
      @#

      Elimina
  3. non ho modificato nulla...non so me fare

    RispondiElimina

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.