12 splendidi effetti al neon retrò nel web design

Evoluzione del tubo Geissler, l'insegna al neon è stata un tratto caratteristico dell'America dagli anni '20 agli anni '60. Ha segnato diversi decenni e ha creato la sua epoca distinta: un'era di notti luminose e colorate con insegne al neon a ogni angolo.

Senza dubbio, l'insegna al neon è una cosa del passato. È sinonimo di stile retrò. Ma non è così noioso come la roba arcaica dei bei vecchi tempi. Ha una scorza; ha un'atmosfera. La sua natura colorata e la sua personalità brillante lo mantengono vivo.

E anche se la tendenza a utilizzare le insegne al neon sta morendo nella vita reale, lasciando il posto a soluzioni “verdi” più sofisticate ed eleganti, ci sono ancora posti per vederlo nelle distese online. È qui che può mettere in gioco il suo carisma. E dato che un'ondata di nostalgia ha spazzato il mondo, un'insegna al neon può diventare un candidato ideale per creare design che soddisfino il mainstream di oggi.

Esistono diversi modi per introdurre un tocco retrò fluorescente nella tua interfaccia. La più ovvia e semplice è usarla come scelta stilistica per mostrare targhette, slogan o semplicemente i dettagli testuali di un sito web. Oggi ti mostreremo alcuni eccellenti frammenti di codice che danno vita a questo effetto.

Insegna al neon Hot Ones di Aaron Minnamon

Il progetto di Aaron Minnamon ha un chiaro senso dello stile urbano americano degli anni '50. È brillante, audace e audace. Sembra autentico, grazie al comportamento abilmente riprodotto delle insegne al neon famose per il loro continuo lampeggiare. Questa piccola ma impressionante animazione ha preso vita con l'aiuto di HTML, SCSS e JavaScript.

Insegna al neon animata CSS di Nodws / Neon da Las Vegas di Riccardo Tartaglia

Sia Nodws, con il suo fantastico progetto dedicato a Dribble, sia Riccardo Tartaglia, con il suo eccezionale Neon di Las Vegas, hanno intrapreso una strada tradizionale. Hanno escogitato concetti che imitano perfettamente i tradizionali segnali stradali al neon.

Le demo si assomigliano. Ognuno presenta insegne al neon posizionate contro un muro di mattoni. Entrambi sono arricchiti da minuscole dinamiche per rendere viva la scena; e ognuno ha un aspetto luminoso. Gli artisti sono riusciti a cavarsela solo con diverse righe di codice HTML e CSS, rendendo le soluzioni non solo piacevoli per gli occhi, ma anche leggere.

Insegna al neon vintage di Kyle Lavery

Se hai bisogno di un tocco vintage inconfondibile sul tuo sito web, dovresti provare Vintage Neon Sign di Kyle Lavery. Trasuda gli anni '60 su tutti i fronti. La tipografia delineata, condita con colori al neon e supportata da un bellissimo sfondo in stile tubo, sembra fantastica. Anche se le scritte non sono di tipo decorativo, aggiungeranno senza dubbio un tocco di fantasia a qualsiasi progetto.

Progetto di Prima Utama Apriansyah

Il progetto di Prima Utama Apriansyah presenta un effetto neon che si rivela al passaggio del mouse. Ci sono tre opzioni di colore: rosso, blu e giallo. Ognuno sembra fantastico. Tutto è realizzato con HTML e CSS puri, non è necessario JavaScript. Il vantaggio di questa soluzione è che l'effetto neon è nascosto e impressiona i visitatori quando viene rivelato.

Caricatori a griglia al neon di Mai El-Awini

Ok, basta con gli effetti di testo. Consideriamo altri modi per aggiungere un po' di magia fluorescente all'interfaccia. Una delle alternative è applicare uno stile neon al caricamento delle animazioni, come ha fatto Mai El-Awini con Neon Grid Loaders.

Qui troverai quattro diversi caricatori legati con un tema e una colorazione. Anche se sono primitivi, l'effetto neon li porta sicuramente al livello successivo. Su uno sfondo scuro, sembrano semplicemente favolosi. Intratteneranno i visitatori mentre aspettano che il tuo sito web finisca tutti i suoi preparativi.

Pulsante di Simone / Pulsante Neon di Elwin van den Hazel

Anche altri dettagli dell'interfaccia possono beneficiare dello stile neon. Ad esempio, considera i pulsanti. Poiché gli inviti all'azione "fantasma" sono ancora popolari, l'effetto neon non potrebbe adattarsi meglio.

Ci sono due ottimi frammenti di codice da provare: uno è realizzato da Simone e un altro da Elwin van den Hazel. Entrambi includono un pulsante al neon semplice, ma elegante e sottile. Mentre il primo è un po' cupo a causa della colorazione tenue, il secondo attira sicuramente immediatamente l'attenzione con il suo vibrante tono blu e l'effetto luminoso. Tutto è realizzato con puro HTML e CSS.

Finestre di dialogo al neon di Hugo DarbyBrown

Puoi applicare lo stile neon anche alle finestre di dialogo. Dai un'occhiata a Neon Dialog Boxes di Hugo DarbyBrown. L'autore ha incluso quattro pannelli di dialogo convenzionali. Sembrano audaci e attraenti, ma senza urlare su tutti i fronti. L'effetto neon ha dato una bella svolta ai banali elementi dell'interfaccia utente.

neon hexagrid di Matei Copot / Neon Hex Particles – Recreation di Brett / per un po' di Gerard Ferrandez

Sebbene consideriamo gli stili neon come un effetto che può essere applicato a dettagli autonomi di un sito Web (come pulsanti, tipografia o un caricatore), può facilmente creare anche uno sfondo killer. Consideriamo neon hexagrid di Matei Copot, Neon Hex Particles – Recreation di Brett e per un po' di Gerard Ferrandez.

Matei Copot offre ai visitatori online un fantastico sfondo a nido d'ape ispirato al neon in cui ogni cellula ha la propria durata. La colorazione cambia dal viola al turchese e sembra stimolante.

Il concetto di Brett ha una nota di mistero. Si basa anche su una forma esagonale, ma questa volta puoi anche vedere un'animazione di rivelazione. Il motivo appare al centro e cresce ai lati. C'è un pannello di controllo dove puoi giocare con le impostazioni.

A differenza dei due esempi precedenti, il progetto di Gerard Ferrandez presenta una rivisitazione moderna dello stile neon. Qui troverai migliaia di piccole particelle che formano un rettangolo. Usa il cursore del mouse per disturbare la superficie piana e sollevare un'onda contrassegnata da un tono dorato simile a un neon.

Esempi brillanti

Sebbene l'effetto neon non faccia nulla di insolito, è comunque una di quelle cose che cattura immediatamente l'attenzione. È un ottimo strumento per rendere più importanti i dettagli di un sito web.

Può essere utilizzato per impostare punti focali o semplicemente ravvivare un po' le cose con il carisma luminoso della natura fluorescente. Si sposa perfettamente con la tipografia, i pulsanti e persino gli sfondi.

Sì, ha un grosso inconveniente: rivela la sua bellezza e il suo potenziale solo in un ambiente buio. Quindi, se stai utilizzando un'interfaccia utente più leggera, non è la scelta migliore. Ma se hai in mente dei design scuri, l'effetto neon può diventare uno strumento perfetto per impressionare i tuoi visitatori.