12 oszałamiających efektów retro neonowych w projektowaniu stron internetowych

Wyewoluował z tuby Geisslera, neon był charakterystyczną cechą Ameryki od lat 20. do 60. XX wieku. Wyznaczyła kilka dziesięcioleci i stworzyła swoją własną, odrębną epokę – erę jasnych, kolorowych nocy z neonowymi znakami namiotowymi na każdym rogu.

Bez wątpienia neon to już przeszłość. Jest synonimem stylu retro. Ale nie jest tak nudny jak archaiczne rzeczy z dawnych, dobrych czasów. Ma skórkę; ma klimat. Jego barwny charakter i jasna osobowość utrzymują go przy życiu.

I choć tendencja do używania neonów w realnym świecie ginie, ustępując miejsca bardziej wyrafinowanym i eleganckim „zielonym” rozwiązaniom, wciąż można to zobaczyć w internetowych przestrzeniach. W tym miejscu może wykorzystać swoją charyzmę. A biorąc pod uwagę fakt, że świat ogarnęła fala nostalgii, neon może stać się idealnym kandydatem do tworzenia projektów wpisujących się w dzisiejszy mainstream.

Istnieje kilka sposobów na wprowadzenie retro fluorescencyjnego akcentu do interfejsu. Najbardziej oczywistym i najłatwiejszym z nich jest użycie go jako stylistycznego wyboru do pokazywania tabliczek znamionowych, sloganów lub po prostu tekstowych szczegółów strony internetowej. Dzisiaj pokażemy Ci kilka doskonałych fragmentów kodu, które ożywiają ten efekt.

Neon Hot Ones autorstwa Aarona Minnamon

Projekt Aarona Minnamona ma wyraźne wyczucie amerykańskiego stylu miejskiego lat 50-tych. Jest jasny, odważny i odważny. Wygląda autentycznie, dzięki umiejętnie odwzorowanemu zachowaniu neonów, które słyną z ciągłego mrugania. Ta niewielka, ale imponująca animacja została ożywiona za pomocą HTML, SCSS i JavaScript.

CSS animowany Neon Sign autorstwa Nodws / Neon z Las Vegas autorstwa Riccardo Tartaglia

Zarówno Nodws, ze swoim fantastycznym projektem poświęconym Dribble'owi, jak i Riccardo Tartaglia ze swoim wybitnym Neonem z Las Vegas, obrali tradycyjną drogę. Wymyślili koncepcje, które doskonale imitują konwencjonalne neony uliczne.

Dema wyglądają podobnie. Na każdym z nich umieszczono neony umieszczone na ceglanej ścianie. Oba są wzbogacone o drobną dynamikę, aby scena wyglądała na żywą; i każdy ma jasny wygląd. Artystom udało się przetrwać na zaledwie kilku linijkach kodu HTML i CSS, dzięki czemu rozwiązania są nie tylko przyjemne dla oka, ale też lekkie.

Vintage Neon Sign autorstwa Kyle'a Lavery

Jeśli potrzebujesz niepowtarzalnego stylu vintage na swojej stronie, wypróbuj Vintage Neon Sign autorstwa Kyle'a Lavery'ego. Emanuje latami 60. na wszystkich frontach. Zarysowana typografia, doprawiona neonową kolorystyką i wsparta pięknym tłem w kształcie tuby wygląda fantastycznie. Nawet jeśli napis nie jest ozdobiony, z pewnością doda trochę fantazyjnego charakteru każdemu projektowi.

Projekt autorstwa Primy Utamy Apriansyah

Projekt autorstwa Primy Utamy Apriansyah zawiera efekt neonu, który pojawia się po najechaniu kursorem. Dostępne są trzy opcje kolorystyczne: czerwony, niebieski i żółty. Każdy wygląda świetnie. Wszystko jest wykonane w czystym HTML i CSS – nie wymaga JavaScript. Zaletą tego rozwiązania jest to, że efekt neonu jest ukryty, a odsłonięty robi wrażenie na zwiedzających.

Neonowe ładowarki siatkowe autorstwa Mai El-Awini

