12 superbes effets néon rétro dans la conception Web

Issu du tube Geissler, l'enseigne au néon était un trait caractéristique de l'Amérique des années 1920 aux années 60. Il a marqué plusieurs décennies et a créé sa propre ère distincte - une ère de nuits lumineuses et colorées avec des enseignes au néon à chaque coin de rue.

Sans aucun doute, l'enseigne au néon appartient au passé. Il est synonyme de style rétro. Mais ce n'est pas aussi ennuyeux que les trucs archaïques du bon vieux temps. Il a un zeste; il a une ambiance. Sa nature colorée et sa personnalité lumineuse le maintiennent en vie.

Et même si la tendance à utiliser des enseignes au néon se meurt dans la vraie vie, laissant la place à des solutions «vertes» plus sophistiquées et élégantes, il y a encore des endroits pour le voir dans les étendues en ligne. C'est là qu'il peut faire jouer son charisme. Et étant donné qu'une vague de nostalgie a balayé le monde, une enseigne au néon peut devenir un candidat idéal pour créer des designs qui répondent au courant dominant d'aujourd'hui.

Il existe plusieurs manières d'introduire une touche rétro fluo dans votre interface. La plus évidente et la plus simple consiste à l'utiliser comme choix stylistique pour afficher des plaques signalétiques, des slogans ou simplement les détails textuels d'un site Web. Aujourd'hui, nous allons vous montrer d'excellents extraits de code qui donnent vie à cet effet.

Enseigne au néon Hot Ones par Aaron Minnamon

Le projet d'Aaron Minnamon a un sens distinct du style urbain américain des années 50. C'est brillant, audacieux et audacieux. Il a l'air authentique, grâce au comportement habilement reproduit des enseignes au néon qui sont célèbres pour leur clignotement constant. Cette animation petite mais impressionnante a été réalisée à l'aide de HTML, SCSS et JavaScript.

Enseigne au néon animée CSS par Nodws / Néon de Las Vegas par Riccardo Tartaglia

Nodws, avec son fantastique projet dédié à Dribble, et Riccardo Tartaglia, avec son exceptionnel Neon de Las Vegas, ont emprunté une voie traditionnelle. Ils ont mis au point des concepts qui imitent parfaitement les panneaux de signalisation au néon conventionnels.

Les démos se ressemblent. Chacun comporte des enseignes au néon placées contre un mur de briques. Les deux sont enrichis de minuscules dynamiques pour donner à la scène un aspect vivant; et chacun a un aspect brillant. Les artistes ont réussi à se débrouiller avec seulement quelques lignes de code HTML et CSS, ce qui rend les solutions non seulement agréables à regarder, mais aussi légères.

Enseigne Néon Vintage par Kyle Lavery

Si vous avez besoin d'une sensation vintage incomparable sur votre site Web, vous devriez essayer Vintage Neon Sign de Kyle Lavery. Il respire les années 60 sur tous les fronts. La typographie décrite, agrémentée de couleurs au néon et soutenue par un magnifique arrière-plan de style tube est fantastique. Même si le lettrage n'est pas défini en caractères décoratifs, il ajoutera sans aucun doute une touche de fantaisie à tout projet.

Projet de Prima Utama Apriansyah

Le projet de Prima Utama Apriansyah présente un effet néon qui se révèle au survol. Il existe trois options de couleur : rouge, bleu et jaune. Chacun a fière allure. Tout est fait avec du HTML et du CSS purs - aucun JavaScript n'est nécessaire. L'avantage de cette solution est que l'effet néon est caché et impressionne les visiteurs lorsqu'il est révélé.

Neon Grid Loaders par Mai El-Awini

Bon, c'en est assez des effets de texte. Considérons d'autres façons d'ajouter de la magie fluorescente à l'interface. L'une des alternatives consiste à appliquer un style néon au chargement des animations, comme Mai El-Awini l'a fait avec Neon Grid Loaders.

Vous trouverez ici quatre chargeurs différents liés à un thème et à une coloration. Même s'ils sont primitifs, l'effet néon les amène certainement au niveau supérieur. Sur un fond sombre, ils ont l'air tout simplement fabuleux. Ils divertiront les visiteurs pendant qu'ils attendent que votre site Web termine tous ses préparatifs.

Bouton par Simone / Bouton néon par Elwin van den Hazel

D'autres détails d'interface peuvent également bénéficier du style néon. Par exemple, considérez les boutons. Étant donné que les appels à l'action "fantômes" sont toujours populaires, l'effet néon ne pourrait tout simplement pas être mieux adapté.

Il y a deux excellents extraits de code à essayer : l'un est créé par Simone et l'autre par Elwin van den Hazel. Les deux comprennent un bouton néon simple, mais élégant et subtil. Alors que le premier est un peu sombre en raison de la coloration en sourdine, le second attire certainement l'attention immédiatement avec son ton bleu vif et son effet lumineux. Tout est fait avec du pur HTML et CSS.

Boîtes de dialogue au néon par Hugo DarbyBrown

Vous pouvez également appliquer le style néon aux boîtes de dialogue. Jetez un coup d'œil aux boîtes de dialogue Neon de Hugo DarbyBrown. L'auteur a inclus quatre panneaux de dialogue conventionnels. Ils ont l'air audacieux et attrayants, mais sans crier sur tous les fronts. L'effet néon a donné une belle tournure aux éléments banals de l'interface utilisateur.

hexagrid néon de Matei Copot / Neon Hex Particles – Recreation de Brett / for a while de Gerard Ferrandez

Bien que nous considérions les styles néon comme un effet pouvant être appliqué aux détails autonomes d'un site Web (comme les boutons, la typographie ou un chargeur), ils peuvent également créer facilement un arrière-plan impressionnant. Considérez Neon Hexagrid de Matei Copot, Neon Hex Particles – Recreation de Brett et pendant un certain temps de Gerard Ferrandez.

Matei Copot offre aux visiteurs en ligne un fantastique fond de style nid d'abeille inspiré du néon où chaque cellule a sa propre durée de vie. La coloration passe du violet au turquoise et semble inspirante.

Le concept de Brett a une note de mystère. Il est également basé sur une forme hexagonale, mais cette fois, vous pouvez également voir une animation de révélation. Le motif apparaît au centre et se développe sur les côtés. Il y a un panneau de contrôle où vous pouvez jouer avec les paramètres.

Contrairement aux deux exemples précédents, le projet de Gérard Ferrandez propose une approche moderne du style néon. Vous y trouverez des milliers de petites particules qui forment un rectangle. Utilisez le curseur de votre souris pour perturber la surface plane et soulever une vague marquée par un ton doré semblable à un néon.

Exemples brillants

Bien que l'effet néon ne fasse rien d'inhabituel, c'est toujours l'une de ces choses qui attire instantanément l'attention. C'est un excellent outil pour rendre les détails d'un site Web plus visibles.

Il peut être utilisé pour définir des points focaux ou simplement pimenter un peu les choses avec le charisme lumineux de la nature fluorescente. Cela va parfaitement bien avec la typographie, les boutons et même les arrière-plans.

Oui, il a un gros inconvénient : il ne révèle sa beauté et son potentiel que dans un environnement sombre. Donc, si vous utilisez une interface utilisateur plus légère, ce n'est pas le meilleur choix. Mais si vous avez des motifs sombres en tête, l'effet néon peut devenir un instrument parfait pour impressionner vos visiteurs.