12 تأثير ريترو نيون مذهل في تصميم الويب

تطورت علامة النيون من أنبوب جيسلر ، وكانت سمة مميزة لأمريكا من عشرينيات القرن الماضي إلى الستينيات. لقد تميزت بعدة عقود وخلقت حقبة مميزة خاصة بها - حقبة من الليالي المشرقة والملونة مع لافتات النيون السرادق في كل زاوية.

بلا شك ، فإن علامة النيون هي شيء من الماضي. إنه مرادف للأسلوب القديم. لكنها ليست مملة مثل الأشياء القديمة من الأيام الخوالي. لها نكهة. لديها أجواء. طبيعتها الملونة وشخصيتها المشرقة تبقيها على قيد الحياة.

وعلى الرغم من أن ميل استخدام لافتات النيون يتلاشى في الحياة الواقعية ، مما يفسح المجال لحلول "خضراء" أكثر تطوراً وأنيقة ، لا تزال هناك أماكن لرؤيتها في مساحات الإنترنت. هذا هو المكان الذي يمكن أن يلعب فيه الكاريزما الخاصة به. وبالنظر إلى حقيقة أن موجة من الحنين قد اجتاحت العالم ، يمكن أن تصبح علامة النيون مرشحًا مثاليًا لإنشاء تصميمات تلبي الاتجاه السائد اليوم.

هناك عدة طرق لإضفاء لمسة فلورية قديمة على واجهتك. أكثرها وضوحًا وأسهلها هو استخدامها كخيار أسلوبي لعرض لوحات الأسماء أو الشعارات أو مجرد التفاصيل المستندة إلى النص لموقع الويب. اليوم ، سوف نعرض لك بعض مقتطفات التعليمات البرمجية الممتازة التي تجلب هذا التأثير إلى الحياة.

علامة النيون الساخنة التي كتبها آرون مينامون

يتمتع مشروع آرون مينامون بإحساس مميز بالنمط الحضري الأمريكي في الخمسينيات. إنها مشرقة وجريئة وجريئة. يبدو أصيلًا ، بفضل السلوك المستنسخ بمهارة لإشارات النيون المشهورة بالوميض المستمر. تم إحياء هذه الرسوم المتحركة الصغيرة والمثيرة للإعجاب بمساعدة HTML و SCSS و JavaScript.

نيون متحرك CSS بواسطة Nodws / Neon من لاس فيغاس بقلم ريكاردو تارتاجليا

اتخذ كل من Nodws ، بمشروعه الرائع المخصص Dribble ، و Riccardo Tartaglia ، مع نيون المتميز من لاس فيجاس ، طريقًا تقليديًا. لقد توصلوا إلى مفاهيم تقلد تمامًا لافتات الشوارع النيون التقليدية.

تبدو العروض متشابهة. تحتوي كل واحدة على لافتات نيون موضوعة على جدار من الطوب. كلاهما غني بديناميكيات صغيرة لجعل المشهد يبدو حيًا ؛ ولكل منها مظهر مشرق. تمكن الفنانون من الحصول على عدة أسطر فقط من كود HTML و CSS ، مما جعل الحلول ليس فقط ممتعة للعين - ولكن أيضًا خفيفة الوزن.

خمر نيون تسجيل بواسطة كايل لافيري

إذا كنت بحاجة إلى إحساس عتيق لا لبس فيه على موقع الويب الخاص بك ، فيجب عليك تجربة Vintage Neon Sign by Kyle Lavery. ينضح الستينيات على جميع الجبهات. تبدو الطباعة المخططة ، المليئة بالتلوين النيون والمدعومة بخلفية جميلة على شكل أنبوب ، رائعة. على الرغم من أن الحروف ليست مكتوبة بنوع زخرفي ، إلا أنها ستضيف بلا شك إحساسًا رائعًا إلى أي مشروع.

مشروع بريما أوتاما Apriansyah

يتميز مشروع Prima Utama Apriansyah بتأثير النيون الذي يتم الكشف عنه عند التحويم. هناك ثلاثة خيارات للألوان: الأحمر والأزرق والأصفر. كل واحد يبدو رائعا. كل شيء مصنوع باستخدام HTML و CSS خالص - لا يلزم استخدام JavaScript. ميزة هذا الحل هو أن تأثير النيون مخفي ويثير إعجاب الزائرين عند الكشف عنه.

لوادر نيون الشبكية من تصميم مي العويني

حسنًا ، هذا يكفي لتأثيرات النص. دعونا نفكر في بعض الطرق الأخرى لإضافة بعض سحر الفلورسنت إلى الواجهة. أحد البدائل هو تطبيق نمط النيون لتحميل الرسوم المتحركة ، كما فعلت مي العويني مع Neon Grid Loaders.

