12 efecte neon retro uimitoare în design web

Evoluat din tubul Geissler, semnul cu neon a fost o trăsătură caracteristică Americii din anii 1920 până în anii '60. A marcat mai multe decenii și și-a creat propria eră distinctă - o eră a nopților luminoase și colorate, cu semne cu neon la fiecare colț.

Fără îndoială, semnul cu neon este un lucru din trecut. Este sinonim cu stilul retro. Dar nu este la fel de plictisitor ca lucrurile arhaice din vremurile bune. Are coaja; are un vibe. Natura sa colorată și personalitatea strălucitoare îl mențin în viață.

Și chiar dacă tendința de a folosi semne cu neon moare în viața reală, dând loc unor soluții „verzi” mai sofisticate și mai elegante, există încă locuri de văzut în întinderile online. Aici își poate aduce carisma în joc. Și având în vedere faptul că un val de nostalgie a cuprins lumea, un semn de neon poate deveni un candidat ideal pentru crearea de design-uri care să îndeplinească curentul mainstream al zilei.

Există mai multe moduri de a introduce o atingere retro fluorescentă în interfața dvs. Cea mai evidentă și mai ușoară este să-l folosiți ca alegere stilistică pentru afișarea plăcuțelor cu nume, sloganelor sau doar detaliile bazate pe text ale unui site web. Astăzi, vă vom arăta câteva fragmente de cod excelente care dau viață acestui efect.

Semn neon Hot Ones de Aaron Minnamon

Proiectul lui Aaron Minnamon are un sens distinct al stilului urban american al anilor '50. Este strălucitor, îndrăzneț și îndrăzneț. Arată autentic, datorită comportamentului reprodus cu pricepere al semnelor de neon, care sunt renumite pentru clipirea lor constantă. Această animație mică, dar impresionantă, a fost adusă la viață cu ajutorul HTML, SCSS și JavaScript.

Semn neon animat CSS de Nodws / Neon din Las Vegas de Riccardo Tartaglia

Atât Nodws, cu proiectul său fantastic dedicat Dribble-ului, cât și Riccardo Tartaglia, cu remarcabilul său Neon din Las Vegas, au parcurs un traseu tradițional. Au venit cu concepte care imită perfect indicatoarele stradale neon convenționale.

Demo-urile seamănă. Fiecare are semne cu neon plasate pe un zid de cărămidă. Ambele sunt îmbogățite cu dinamici minuscule pentru a face scena să pară vie; și fiecare are un aspect luminos. Artiștii au reușit să se descurce pe doar câteva linii de cod HTML și CSS, făcând soluțiile nu doar plăcute pentru ochi, ci și ușoare.

Semn neon vintage de Kyle Lavery

Dacă aveți nevoie de un aspect vintage inconfundabil pe site-ul dvs., ar trebui să încercați Vintage Neon Sign by Kyle Lavery. Ea emană anii '60 pe toate fronturile. Tipografia conturată, condimentată cu colorare neon și susținută de un fundal frumos în stil tub arată fantastic. Chiar dacă literele nu sunt setate într-un tip decorativ, va adăuga fără îndoială o senzație de fantezie oricărui proiect.

Proiect de Prima Utama Apriansyah

Proiectul lui Prima Utama Apriansyah prezintă un efect de neon care este dezvăluit la hover. Există trei opțiuni de culoare: roșu, albastru și galben. Fiecare arată grozav. Totul este realizat cu HTML și CSS pur – nu este necesar JavaScript. Avantajul acestei soluții este că efectul de neon este ascuns și impresionează vizitatorii atunci când este dezvăluit.

Neon Grid Loaders de Mai El-Awini

Bine, sunt destule efecte de text. Să luăm în considerare alte modalități de a adăuga o magie fluorescentă la interfață. Una dintre alternative este aplicarea unui stil neon la încărcarea animațiilor, așa cum a făcut Mai El-Awini cu Neon Grid Loaders.

Aici veți găsi patru încărcătoare diferite care sunt legate cu o singură temă și colorare. Chiar dacă sunt primitivi, efectul de neon îi duce cu siguranță la nivelul următor. Pe un fundal întunecat, arată pur și simplu fabulos. Ei vor distra vizitatorii în timp ce aceștia așteaptă ca site-ul dvs. să-și termine toate pregătirile.

Buton de Simone / Buton de neon de Elwin van den Hazel

Alte detalii ale interfeței pot beneficia și de stilul neon. De exemplu, luați în considerare butoanele. Deoarece îndemnurile „fantomă” sunt încă populare, efectul de neon pur și simplu nu s-ar putea potrivi mai bine.

Există două fragmente de cod excelente de încercat: unul este realizat de Simone și altul de Elwin van den Hazel. Ambele includ un buton neon simplu, dar elegant și subtil. În timp ce primul este puțin sumbru din cauza colorării dezactivate, al doilea cu siguranță atrage imediat atenția cu tonul său de albastru vibrant și efectul strălucitor. Totul este realizat cu HTML și CSS pur.

Casete de dialog Neon de Hugo DarbyBrown

Puteți aplica stilul neon și caselor de dialog. Aruncă o privire la casetele de dialog Neon de Hugo DarbyBrown. Autorul a inclus patru panouri de dialog convenționale. Arată îndrăzneț și atractiv, dar fără să țipe pe toate fronturile. Efectul de neon a dat elementelor banale ale interfeței de utilizare o întorsătură plăcută.

neon hexagrid de Matei Copot / Neon Hex Particles – Recreere de Brett / pentru un timp de Gerard Ferrandez

În timp ce considerăm stilurile neon ca un efect care poate fi aplicat detaliilor de sine stătătoare ale unui site web (cum ar fi butoane, tipografie sau un încărcător), acesta poate face cu ușurință și un fundal ucigaș. Luați în considerare neon hexagrid de Matei Copot, Neon Hex Particles – Recreation de Brett și pentru o vreme de Gerard Ferrandez.

Matei Copot oferă vizitatorilor online un fundal fantastic în stil fagure, inspirat de neon, în care fiecare celulă are propria sa durată de viață. Culoarea se schimbă de la violet la turcoaz și arată inspirată.

Conceptul lui Brett are o notă de mister. De asemenea, se bazează pe o formă de hexagon, dar de data aceasta puteți vedea și o animație revelatoare. Modelul apare în centru și crește în lateral. Există un panou de control unde vă puteți juca cu setările.

Spre deosebire de cele două exemple anterioare, proiectul lui Gerard Ferrandez prezintă o abordare modernă a stilului neon. Aici veți găsi mii de particule mici care formează un dreptunghi. Folosiți cursorul mouse-ului pentru a perturba suprafața plană și pentru a ridica un val marcat de un ton auriu asemănător neonului.

Exemple strălucitoare

Deși efectul de neon nu face nimic neobișnuit, este totuși unul dintre acele lucruri care atrage instantaneu ochiul. Este un instrument excelent pentru a face detaliile unui site web mai proeminente.

Poate fi folosit pentru a seta puncte focale sau doar pentru a condimenta puțin lucrurile cu carisma strălucitoare a naturii fluorescente. Se potrivește perfect cu tipografie, butoane și chiar fundaluri.

Da, are un mare dezavantaj - își dezvăluie frumusețea și potențialul doar într-un mediu întunecat. Deci, dacă utilizați o interfață mai ușoară, atunci nu este cea mai bună alegere. Dar dacă aveți în minte niște modele întunecate, atunci efectul de neon poate deveni un instrument perfect pentru a vă impresiona vizitatorii.