L’effet néon en CSS

Ajouter un effet néon à votre site pour l’illuminer. Pour mettre en avant un bouton ou pour décorer votre site pour noël. Cet effet, simple à réaliser, redonne un peu de couleur à un site trop sombre.

De l’ombre à la lumière

Effectivement pour simuler la lumière d’un néon il faut utiliser les ombres en CSS, ça peu paraitre contradictoire mais cela reste la meilleure façon de simuler cet effet.

Si on regarde un néon allumé, bleu par exemple. Nous pouvons voir que qu’au plus près du tube néo la lumière est blanche, et plus la lumière se diffuse au plus et elle est colorée.
C’est que nous pouvons réaliser simplement en superposant les box-shadow CSS.

Le néon en pratique

Vous connaissez certainement ce bon vieux box-shadow CSS. Très utile pour donner du relief. Mais saviez-vous qu’il est possible de superposer plusieurs ombres dans le même box-shadow ?

Pour donner un exemple, nous allons créer un néon. Pour le HTML rien de plus simple il suffit juste d’ajouter une class que nous appellerons néon, sur un texte et de ce fait, nous allons remplacer le box-shadow par un text-shadow.

Le HTML :

 <div class="neon">
  Un Effet Néon 
</div>

Le CSS :

.neon {  
      color: #fff;
      text-shadow:  0 0 7px #fff, 
               0 0 10px #fff, 
               0 0 42px rgb(230, 18, 124),   
               0 0 77px rgb(230, 18, 124), 
               0 0 100px rgb(230, 18, 124) 
 }

Ce qu’il y a à retenir, c’est la construction du text-shadow, les ombres se superpose et son séparé par une virgule.
Pour construire ces ombres, il faut bien imaginer qu’au plus près du tube la lumière est blanche donc des ombres peu estompé et de couleur blanche, attention à cette partie, car elle peur rendre le texte peu lisible si les ombres blanche sont trop large.
Pour les ombres de couleurs il faut de plus en plus estompé et mettre la couleur souhaitée, même si on peut ajouter une couleur à chaque ombre, un simple estompage, de la même couleur, plus important vers la fin suffit.

Un néon scintille

La lumière du néon est une lumière qui scintille, qui oscille. Grâce à une animation CSS, on peut faire vivre ce néon.
Simplement en animant l’intensité de l’estompage des ombres, sauf pour la lumière blanche qui reste constante.

Exemple :