Avviso con effetto pulsazione per post o widget.

Con la tecnologia CSS3 si possono creare degli effetti animazione molto interessanti che permettono di realizzare rotazioni o addirittura menù molto complessi senza javascript. Si possono realizzare anche delle forme pulsanti modificando in modo continuo larghezza e opacità delle forme stesse.

Fino a pochi mesi fa si potevano visualizzare queste pulsazioni solo con i browser webkit vale a dire Firefox e Safari, ora lo si può fare anche con le ultime versioni di Internet Explorer. Chi fosse interessato a approfondire questi temi può leggersi questo post di ZURBlog e quest'altro di Stackoverflow. In questo articolo vediamo come realizzare un avviso o comunque mostrare un un cerchio pulsante con un link a una determinata pagina web. Si tratta di una personalizzazione che può essere inserita indifferentemente in  un widget o in un articolo in modalità HTML

Il codice può essere personalizzato modificando i codici dei colori e il link. Quando si passa con il mouse sopra al cerchio si ferma la sua pulsazione e cambia il suo colore. Il codice da usare è il seguente:

<style>
.form_alert a {
float:left;
font-size: 30px;
font-style: italic;
margin: 40px;
padding: 60px 30px;
border: 3px solid #f7f7f7;
background: #f95b5b;
border-radius: 80px;
color: #fff;
box-shadow: 4px 4px 6px rgba(0,0,0,0.30);
filter: progid:DXImageTransform.Microsoft.Shadow(color='#f7f7f7', Direction=145, Strength=5);
animation: pulsazione 4s ease-out;
animation-iteration-count: infinite;
-ms-animation: pulsazione 4s ease-out;
-ms-animation-iteration-count: infinite;
-webkit-animation: pulsazione 4s ease-out;
-webkit-animation-iteration-count: infinite;
opacity: 0.0;
}
@-webkit-keyframes pulsazione {
0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
50% {opacity: 1.0;}
100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
}
@keyframes pulsazione {
50% {opacity: 1.0;}
100% {transform: scale(1.2, 1.2); opacity: 0.0;}
0% {-ms-transform: scale(0.1, 0.1); opacity: 0.0;}
50% {opacity: 1.0;}
100% {-ms-transform: scale(1.2, 1.2); opacity: 0.0;}
0% {transform: scale(0.1, 0.1); opacity: 0.0;}
}
.form_alert a:hover {
animation-play-state:paused;
-webkit-animation-play-state:paused;
-ms-animation-play-state:paused;
background: #1fe0c9;
}
</style>
<div class="form_alert">
<a href="LINK_COLLEGAMENTO">Avviso </a>
</div>

I parametri più importanti da modificare sono stati colorati di rosso.



Se si inserisce una espressione più lunga di Avviso si possono diminuire le dimensioni dei caratteri (30px). La durata della trasformazione è invece stata settata in 4 secondi.