Pubblicato il 29/10/13e aggiornato il

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

pulsazione

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.




2 commenti :

  1. Una domanda semplice e forse stupida: come mai alla fine il pulsate DEMO è un JPG? Non sarebbe meglio un bel cerchio in CSS3, magari con effetto pulsazione (o anche senza) che rimanda poi alla pagina interessata? ;)

    RispondiElimina
    Risposte
    1. Perché è molto più semplice inserire un link a una immagine che incollare un codice visto poi che la pubblicazione nei post di questi elementi talvolta presenta dei problemi
      @#

      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.