12 atemberaubende Retro-Neon-Effekte im Webdesign

Entstanden aus der Geissler-Röhre, war die Leuchtreklame von den 1920er bis in die 60er Jahre ein charakteristisches Merkmal Amerikas. Es hat mehrere Jahrzehnte geprägt und seine eigene Ära geschaffen – eine Ära heller, farbenfroher Nächte mit Neonschildern an jeder Ecke.

Ohne Zweifel gehört die Leuchtreklame der Vergangenheit an. Es ist ein Synonym für Retro-Stil. Aber es ist nicht so langweilig wie das archaische Zeug aus der guten alten Zeit. Es hat eine Würze; es hat eine stimmung. Seine farbenfrohe Natur und seine helle Persönlichkeit halten es am Leben.

Und obwohl die Tendenz zur Verwendung von Neonschildern im wirklichen Leben abnimmt und raffinierteren und eleganteren „grünen“ Lösungen Platz macht, gibt es immer noch Orte, an denen man sie in den Weiten des Internets sehen kann. Hier kann er seine Ausstrahlung ausspielen. Und angesichts der Tatsache, dass eine Welle der Nostalgie die Welt erfasst hat, kann eine Leuchtreklame ein idealer Kandidat für die Gestaltung von Designs sein, die dem heutigen Mainstream entsprechen.

Es gibt mehrere Möglichkeiten, Ihrer Benutzeroberfläche einen Retro-Fluoreszenz-Touch zu verleihen. Am naheliegendsten und einfachsten ist es, es als stilistische Wahl zu verwenden, um Namensschilder, Slogans oder einfach nur die textbasierten Details einer Website anzuzeigen. Heute zeigen wir Ihnen einige hervorragende Codeschnipsel, die diesen Effekt zum Leben erwecken.

Heiße Leuchtreklame von Aaron Minnamon

Aaron Minnamons Projekt hat einen ausgeprägten Sinn für den amerikanischen Urban Style der 50er Jahre. Es ist hell, mutig und gewagt. Es sieht authentisch aus, dank des gekonnt reproduzierten Verhaltens von Leuchtreklamen, die für ihr ständiges Blinken berühmt sind. Diese kleine, aber beeindruckende Animation wurde mit Hilfe von HTML, SCSS und JavaScript zum Leben erweckt.

CSS-animierte Leuchtreklame von Nodws / Neon aus Las Vegas von Riccardo Tartaglia

Sowohl Nodws mit seinem fantastischen Dribble-Projekt als auch Riccardo Tartaglia mit seinem herausragenden Neon aus Las Vegas haben einen traditionellen Weg eingeschlagen. Sie haben Konzepte entwickelt, die herkömmliche Neon-Straßenschilder perfekt imitieren.

Die Demos sehen gleich aus. Jedes verfügt über Neonschilder, die an einer Ziegelwand angebracht sind. Beide sind mit winzigen Dynamiken angereichert, um die Szene lebendig erscheinen zu lassen; und jeder hat ein helles Aussehen. Die Künstler kamen mit nur wenigen Zeilen HTML-Code und CSS aus, wodurch die Lösungen nicht nur optisch ansprechend, sondern auch leichtgewichtig wurden.

Vintage Leuchtreklame von Kyle Lavery

Wenn Sie ein unverwechselbares Vintage-Feeling auf Ihrer Website benötigen, sollten Sie Vintage Neon Sign von Kyle Lavery ausprobieren. Es strahlt die 60er an allen Fronten aus. Umrissene Typografie, aufgepeppt mit Neonfarben und unterstützt von einem schönen Hintergrund im Tube-Stil, sieht fantastisch aus. Auch wenn der Schriftzug nicht in dekorativer Schrift gesetzt ist, verleiht er jedem Projekt zweifellos ein ausgefallenes Gefühl.

Projekt von Prima Utama Apriansyah

Das Projekt von Prima Utama Apriansyah verfügt über einen Neoneffekt, der beim Schweben sichtbar wird. Es gibt drei Farboptionen: Rot, Blau und Gelb. Jeder sieht toll aus. Alles ist mit reinem HTML und CSS erstellt – kein JavaScript erforderlich. Der Vorteil dieser Lösung ist, dass der Neoneffekt versteckt ist und die Besucher beeindruckt, wenn er sichtbar wird.

Neon Grid Loader von Mai El-Awini