ستجد هنا أربعة لوادر مختلفة مرتبطة بموضوع واحد ولون. على الرغم من أنها بدائية ، إلا أن تأثير النيون يقودهم بالتأكيد إلى المستوى التالي. على خلفية مظلمة ، تبدو رائعة ببساطة. سوف يستمتعون بالزوار أثناء انتظارهم لموقع الويب الخاص بك لإنهاء جميع استعداداته.

زر بواسطة زر Simone / Neon بواسطة Elwin van den Hazel

يمكن أن تستفيد تفاصيل الواجهة الأخرى أيضًا من أسلوب النيون. على سبيل المثال ، ضع في اعتبارك الأزرار. نظرًا لأن عبارات "الأشباح" التي تحث المستخدم على اتخاذ إجراء لا تزال شائعة ، فإن تأثير النيون لا يمكن أن يكون أكثر ملاءمة.

هناك نوعان من مقتطفات الشفرة الممتازة التي يمكنك تجربتها: أحدهما من إعداد Simone والآخر بواسطة Elwin van den Hazel. كلاهما يشتمل على زر نيون بسيط وأنيق ودقيق. في حين أن الأولى قاتمة بعض الشيء بسبب التلوين الباهت ، فإن الثانية بالتأكيد تلفت الأنظار على الفور بنغمتها الزرقاء النابضة بالحياة وتأثيرها المتوهج. كل شيء مصنوع باستخدام HTML و CSS خالص.

مربعات حوار النيون بواسطة Hugo DarbyBrown

يمكنك تطبيق نمط النيون على مربعات الحوار أيضًا. ما عليك سوى إلقاء نظرة على مربعات حوار النيون بواسطة Hugo DarbyBrown. قام المؤلف بتضمين أربع لوحات حوار تقليدية. تبدو جريئة وجذابة ، لكن بدون صراخ من كل الجبهات. أعطى تأثير النيون عناصر واجهة المستخدم العادية لمسة لطيفة.

نيون هيكساجريد بواسطة ماتي كوبوت / نيون سداسي الجسيمات - استجمام بريت / لفترة من الوقت بقلم جيرارد فيرانديز

بينما نعتبر أنماط النيون تأثيرًا يمكن تطبيقه على التفاصيل المستقلة لموقع الويب (مثل الأزرار أو الطباعة أو أداة التحميل) ، فإنه يمكن بسهولة إنشاء خلفية قاتلة أيضًا. ضع في اعتبارك سداسية النيون بواسطة ماتي كوبوت ، وجسيمات نيون سداسية الشكل - استجمام لبريت ولفترة من الوقت بواسطة جيرارد فيرانديز.

يقدم Matei Copot للزوار عبر الإنترنت خلفية رائعة على شكل قرص العسل مستوحاة من النيون حيث تتمتع كل خلية بعمر افتراضي خاص بها. يتغير اللون من الأرجواني إلى الفيروزي ويبدو ملهمًا.

يحمل مفهوم بريت ملاحظة غامضة. يعتمد أيضًا على شكل سداسي ، ولكن هذه المرة يمكنك أيضًا مشاهدة رسم متحرك. يظهر النموذج في الوسط وينمو إلى الجوانب. هناك لوحة تحكم حيث يمكنك اللعب بالإعدادات.

على عكس المثالين السابقين ، يتميز مشروع Gerard Ferrandez بتصميم عصري على طراز النيون. ستجد هنا آلاف الجسيمات الصغيرة التي تشكل مستطيلاً. استخدم مؤشر الفأرة لتعكير صفو السطح المستوي ورفع موجة تتميز بنبرة ذهبية تشبه النيون.

أمثلة متوهجة

في حين أن تأثير النيون لا يفعل شيئًا غير عادي ، إلا أنه لا يزال أحد تلك الأشياء التي تلفت الأنظار على الفور. إنها أداة رائعة لجعل تفاصيل موقع الويب أكثر بروزًا.

يمكن استخدامه لتعيين النقاط المحورية أو فقط لتوابل الأشياء قليلاً مع الكاريزما الساطعة لطبيعة الفلورسنت. إنه يتناسب تمامًا مع الطباعة والأزرار وحتى الخلفيات.

نعم ، لها عيب كبير - إنها تكشف جمالها وإمكانياتها فقط في بيئة مظلمة. لذا ، إذا كنت تستخدم واجهة مستخدم أخف وزناً ، فهذا ليس الخيار الأفضل. ولكن إذا كان لديك بعض التصميمات المظلمة في الاعتبار ، فيمكن أن يصبح تأثير النيون أداة مثالية لإبهار زوارك.