Testo e immagini lampeggianti con CSS o javascript

Con l'ausilio di programmi di grafica come Photoshop o Gimp si possono creare delle immagini animate in formato GIF allo scopo per esempio di creare dei pulsanti lampeggianti.

Nel linguaggio HTML esiste pure il tag blink per creare testo lampeggiante, un tag che però è stato deprecato da diverso tempo. In questo post vedremo come creare del testo e delle immagini lampeggianti tramite il linguaggio CSS3 e con il javascript.

La scelta del CSS3 è migliore di quella del javascript, perché non rallenta in modo significativo l'apertura della pagina da parte dei navigatori. 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 di esempio che naturalmente possono essere adattati alle singole esigenze o sostituiti da testo piano. Il tag target="_blank" serve unicamente per far aprire i collegamenti in un'altra scheda e può essere tralasciato.


Chi non avesse alcuna conoscenza di HTML e CSS può scaricare e consultare il mio ebook gratuito Guida all'HTML e al CSS in cui sono illustrate le nozioni propedeutiche per neofiti.





1) TESTO LAMPEGGIANTE CON IL CSS3


Un esempio di codice di base da usare per questa personalizzazione è il seguente:



che se incollato in un Editor HTML Online produce questo risultato

testo-lampeggiante-css3

e qui c'è la demo



Ovviamente possono essere modificati i codici dei colori e gli altri parametri. Il lampeggiamento è dato dai tag evidenziati di giallo. Viene impostato un lampeggiamento della durata di 1 secondo (personalizzabile) inserendo una opacità 1.0 intervallata a una opacità 0.0 che porta a un lampeggiamento di mezzo secondo






2) IMMAGINE LAMPEGGIANTE CON IL CSS3


Un codice di esempio per il lampeggiamento di una immagine è il seguente:



Il concetto è lo stesso, solo che al posto di un testo viene inserita una immagine attraverso il suo link diretto. Ovviamente possono essere personalizzati tutti i parametri a partire dall'URL collegato all'URL della immagine.

Ecco la demo del codice precedente a cui è stata aggiunto l'allineamento al centro.


Adesso vediamo come realizzare gli stessi effetti con il javascript.





3) TESTO LAMPEGGIANTE CON IL JAVASCRIPT


Un codice lampeggiante di esempio può essere il seguente:



che produce questo risultato


dove si possono personalizzare i testi colorati di blu, l'URL del collegamento, i codici dei colori e gli altri parametri della formattazione come grassetto e dimensione dei font. Il sistema per ottenere il lampeggiamento consiste nella creazione di un id blink che poi viene ripreso in due funzioni che alternano visibilità e nascondimento (hidden) della durata di 700 millisecondi (personalizzabili).

4) IMMAGINI LAMPEGGIANTI CON IL JAVASCRIPT


Infine ecco il codice javascript per creare un lampeggiamento di immagini:


che può anche essere utilizzato insieme al precedente, perché usa un diverso id blink2. L'intervallo del lampeggiamento è stato impostato in 1000 millisecondi ovvero un secondo.

Posta un commento

Comments (0)

Nuova Vecchia