Dobra, wystarczy efektów tekstowych. Rozważmy inne sposoby dodania trochę magii fluorescencyjnej do interfejsu. Jedną z alternatyw jest zastosowanie stylu neonowego do ładowania animacji, tak jak zrobił to Mai El-Awini z Neonowymi ładowarkami sieciowymi.

Tutaj znajdziesz cztery różne ładowarki, które są powiązane jednym motywem i kolorem. Mimo że są prymitywne, efekt neonu z pewnością przenosi je na wyższy poziom. Na ciemnym tle prezentują się po prostu bajecznie. Będą bawić odwiedzających, gdy czekają, aż Twoja witryna zakończy wszystkie przygotowania.

Guzik Simone / Neonowy guzik Elwina van den Hazel

Inne szczegóły interfejsu również mogą zyskać dzięki neonowemu stylowi. Rozważmy na przykład przyciski. Ponieważ wezwania do działania „ducha” są nadal popularne, efekt neonu po prostu nie może być lepiej dopasowany.

Do wypróbowania są dwa doskonałe fragmenty kodu: jeden został stworzony przez Simone, a drugi przez Elwina van den Hazela. Oba zawierają prosty, ale elegancki i subtelny neonowy guzik. Podczas gdy pierwsza jest nieco posępna z powodu stonowanej kolorystyki, druga z pewnością od razu przyciąga wzrok żywym niebieskim odcieniem i efektem świecenia. Wszystko jest wykonane w czystym HTML i CSS.

Neonowe okna dialogowe Hugo DarbyBrown

Możesz również zastosować styl neonowy do okien dialogowych. Wystarczy spojrzeć na Neon Dialog Boxes autorstwa Hugo DarbyBrowna. Autor zamieścił cztery konwencjonalne panele dialogowe. Wyglądają odważnie i atrakcyjnie, ale bez krzyku na wszystkich frontach. Efekt neonu nadał banalnym elementom interfejsu użytkownika miły akcent.

Neon Hexagrid by Matei Copot / Neon Hex Particles – Recreation by Brett / przez chwilę by Gerard Ferrandez

Chociaż uważamy style neonowe za efekt, który można zastosować do samodzielnych szczegółów witryny (takich jak przyciski, typografia lub program ładujący), może on również z łatwością stworzyć zabójcze tło. Weźmy pod uwagę neonową sześciokątną grafikę Matei Copot, Neon Hex Particles – Recreation Bretta i przez chwilę Gerarda Ferrandeza.

Matei Copot oferuje odwiedzającym online fantastyczne tło w stylu plastra miodu, inspirowane neonami, w którym każda komórka ma swoją własną żywotność. Kolorystyka zmienia się z fioletowej na turkusową i wygląda inspirująco.

Koncepcja Bretta ma nutę tajemniczości. Opiera się również na kształcie sześciokąta, ale tym razem można również zobaczyć animację odsłaniania. Wzór pojawia się pośrodku i rozrasta się na boki. Jest panel sterowania, w którym możesz bawić się ustawieniami.

W przeciwieństwie do poprzednich dwóch przykładów, projekt Gerarda Ferrandeza charakteryzuje się nowoczesnym podejściem do neonowego stylu. Tutaj znajdziesz tysiące małych cząstek, które tworzą prostokąt. Użyj kursora myszy, aby poruszyć płaską powierzchnię i podnieść falę oznaczoną złotym odcieniem przypominającym neon.

Świecące przykłady

Chociaż efekt neonu nie robi niczego niezwykłego, nadal jest jedną z tych rzeczy, które natychmiast rzucają się w oczy. Jest to świetne narzędzie do uwydatniania szczegółów strony internetowej.

Może być używany do ustawiania punktów centralnych lub po prostu doprawiania rzeczy jasną charyzmą fluorescencyjnej natury. Świetnie komponuje się z typografią, przyciskami, a nawet tłami.

Tak, ma jedną dużą wadę – swoje piękno i potencjał ujawnia dopiero w ciemnym otoczeniu. Tak więc, jeśli używasz lżejszego interfejsu użytkownika, nie jest to najlepszy wybór. Ale jeśli masz na myśli ciemne projekty, efekt neonu może stać się idealnym narzędziem do zaimponowania odwiedzającym.