Comment créer un effet NÉON en CSS

Comment créer un effet NÉON en CSS

Aujourd’hui je vais te montrer comment réaliser un effet Néon en CSS. On va voir ensemble la possibilité de donner à n’importe quel élément un effet de lumière en utilisant principalement des ombres CSS, comme on pourrait le faire en design graphique.

On va découvrir pas à pas comment réaliser cet effet néon. Et à la fin de cet article tu pourras créer des néons super stylay en mode Cyberpunk, Synthwave ou Tuning.

Façade d'un bâtiment disposant d'un écriture en néon. La scène est vu du bas et comporte un ciel violet.

Un effet néon sur du texte

On va commencer simple, notre but va être de créer un effet de néon sur un texte que l’on aura préalablement choisi, grâce à une ombre que l’on va appliquer sur notre texte.

Si tu t’y connais un peu en ombre côté CSS tu dois déjà savoir quelle propriété je vais utiliser. Si tu ne sais pas ce n’est pas grave on est là pour apprendre. Après tout, j’étais aussi une quiche en CSS au début.

La propriété text-shadow

Pour créer notre effet néon sur notre texte nous allons lui appliquer une ombre grâce à la propriété CSS text-shadow. Cette propriété initialement proposée pour la version 2 de CSS a finalement été retirée dans CSS 2.1, puis réintégrée dans la troisième version.

La propriété CSS text-shadow ajoute des ombres à un texte. Elle accepte une liste d’ombres à appliquer au texte de l’élément. Chaque ombre est décrite par une position relative à l’axe X et Y, un flou et une couleur principale.

text-shadow: x-offset y-offset (blur) (color);

La propriété est similaire à la propriété CSS box-shadow mais dispose d’une syntaxe un peu plus simple. Une syntaxe plus simple veut dire moins de paramètres et par conséquent l’utilisation de text-shadow est plus limité. Mais limitée ne veut pas dire restreinte, nous allons voir par la suite comment créer notre effet néon avec cette propriété.

Effet néon avec text-shadow

L’avantage d’une ombre portée, c’est qu’en définissant correctement son flou (blur) on peut lui donner l’impression qu’elle se dissipe avec la distance qu’elle parcourt, un peu comme la lumière.

De ce fait il suffit de rendre notre ombre portée plus lumineuse afin de lui donner l’impression d’être une source de lumière.

text-shadow: 0 0 60px rgba(202,228,225,0.8);

La ligne de CSS ci-dessus crée une ombre sur le texte avec un flou de 60px et un bleu clair légèrement effacé.

Par contre c’est un peu faible cette lumière ? Puis c’est un peu plat aussi non ?

Je sais, mais pas de soucis à se faire. Pour remédier à tout ça il nous suffit de faire en sorte d’ajouter plusieurs ombres à notre texte. Les ombres vont se superposer pour augmenter l’effet de lumière. Il faudra aussi veiller à utiliser un niveau de flou et une transparence différente pour chaque ombre pour réussir la superposition.

C’est pas bien beau tout ça ? Allez on va voir maintenant si on peut faire la même chose avec d’autres éléments.

Un effet néon sur d’autres types d’éléments

Pour le texte, c’est fait, mais imaginons que je veuille créer un effet de néon sur un autre élément. Sur le container de mon texte par exemple ?

Tu dois te douter de quelle propriété CSS je vais te parler pour te permettre de résoudre ton problème.

La propriété box-shadow

Et BAM c’est reparti, j’ai l’impression que mon blog ne parle que de ces maudites box-shadow. Je t’en ai parlé la dernière fois dans mon article sur le Neumorphism en t’expliquant son problème avec les animations.

Mais je n’ai pas abordé son fonctionnement. La propriété CSS box-shadow ajoute des ombres à la boîte d’un élément. Elle accepte une liste d’ombres à appliquer à l’élément comme le fait text-shadow et un mot-clé optionnel inset. Chaque ombre est décrite par une position relative à l’axe X et Y, des rayons de flou et d’étalement et pour finir une couleur principale.

box-shadow: x-offset y-offset (blur-radius) (spread-radius) (color);

C’est les rayons de flou et d’étalement ainsi que le mot-clé inset qui rend cette propriété plus complexe que text-shadow. Cette complexité permet de rendre les ombres plus précises, plus marquées, et de pouvoir aussi choisir leur orientation dans l’espace.

Effet néon avec box-shadow

Comme l’effet néon créé avec text-shadow, nous allons devoir définir plusieurs ombres pour créer notre effet de lumière.

Nous allons aussi pouvoir ajouter des ombres intérieures pour donner un meilleur effet à notre néon. Et ainsi ne pas faire un effet néon uniquement sur l’extérieur de notre boîte.

box-shadow:
    0 0 8px #fff,
    inset 0 0 8px #fff,
    0 0 16px #c6e2ff,
    inset 0 0 16px #c6e2ff,
    0 0 32px #c6e2ff,
    inset 0 0 32px #c6e2ff; 

Comme on peut le voir dans le code ci-dessus. J’utilise uniquement le flou et je ne touche pas à l’opacité des couleurs pour créer un effet néon très lumineux. J’utilise le mot-clé inset pour construire l’ombre intérieure qui sera la même que l’ombre extérieure.

On est bien là ! Avec cet effet tu peux déjà créer un site pour film de SF ou sinon tu peux aussi l’utiliser sur un site de tuning à la Pimp my Ride.

Extrait de l'émission américaine : Pimp my ride

Animer un effet néon

Maintenant qu’on a défini ensemble comme créer un effet néon sur du texte ou tout autre élément, on va pouvoir tester une petite animation dessus.

On va créer quelque chose de simple à animer. Une pancarte de restaurant en mode « rétro » qui clignote.

Je ne vais pas rentrer dans le détail du code pour la pancarte c’est assez simple. On va plutôt se concentrer sur le code de l’animation et surtout notre @keyframes.

@keyframes flashing {
    0%, 19%, 21%, 31%, 32%, 41%, 42%, 100% {
      // Ne rien faire
    }
    20%, 30%, 40% {        
      // Faire quelque chose
    }    
}

Dans le code ci-dessus je définis une @keyframes avec plusieurs étapes qui composent la séquence de mon animation CSS. J’utilise une syntaxe pour simplifier la @keyframes et éviter de la répétition de code.

0%, 19%, 21%, 31%, 32%, 41%, 42%, 100%

Quand nous sommes dans ces pourcentages de notre animation je reviens au state initial de mon animation. En d’autres termes je ne fais rien. Le state initial d’une animation est défini par 0% dans une @keyframes c’est pour cela que je dis que nous revenons au state initial.

20%, 30%, 40%

Pour le reste des valeurs on peut déclencher un changement dans notre animation. Dans notre cas nous supprimerons les ombres.

Je finis la @keyframes et je l’ajoute sur notre pancarte et hop c’est terminé ! (En espérant que je ne tue pas un de mes lecteurs avec les clignotements..)

Conclusion

On a vu ensemble comment créer un effet de lumière en CSS afin de créer des néons. Que se soit pour du texte, ou pour tout autre élément, la technique est semblable et se base sur les ombres CSS.

Alors oui tu ne vas pas souvent mettre des néons sur les sites que tu crées mais qui sait un jour tu en auras peut-être l’occasion et j’espère que ça t’aura aidé. 😎

En attendant le prochain article je te laisse me dire ce que tu as pensé de l’effet néon en commentaire, et de partager cet article s’il t’a plu 👋

Haut de page