Texto intermitente que cambia de color como un neon

5 comentaron



Combinando Javascript y CSS3 para cambiar y editar los colores, aplicando text-shadow para crear el brillo, podemos crear textos que se 'apagan' y se encienden como los neones luminosos. Se le pueden dar muchas utilidades a esta tecnica, como por ejemplo aplicandoselo al titulo del blog. Aqui teneis tres ejemplos, aunque se pueden combinar los colores a vuestro gusto:


color azul neon

de color rojo

verde luminoso


Cuando quieras poner un texto con este efecto, tan solo tienes que copiar y pegar el siguiente codigo alli donde quieras mostrarlo. Donde esta indicado en color rojo escribe las palabras que desees. Tambien puedes modificar algunos parametros como el color de la fuente, del luminoso y su tamaño donde esta indicado en color azul.

ver codigo
<span class="luz" id="blink"><b>TU TEXTO AQUI</b></span>

<script>
(function() {

setInterval(function(){
  var el = document.getElementById('blink');
  if(el.className == 'luz'){
      el.className = 'luz on';
  }else{
      el.className = 'luz';
  }
},500);

})();
</script>

<style>
.luz.on{
  color: #0099ff;/*color del texto al cambiar*/
  text-shadow:
     1px  1px rgba(255, 255, 255, .1),
    -1px -1px rgba(0, 0, 0, .88),
     0px  0px 20px #0099ff;/*color de la luz del texto*/
}
.luz{
  font-size:80px;/*tamaño de la fuente*/
  color: #000000;
  text-shadow:
     1px  1px rgba(255, 255, 255, .1),
    -1px -1px rgba(0, 0, 0, .88);
}
</style>