Come mostrare testo o immagini lampeggianti nel blog.

Come mostrare in una pagina web del testo o delle immagini lampeggianti con link ad altre pagine web usando il CSS3 o il javascript.

Con un programma di grafica come Photoshop o Gimp si possono creare immagini lampeggianti in formato GIF. Anche il testo poteva essere fatto lampeggiare utilizzando il tag blink che però adesso è stato deprecato e non funziona più nei browser più usati. Vediamo come risolvere utilizzando i CSS3 e i javascript per pubblicare in una pagina web un testo o una immagine lampeggiante che abbia anche un link a un'altra pagina web.

Questa personalizzazione può essere interessante per evidenziare un particolare paragrafo e per incentivare i click su un elemento. Per maggiore chiarezza dividerò il post in 4 sezioni: testo lampeggiante con i CSS, immagini lampeggianti con i CSS, testo lampeggiante con i javascript e testo lampeggiante con i javascript. Inserirò anche dei collegamenti e del testo formattato che naturalmente può essere adattato alle singole esigenze. Chi non avesse neppure una infarinatura di questi temi può scaricarsi gratuitamente il mio ebook "Guida all'HTML e al CSS". Ai neofiti consiglio anche la lettura del post sui codici dei colori.

TESTO LAMPEGGIANTE CON I CSS3

Ecco un esempio di codice di base che può essere usato a questo scopo

<div class="blink_text" >Iscriviti ai feed di <span><a href="http://feeds.feedburner.com/ideepercomputeredinternet/zUQN" target="_blank">IpCeI</a></span></div>
<style type="text/css">
.blink_text {
animation:1s blinker linear infinite;
-webkit-animation:1s blinker linear infinite;
-moz-animation:1s blinker linear infinite;
color: #00f;
font-size:18px;
font-weight:bold;
}
.blink_text a {color:#f00;}
@-moz-keyframes blinker { 
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
@-webkit-keyframes blinker { 
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
@keyframes blinker { 
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
</style>

con due colori diversi per il testo linkato e quello senza link. Il risultato è il seguente:

Iscriviti ai feed di IpCeI

Il lampeggio è provocato dai diversi livelli di opacità che nascondono il testo. La durata del lampeggio è di un secondo e può essere modificata così come l'URL del link colorato di rosso.

 

IMMAGINI LAMPEGGIANTI CON I CSS

Il codice precedente può essere adattato a una immagine in questo modo

<div class="blink_text" ><a href="http://feeds.feedburner.com/ideepercomputeredinternet/zUQN" target="_blank"><img src="https://lh5.googleusercontent.com/-GTnWMP0dzfo/ThsSsyrKqqI/AAAAAAAATzs/O3amW2MnLNE/s100/colibr%2525C3%2525AC.gif" /></a></div>
<style type="text/css">
.blink_text {
animation:1s blinker linear infinite;
-webkit-animation:1s blinker linear infinite;
-moz-animation:1s blinker linear infinite;
}
@-moz-keyframes blinker { 
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
@-webkit-keyframes blinker { 
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
@keyframes blinker { 
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
</style>

dove l'URL del collegamento è colorato di rosso e l'URL della immagine è colorato di viola.

TESTO LAMPEGGIANTE CON I JAVASCRIPT

Vediamo come i javascript possano essere una alternativa ai CSS3 per il testo lampeggiante

<div id="blink" style="text-align: center;"> <a href="http://feeds.feedburner.com/ideepercomputeredinternet/zUQN" target="_blank"><span style="color: #00f; font-size: 18px;">Sottoscrivi i feed di</span> <span style="color: #f00; font-size: 22px;"> Idee per Computer ed Internet</span></a> </div>
<script language="JavaScript">
function blink_one() {
document.getElementById('blink').style.visibility='visible';
setTimeout('blink_two()',1000);
}
function blink_two() {
document.getElementById('blink').style.visibility='hidden';
setTimeout('blink_one()',1000);
}
blink_one();
</script>

L'URL del link è colorato di rosso mentre possono essere personalizzati gli altri parametri. Il lampeggio è determinato dal tag visibility='hidden' che lo nasconde alternativamente per un secondo. Se si incolla questo codice in un post in modalità HTML si ottiene questo risultato

Sottoscrivi i feed di Idee per Computer ed Internet

 

IMMAGINI LAMPEGGIANTI CON I JAVASCRIPT

Se si preferisce inserire immagini lampeggianti con i javascript si può usare questo codice

<div id="blink2" style="text-align: center;">
<a href="http://feeds.feedburner.com/ideepercomputeredinternet/zUQN" target="_blank"><img src="https://lh5.googleusercontent.com/-GTnWMP0dzfo/ThsSsyrKqqI/AAAAAAAATzs/O3amW2MnLNE/s100/colibr%2525C3%2525AC.gif" /></a></div> <script language="javascript">
function lampeggiamento(){
if(document.getElementById('blink2').style.visibility=="hidden")
{document.getElementById('blink2').style.visibility= "visible"}
else
{document.getElementById('blink2').style.visibility= "hidden"}
}
setInterval('lampeggiamento()',1000);
</script>

dove l'URL della immagine è colorato di viola. L'intervallo proposto per il lampeggio è di 1000 millisecondi ovvero di un secondo. Concludo ricordando che si possono anche inserire i CSS3 e i javascript nel modello per poi inserire nel post solo i tag <div> o <span> e i relativi contenuti.