Pour coder un texte avec un effet néon, rien de plus simple, il suffit seulement de travailler avec quelques lignes CSS. Quand on souhaite mettre en valeur un titre ou attirer l’attention sur un texte, rien de plus de plus efficace et tendance qu’un effet néon. A la base, le néon est un gaz noble et rare, contenu dans un tube dans lequel passe un courant qui va produire la couleur brillante rouge orangé. Découvert à la fin du 19° siècles, popularisé dans l’entre-deux guerres et tombé en désuétude à partir des années 50′. Il revient à la mode depuis quelques années, mais sous forme numérique avec ses couleurs éclatantes et brillantes.
Un effet style :
Ainsi, des codes couleurs sont généralement attribués en fonction des effets et les effets prennent toute leur place dans une communication moderne et dynamique. Attirer l’œil par des lumières électriques, des effets clignotants et des éclairages phosphorescent vous assurent une meilleure mémorisation de votre page web. Les couleurs du néon sont pleines de vies et contribuent au dynamisme des pages internet. Sous l’impulsion de designers et d’artiste, l’effet néon reprend du poil de la bête et prend toute sa place dans une campagne de marketing digital.
Le néon redevient l’expression par excellence de la « pop culture ». Ainsi beaucoup d’artistes reprendront les codes couleurs du néon pour illustrer leurs affiches ou campagnes de promotion publicitaire. Cela passe par Ursain Bolt (sport) à Muse et Daft Punk (musique) en passant par Apple (informatique) et tant d’autres qui mettront leurs campagnes publicitaires sous l’effet néon.
Ainsi il devient plus facile de retenir un élément ou un logo avec un effet néon. Qui par sa nature brillante et lumineuse, va permettre de taper dans l’œil. En effet, dans un effet de style minimaliste, le néon va apporter sa touche dynamique et puissante. Autant de raison qui vont pousser les designers et autres développeur « front-end » à utiliser le style néon.
Le paradoxe de coder un effet néon en CSS sera l’utilisation des ombres qui permettront de mettre en valeur l’effet de lumière et de faire une animation simulant l’effet « clignotant instable » du néon. Pour cela, l’utilisation des box-shadows sera primordial. En effet, il est possible de pouvoir en superposer plusieurs d’affilés. Quand on regarde un néon de près, on voit que c’est une lumière qui se diffuse. Ce sera le même principe avec le CSS.
Coder un texte avec un effet néon devient donc un jeu vu l’étendue des possibilités que vous avez. Ainsi s’ouvre devant vous un nouvel univers d’animations, de mise en avant de l’information.
Your
Pure
Web
Pour coder un texte avec un effet néon en CSS, il suffit de définir votre texte dans un document HTML. En l’occurrence, ici, j’ai mis des balises <br> pour forcer le texte sur plusieurs lignes et j’ai joué avec line-height pour définir une hauteur.
Dans le document CSS, on retrouve trois blocs principaux.
- Le premier concerne le texte en question. Dans une balise h1, on y applique différents effets de style sachant que le premier text-shadow sera écrasé par l’animation. Donc rien de compliqué pour l’instant.
- Le second bloc va concerner l’effet de fond du body. Ici pour des raisons pratiques, le texte est volontairement enfermé dans une div dans laquelle on applique l’effet retro. Ainsi, on travaille sur la répétition des lignes colorés avec un léger effet de transparence. Il suffit de jouer avec les valeurs selon l’effet souhaité.
- Le dernier bloc concerne l’animation via le webkit-keyframes. Cette règle permet de définir les étapes qui composent la séquence d’une animation CSS. Cette règle est toujours suivi d’un identifiant (@-webkit-keyframes blabla) qui permet d’appeler la règle. Ici, on lui à donné comme valeurs des pourcentages. Cela permet de définir les étapes transitoires et de définir plusieurs séquences qui rappelleront l’effet « néon détraqué ». Dans le texte shadow, on peut appeler plusieurs valeurs, séparé par des virgules. Ainsi on gère les différentes nuances de couleurs pour coller au plus proche de l’effet.
