Web デザインにおける 12 の見事なレトロ ネオン効果

ガイスラー管から進化したネオンサインは、1920 年代から 60 年代にかけてのアメリカの特徴でした。 それは数十年をマークし、独自の明確な時代を作成しました - 隅々にネオンのマーキーサインがある明るくカラフルな夜の時代.

間違いなく、ネオンサインは過去のものです。 レトロなスタイルの代名詞です。 しかし、古き良き時代の古いものほど退屈ではありません。 熱意があります。 雰囲気があります。 そのカラフルな性質と明るい性格が生き続けています。

ネオンサインを使用する傾向は現実には消えつつあり、より洗練されたエレガントな「環境に優しい」ソリューションに取って代わられていますが、オンラインの広がりにはまだそれを見る場所があります. これは、そのカリスマ性を発揮できる場所です。 懐かしさの波が世界を席巻したという事実を考えると、ネオンサインは、今日の主流を満たすデザインを作成するための理想的な候補になる可能性があります.

インターフェイスにレトロな蛍光タッチを導入するには、いくつかの方法があります。 最も明白で簡単な方法は、銘板、キャッチフレーズ、またはウェブサイトのテキストベースの詳細を表示するためのスタイルの選択として使用することです. 今日は、この効果を実現する優れたコード スニペットをいくつか紹介します。

Aaron Minnamon による Hot Ones ネオンサイン

アーロン ミナモンのプロジェクトには、50 年代のアメリカン アーバン スタイルの独特な感覚があります。 明るく大胆で大胆です。 絶え間なく点滅することで有名なネオンサインの動作を巧みに再現したおかげで、本物そっくりに見えます。 この小さくても印象的なアニメーションは、HTML、SCSS、および JavaScript の助けを借りて実現されました。

CSS アニメーション化された Neon Sign (Nodws 作) / Neon from Las Vegas (Riccardo Tartaglia 作)

素晴らしいドリブル専用プロジェクトを持つ Nodws と、ラスベガス出身の傑出した Neon を持つ Riccardo Tartaglia は、どちらも伝統的なルートをたどっています。 彼らは、従来のネオン道路標識を完全に模倣するコンセプトを考え出しました。

デモは似ています。 それぞれに、レンガの壁にネオンサインが配置されています。 どちらも、シーンを生き生きと見せるために、小さなダイナミクスで強化されています。 そしてそれぞれが明るい表情をしています。 アーティストは、数行の HTML コードと CSS を使用するだけでなんとかやり遂げ、ソリューションを見た目が美しいだけでなく、軽量にしました。

Kyle Laveryによるヴィンテージネオンサイン

ウェブサイトに紛れもないヴィンテージ感が必要な場合は、Kyle Lavery の Vintage Neon Sign をお試しください。 あらゆる面で60年代を醸し出しています。 アウトライン化されたタイポグラフィ、ネオン カラーでスパイスを効かせ、美しいチューブ スタイルの背景に支えられて、幻想的に見えます。 レタリングは装飾的なタイプではありませんが、どんなプロジェクトにも間違いなくファンシーな雰囲気を加えます.

プリマ・ウタマ・アプリアンシャーによるプロジェクト

Prima Utama Apriansyah によるプロジェクトは、ホバー時に表示されるネオン効果を特徴としています。 赤、青、黄の 3 色のオプションがあります。 どれも素晴らしく見えます。 すべてが純粋な HTML と CSS で作成されており、JavaScript は必要ありません。 このソリューションの利点は、ネオン効果が隠され、表示されたときに訪問者を感動させることです。

Mai El-Awini による Neon Grid Loaders

テキスト効果はこれで十分です。 インターフェイスに蛍光マジックを追加する他の方法を考えてみましょう。 代替案の 1 つは、Mai El-Awini が Neon Grid Loaders で行ったように、ロード アニメーションにネオン スタイルを適用することです。

ここには、1 つのテーマとカラーリングに関連付けられた 4 つの異なるローダーがあります。 それらは原始的ですが、ネオン効果は確かにそれらを次のレベルに引き上げます. 暗い背景に対して、それらは単に素晴らしく見えます。 あなたのウェブサイトがすべての準備を完了するのを待っている間、訪問者を楽しませてくれます。

ボタン by Simone / ネオン ボタン by Elwin van den Hazel

他のインターフェイスの詳細も、ネオン スタイルの恩恵を受けることができます。 たとえば、ボタンを考えてみましょう。 「幽霊」の行動喚起は依然として人気があるため、ネオン効果はこれ以上に適していません。

試してみるべき 2 つの優れたコード スニペットがあります。1 つは Simone によって作成され、もう 1 つは Elwin van den Hazel によって作成されました。 両方とも、シンプルでありながらエレガントで控えめなネオンボタンが含まれています. 最初のものは色が落ち着いているために少し暗いですが、2番目のものは鮮やかな青い色調と光る効果ですぐに目を引きます. すべてが純粋な HTML と CSS で作られています。

Hugo DarbyBrownによるネオンダイアログボックス

ダイアログ ボックスにもネオン スタイルを適用できます。 Hugo DarbyBrown による Neon Dialog Boxes をご覧ください。 著者は、4 つの従来のダイアログ パネルを含めました。 彼らは大胆で魅力的に見えますが、すべての面で悲鳴を上げることはありません. ネオン効果は、平凡な UI 要素に素敵なひねりを加えています。

ネオン ヘキサグリッド by マテイ コポット / ネオン ヘックス パーティクル – ブレットによるレクリエーション / ジェラルド フェランデスによるしばらくの間

ネオン スタイルは、Web サイトのスタンドアロンの詳細 (ボタン、タイポグラフィ、ローダーなど) に適用できる効果と見なされますが、キラーな背景も簡単に作成できます。 Matei Copot によるネオン ヘキサグリッド、Brett による Neon Hex Particles – Recreation、そしてしばらくの間 Gerard Ferrandez によるものを考えてみましょう。

Matei Copot は、オンラインの訪問者に、ネオンにインスパイアされた素晴らしいハニカム スタイルの背景を提供します。各セルには独自の寿命があります。 カラーリングはパープルからターコイズに変化し、刺激的に見えます。

Brett のコンセプトには謎が含まれています。 これも六角形をベースにしていますが、今回は明らかにアニメーションも見られます。 パターンは中央に表示され、側面に向かって成長します。 設定で遊べるコントロールパネルがあります。

前の 2 つの例とは異なり、Gerard Ferrandez によるプロジェクトは、ネオン スタイルを現代的に取り入れたものです。 ここには、長方形を形成する何千もの小さな粒子があります。 マウス カーソルを使用して平面を乱し、金色のネオンのようなトーンでマークされた波を上げます。

熱烈な例

ネオン効果は何も珍しいことではありませんが、それでもすぐに目を引くものの 1 つです。 ウェブサイトの詳細をより際立たせるための優れたツールです。

焦点を設定したり、蛍光性の明るいカリスマ性で物事を少し盛り上げたりするために使用できます。 タイポグラフィ、ボタン、さらには背景との相性も抜群です。

はい、大きな欠点が 1 つあります。暗い環境でのみ、その美しさと可能性が明らかになります。 そのため、軽い UI を使用している場合は、最適な選択ではありません。 しかし、暗いデザインを念頭に置いている場合、ネオン効果は訪問者を感動させる完璧な手段になる可能性があります.