Okay, genug der Texteffekte. Betrachten wir einige andere Möglichkeiten, der Benutzeroberfläche etwas fluoreszierende Magie hinzuzufügen. Eine der Alternativen besteht darin, einen Neon-Stil auf Ladeanimationen anzuwenden, wie es Mai El-Awini mit Neon Grid Loaders getan hat.

Hier finden Sie vier verschiedene Lader, die mit einem Thema und einer Farbgebung verbunden sind. Obwohl sie primitiv sind, bringt der Neoneffekt sie sicherlich auf die nächste Stufe. Vor einem dunklen Hintergrund sehen sie einfach fabelhaft aus. Sie werden Besucher unterhalten, während sie darauf warten, dass Ihre Website alle Vorbereitungen abgeschlossen hat.

Knopf von Simone / Neonknopf von Elwin van den Hazel

Auch andere Schnittstellendetails können vom Neon-Stil profitieren. Denken Sie zum Beispiel an Schaltflächen. Da „Geister“-Aufrufe zum Handeln immer noch beliebt sind, könnte der Neoneffekt einfach nicht besser passen.

Es gibt zwei hervorragende Code-Snippets zum Ausprobieren: eines von Simone und eines von Elwin van den Hazel. Beide enthalten einen einfachen, aber eleganten und subtilen Neonknopf. Während Ersteres durch gedeckte Farbgebung etwas düster wirkt, fällt Letzteres mit seinem kräftigen Blauton und dem Glow-Effekt sofort ins Auge. Alles ist mit reinem HTML und CSS gemacht.

Neon-Dialogboxen von Hugo DarbyBrown

Sie können den Neon-Stil auch auf Dialogfelder anwenden. Schauen Sie sich nur Neon Dialog Boxes von Hugo DarbyBrown an. Der Autor hat vier konventionelle Dialogtafeln eingefügt. Sie sehen mutig und attraktiv aus, ohne jedoch an allen Fronten zu schreien. Der Neon-Effekt hat den banalen UI-Elementen eine nette Wendung gegeben.

Neon Hexagrid von Matei Copot / Neon Hex Particles – Recreation von Brett / For a While von Gerard Ferrandez

Während wir Neon-Stile als einen Effekt betrachten, der auf eigenständige Details einer Website (wie Schaltflächen, Typografie oder einen Loader) angewendet werden kann, kann er auch leicht einen Killer-Hintergrund ergeben. Betrachten Sie Neon Hexagrid von Matei Copot, Neon Hex Particles – Recreation von Brett und For a While von Gerard Ferrandez.

Matei Copot bietet Online-Besuchern einen fantastischen Neon-inspirierten Hintergrund im Wabenstil, bei dem jede Zelle ihre eigene Lebensdauer hat. Die Farbgebung wechselt von Lila zu Türkis und sieht inspirierend aus.

Bretts Konzept hat etwas Geheimnisvolles. Es basiert ebenfalls auf einer sechseckigen Form, aber dieses Mal können Sie auch eine Enthüllungsanimation sehen. Das Muster erscheint in der Mitte und wächst zu den Seiten. Es gibt ein Bedienfeld, in dem Sie mit den Einstellungen spielen können.

Im Gegensatz zu den beiden vorherigen Beispielen zeigt das Projekt von Gerard Ferrandez eine moderne Interpretation des Neon-Stils. Hier finden Sie Tausende kleiner Partikel, die ein Rechteck bilden. Verwenden Sie Ihren Mauszeiger, um die flache Oberfläche zu stören und eine Welle zu erzeugen, die durch einen goldenen Neon-ähnlichen Ton gekennzeichnet ist.

Leuchtende Beispiele

Der Neon-Effekt macht zwar nichts Ungewöhnliches, ist aber dennoch eines der Dinge, die sofort ins Auge fallen. Es ist ein großartiges Werkzeug, um die Details einer Website hervorzuheben.

Mit ihr lassen sich Akzente setzen oder einfach mit der leuchtenden Ausstrahlung der fluoreszierenden Natur etwas aufpeppen. Es passt perfekt zu Typografie, Schaltflächen und sogar Hintergründen.

Ja, es hat einen großen Nachteil – es offenbart seine Schönheit und sein Potenzial nur in einer dunklen Umgebung. Wenn Sie also eine leichtere Benutzeroberfläche verwenden, ist dies nicht die beste Wahl. Wenn Sie jedoch dunkle Designs im Sinn haben, kann der Neoneffekt zu einem perfekten Instrument werden, um Ihre Besucher zu beeindrucken.