20 مشاريع عيد الميلاد رهيبة المخفية في CodePen

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

في هذا المنصب سوف نلقي نظرة خاطفة على 20 تجارب عيد الميلاد رهيبة على CodePen, التي يمكنك استخدامها للإلهام لإنشاء التصميمات الخاصة بك.

1. الأسرة عيد الميلاد كتاب الأغاني

يمكن لهذا التطبيق Family Christmas Songbook الجميل تشغيل أغاني عيد الميلاد المفضلة لديك على SoundCloud. تتم كتابة قواعد الأنماط بلغة ورقة أنماط LESS ، ويتم توفير وظائف مشغل الموسيقى بواسطة مكون إضافي مسج مخصص.

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

2. شجرة عيد الميلاد الرقمية

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

3. عيد الميلاد الرسوم المتحركة مع تساقط الثلوج

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

4. سانتا على المدى!

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

5. سر اسم سانتا المنتقى

كان اختيار اسم من القبعة وسيلة شائعة في المدارس والمكاتب لاختيار Secret Santas - هذا القلم هو مجرد نسخة رقمية من هذا التقليد. نظرًا لأنه يستخدم JavaScript vanilla فقط ، يمكنك تضمينه بسهولة في موقعك. مجرد تغيير الأسماء داخل متغير إعطاء.

6. كرات عيد الميلاد في المغلق النقي

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

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

7. الثلج المنقول

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

تم بناء الثلج في CSS3 ، وتستخدم الخلفية تدرجات - لا توجد صور في هذا القلم على الإطلاق.

8. عطلة تجربة الأكورديون

هذا الأكورديون عطلة جميلة ببساطة. إذا كنت تحوم فوق علامة تبويب ، فسيتم التركيز من خلال توسيع بعض الشيء ، وإذا نقرت عليه فجأة ستظهر وتغطي الصفحة بأكملها. من المثير للاهتمام أن نلاحظ أن هذا القلم يستخدم Scalable Vector Graphics (SVG) المصمم باستخدام CSS.

تعد SVGs أقوى مما تبدو عليه للوهلة الأولى ، ويمكن وضعها في موقع بذكاء وتصميمها بنفس قواعد الأنماط التي نستخدمها مع عناصر HTML العادية.

9. شقة نقية ثلج المغلق

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

10. CSS3 ندفة الثلج

يمكنك تسهيل إنشاء صور CSS3 فقط باستخدام أدوات تطوير الواجهة الأمامية المتقدمة ؛ هذا ندفة الثلج CSS3 مصممة تصميما جيدا هو مثال ممتاز على ذلك. استخدم المطور لغة Jade templating التي تتحول إلى HTML ، ومعالج Sass CSS الأولي لتنفيذ هذا التصميم المذهل للثلج..

11. زر عيد الميلاد

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

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

12. المنظر عطلة سعيدة

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

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

13. CSS عيد الميلاد ورق التغليف

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

يمكنك العثور على المزيد من الأمثلة الرائعة وشرح مفصل على موقع الويب الخاص بالمطور.

14. مربع داخل مربع

هذا التصميم الخيالي مستوحى من الدمى الروسية التقليدية (دمية داخل دمية). إذا قمت بفتح المربع الخارجي من خلال النقر فوقه ، فإنه يكشف عن مربع داخلي وهو أيضًا المربع الخارجي لمربع داخلي آخر. تتم كتابة الوظيفة في jQuery ، ويتم تعيين الأماكن الدقيقة للمربعات بمساعدة قواعد الموضع المطلقة والنسبية في ملف CSS.

15. هدية مربع مع تأثير ورقة قشر

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

16. عطلة الروح المتحركة قماش

يمكن أن يكون عيد الميلاد وقتًا رائعًا لتجربة أشياء جديدة ، تمامًا كما فعل المطور في هذا القلم باستخدام قماش HTML5 كخلفية متحركة. تأتي اللوحة القماشية قبل المحتوى (Happy Holidays!) في ملف HTML ، ويتم تعيينها كخلفية بمساعدة وضع CSS الذكي.

يستخدم القلم أيضًا نصًا متحركًا للخلفية مضمنًا كملف JavaScript منفصل.

17. بطاقة هدية UI

بطاقة الهدايا الجذابة هذه ليست فقط لعيد الميلاد ، ولكن يمكن استخدامها في أي وقت عندما تريد مفاجأة المستخدمين الخاص بك مع هدية على موقع الويب الخاص بك. لا يعتمد على JavaScript لأنه مكتوب بالكامل بلغة ورقة أنماط Sass.

يستخدم التصميم خاصية CSS3 ذات القصاصة التي تسمح للمطورين بعرض منطقة معينة فقط من عنصر ما ، بدلاً من إظهار مساحتها بالكامل.

18. نقي CSS عيد ميلاد سعيد بطاقة

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

تحتاج إلى إضافة اسم keyframe كقيمة أولى لخاصية الرسوم المتحركة ، تمامًا مثلما فعل المطور مع الإطارات المفتاحية المخصصة المسماة bodyLaugh و beardLaugh و headLaugh و mouthLaugh التي تم إنشاؤها خصيصًا لهذا القلم.

19. عيد الميلاد المفرقع

إذا كنت تحوم فوق Xmas Cracker المثير للإعجاب ، فإنها تكشف عن رسالة فريدة من نوعها لعيد الميلاد وهي طريقة مدهشة تتمنى لزوار عيد ميلاد سعيد. يتم كتابة HTML بلغة HAML ، لغة تمييز تجريد HTML ، في حين أن قواعد النمط تستفيد من قوة لغة Sass Syntactically Awesome Styesheets.

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

20. وميض أضواء عيد الميلاد

يمكن لأضواء عيد الميلاد الوامضة هذه أن تمنح جوًا فريدًا لأي موقع ويب. تتم كتابة رمز الواجهة الأمامية في HAML الذي يترجم إلى HTML ، و Sass الذي يترجم إلى CSS ، و jQuery.

يتحقق تأثير التوهج المتحرك بواسطة قاعدة @ إطارات مفتاحية المذكورة أعلاه والتي يوفرها CSS3. يتم تعيين ألوان المصابيح في ملف jQuery عن طريق إضافة 50 درجة إلى قيمة Hue الخاصة بالقيادة السابقة باستخدام مقياس ألوان HSL.