網頁設計中的 12 種令人驚嘆的複古霓虹燈效果

從蓋斯勒管演變而來的霓虹燈標誌是 1920 年代至 60 年代美國的一個特徵。 它標誌著幾十年，並創造了自己獨特的時代——一個明亮多彩的夜晚，每個角落都有霓虹燈招牌。

毫無疑問，霓虹燈標誌是過去的事情。 它是複古風格的代名詞。 但它並不像過去美好時光中的古老東西那麼沉悶。 它有熱情； 它有一種氛圍。 它豐富多彩的性質和鮮明的個性使它保持活力。

儘管在現實生活中使用霓虹燈的趨勢正在消亡，讓位於更複雜、更優雅的“綠色”解決方案，但在網上仍有很多地方可以看到它。 這是它可以發揮其魅力的地方。 鑑於一股懷舊浪潮席捲全球，霓虹燈標誌可以成為創造符合當今主流設計的理想選擇。

有幾種方法可以在您的界面中引入復古熒光觸摸。 最明顯和最簡單的方法是將其用作顯示銘牌、標語或僅顯示網站基於文本的詳細信息的風格選擇。 今天，我們將向您展示一些將這種效果變為現實的優秀代碼片段。

Aaron Minnamon 的 Hot Ones 霓虹燈廣告

Aaron Minnamon 的項目對 50 年代的美國城市風格有著獨特的感覺。 它明亮、大膽、大膽。 它看起來很真實，這要歸功於以不斷閃爍而聞名的霓虹燈標誌的巧妙再現行為。 這個小而令人印象深刻的動畫是在 HTML、SCSS 和 JavaScript 的幫助下實現的。

來自 Nodws 的 CSS 動畫霓虹燈標誌 / Riccardo Tartaglia 來自拉斯維加斯的霓虹燈

Nodws 和他出色的 Dribble 專用項目，以及 Riccardo Tartaglia 和他出色的來自拉斯維加斯的 Neon，都選擇了傳統路線。 他們提出了完美模仿傳統霓虹路牌的概念。

演示看起來很相似。 每一個都有霓虹燈標誌，靠在磚牆上。 兩者都富含微小的動態，使場景看起來很生動； 並且每一個都有光鮮亮麗的外表。 藝術家們只用了幾行 HTML 代碼和 CSS，使解決方案不僅令人賞心悅目，而且輕巧。

Kyle Lavery 的複古霓虹燈廣告

如果您需要在您的網站上營造出明顯的複古感，您應該嘗試 Kyle Lavery 的 Vintage Neon Sign。 它在各個方面都散發著 60 年代的氣息。 輪廓分明的排版，加上霓虹燈色彩，並由漂亮的管狀背景支持，看起來棒極了。 即使字體沒有設置為裝飾類型，它無疑會給任何項目增添一些花哨的感覺。

Prima Utama Apriansyah 的項目

Prima Utama Apriansyah 的項目具有懸停時顯示的霓虹燈效果。 共有三種顏色可供選擇：紅色、藍色和黃色。 每一個看起來都很棒。 一切都是用純 HTML 和 CSS 製作的——不需要 JavaScript。 這種解決方案的優點是霓虹燈效果是隱藏的，並且在顯示時會給訪問者留下深刻印象。

Mai El-Awini 的霓虹燈網格裝載機

好了，文字效果就到此為止。 讓我們考慮一些在界面中添加熒光魔法的其他方法。 一種替代方法是將霓虹燈樣式應用於加載動畫，就像 Mai El-Awini 對 Neon Grid Loaders 所做的那樣。

在這裡，您會發現四種不同的加載器，它們與一個主題和顏色相關聯。 儘管它們很原始，但霓虹燈效應肯定會將它們提升到一個新的水平。 在黑暗的背景下，它們看起來簡直太棒了。 他們將在等待您的網站完成所有準備工作時招待訪問者。

Simone 鈕扣 / Elwin van den Hazel 霓虹鈕扣

其他界面細節也可以從霓虹燈風格中受益。 例如，考慮按鈕。 由於“幽靈”號召性用語仍然很受歡迎，因此霓虹燈效果再合適不過了。

有兩個優秀的代碼片段可供嘗試：一個由 Simone 製作，另一個由 Elwin van den Hazel 製作。 它們都包括一個簡單而優雅和微妙的霓虹燈按鈕。 雖然第一個由於柔和的色彩而有點陰沉，但第二個肯定會以其充滿活力的藍色調和發光效果立即吸引眼球。 一切都是用純 HTML 和 CSS 製作的。

Hugo DarbyBrown 的霓虹燈對話框

您也可以將霓虹燈樣式應用於對話框。 看看 Hugo DarbyBrown 的 Neon Dialog Boxes。 作者包含了四個常規的對話面板。 他們看起來大膽而迷人，但沒有在所有方面尖叫。 霓虹燈效果給平庸的 UI 元素帶來了不錯的轉折。

Matei Copot 的霓虹燈六邊形 / Neon Hex Particles – Brett 的娛樂 / Gerard Ferrandez 的一段時間

雖然我們認為霓虹燈樣式可以應用於網站的獨立細節（如按鈕、排版或加載器），但它也可以輕鬆製作殺手級背景。 考慮一下 Matei Copot 的霓虹燈六邊形、Brett 的 Neon Hex Particles – Recreation 和 Gerard Ferrandez 的一段時間。

Matei Copot 為在線訪問者提供了一個奇妙的霓虹燈風格的蜂窩式背景，每個單元都有自己的壽命。 顏色從紫色變為綠松石色，看起來很鼓舞人心。

布雷特的概念帶有神秘色彩。 它也是基於六邊形的，但這次你也可以看到一個顯示動畫。 圖案出現在中心並向兩側生長。 有一個控制面板，您可以在其中進行設置。

與前兩個示例不同，Gerard Ferrandez 的項目採用了現代風格的霓虹燈風格。 在這裡，您會發現數以千計的小顆粒形成一個矩形。 使用鼠標光標擾動平坦的表面，並掀起以金色霓虹色為標誌的波浪。

發光的例子

雖然霓虹燈效應並沒有做任何不尋常的事情，但它仍然是那些立即引起注意的事情之一。 這是使網站的細節更加突出的好工具。

它可以用來設置焦點，或者只是用熒光性質的明亮魅力來為事情增添一點情趣。 它與排版、按鈕甚至背景完美搭配。

是的，它有一個很大的缺點——它只有在黑暗的環境中才能展現出它的美麗和潛力。 因此，如果您使用的是較輕的 UI，那麼它不是最佳選擇。 但是，如果您有一些黑暗的設計，那麼霓虹燈效果可以成為給您的訪客留下深刻印象的完美工具。