CodePen में छिपे हुए 20 विस्मयकारी क्रिसमस प्रोजेक्ट्स

CodePen प्रतिभाशाली फ्रंट-एंड डेवलपर्स के लिए एक ऑनलाइन खेल का मैदान है, एक जगह जहां आप हमेशा अपने क्षितिज को चौड़ा करने के लिए शांत परियोजनाएं पा सकते हैं, और देख सकते हैं कि अन्य डेवलपर्स क्या हैं। साल के अंत की छुट्टियां आपके प्रियजनों को रचनात्मक व्यक्तिगत परियोजनाओं के साथ आश्चर्यचकित करने के लिए, या अपने ग्राहकों को कुछ शांत, अत्याधुनिक डिजाइनों के साथ धन्यवाद कहने के लिए एक बढ़िया समय है, जो छुट्टी के जयकारों में मदद करेंगे।.

इस पोस्ट में हम एक नज़र डालेंगे कोडपेन पर 20 भयानक क्रिसमस प्रयोग, आप अपने खुद के डिजाइन बनाने के लिए प्रेरणा के लिए उपयोग कर सकते हैं.

1. फैमिली क्रिसमस सॉन्गबुक

यह प्यारा फैमिली क्रिसमस सॉन्गबुक ऐप साउंडक्लाउड पर होस्ट किए गए आपके पसंदीदा क्रिसमस गाने खेल सकता है। स्टाइल नियम LESS स्टाइलशीट भाषा में लिखे गए हैं, और संगीत प्लेयर कार्यक्षमता कस्टम jQuery प्लगइन द्वारा प्रदान की गई है.

बैकग्राउंड में स्नोफ्लेक और क्रिसमस ट्री आइकन डिजाइन को एक अच्छा माहौल देते हैं, और यदि आप पेन पर मंडराते हैं तो आप कुछ सूक्ष्म सीएसएस प्रभाव भी पा सकते हैं.

2. डिजिटल क्रिसमस ट्री

क्रिसमस के लिए डिजाइन करना हमेशा एक आभारी काम है, क्योंकि इसके विशिष्ट दृश्य तत्व कई रचनात्मक तरीकों से बनाए जा सकते हैं। यह कलम इसके लिए एक अच्छा उदाहरण है। सबसे पहले आप केवल रंगीन त्रिकोण देख सकते हैं, प्रतीत होता है कि छुट्टियों के लिए असंबंधित हैं, लेकिन जब आप रिवील बटन पर क्लिक करते हैं, तो वे एक साथ एक क्रिसमस ट्री में सेट होते हैं। यह न केवल एक अनूठा समाधान है, बल्कि एक सरल खेल की याद भी दिलाता है.

3. बर्फबारी के साथ क्रिसमस एनीमेशन

यदि आप क्रिसमस के लिए एक शांत एनीमेशन बनाना चाहते हैं, तो आपको जावास्क्रिप्ट का उपयोग करने की आवश्यकता नहीं है। इस पेन में, बर्फबारी एनीमेशन और पृष्ठभूमि छवियों दोनों को विशुद्ध रूप से CSS में बनाया गया है। यह कोड को थोड़ा जांचने के लायक है, क्योंकि यह CSS3 की अविश्वसनीय क्षमताओं को दर्शाता है। पृष्ठभूमि की छवि को वास्तविक एसवीजी ग्राफिक के लिए भी गलत किया जा सकता है.

4. सांता रन पर!

सांता रन पर! छुट्टियों के लिए phaser.js HTML5 खेल ढांचे का उपयोग कर एक मजेदार जावास्क्रिप्ट खेल है। इस खेल में बहुत सारे नियम नहीं हैं: सांता असीम रूप से चलता है, या कम से कम जब तक वह नीचे गिरता नहीं है। यह पेन आपको यह समझने का एक शानदार अवसर देता है कि जावास्क्रिप्ट में एक सरल खेल कैसे लिखा जाए.

5. सीक्रेट सांता नेम पिकर

गुप्त संतों को लेने के लिए स्कूलों और कार्यालयों में टोपी से नाम रखना एक लोकप्रिय तरीका रहा है - यह कलम इस परंपरा का एक डिजिटल संस्करण है। चूंकि यह केवल वेनिला जावास्क्रिप्ट का उपयोग करता है, आप इसे आसानी से अपनी साइट में एम्बेड कर सकते हैं। बस वेरिएबल के अंदर नाम बदलें.

6. शुद्ध सीएसएस में क्रिसमस बॉल्स

ये हंसमुख क्रिसमस बॉल्स शुद्ध सीएसएस में लिखे गए हैं जो सीमा-त्रिज्या नियमों का लाभ उठाते हैं। गेंदों की अलग-अलग हिस्सों को एक साथ गणना की जाती है जो ठीक से गणना की गई सापेक्ष स्थिति का उपयोग करते हैं.

यदि आप जल्दी से एक वेब पेज पर छुट्टी का माहौल जोड़ना चाहते हैं, तो इनमें से कुछ गेंदों को एक रंग में उपयुक्त स्थानों पर डालें जो साइट के समग्र डिजाइन से मेल खाते हों.

7. जंगम स्नोफ्लेक्स

आप इन स्नोफ्लेक को एक डेस्कटॉप पर, या अपने स्मार्टफोन को झुकाकर उन पर घूम सकते हैं। कार्यक्षमता ऑब्जेक्ट-ओरिएंटेड जावास्क्रिप्ट द्वारा प्रदान की जाती है जो कि डेवलपर द्वारा कस्टम स्नोफ्लेक क्लास बनाने के लिए चालाकी से उपयोग किया जाता है.

स्नोफ्लेक्स स्वयं CSS3 में निर्मित हैं, और पृष्ठभूमि ग्रेडिएंट का उपयोग करती है - इस पेन में कोई भी चित्र नहीं हैं.

8. हॉलिडे अकॉर्डियन प्रयोग

यह हॉलिडे कन्फेशन बस खूबसूरत है। यदि आप एक टैब पर होवर करते हैं तो यह थोड़ा विस्तार करके फ़ोकस करने के लिए आता है, और यदि आप इस पर क्लिक करते हैं तो यह अचानक पॉप अप हो जाता है और पूरे पृष्ठ को कवर करता है। यह ध्यान रखना दिलचस्प है कि यह पेन स्केलेबल वेक्टर ग्राफिक्स (SVG) का उपयोग करता है जो CSS के साथ स्टाइल किया गया है.

SVG पहली नज़र में लगने की तुलना में अधिक शक्तिशाली हैं, उन्हें स्मार्ट तरीके से उसी तरह से नियोजित और डिज़ाइन किया जा सकता है जिसे हम नियमित HTML तत्वों के साथ उपयोग करते हैं.

9. फ्लैट शुद्ध सीएसएस स्नोमैन

किसने कहा कि फ्लैट डिजाइन उबाऊ होना चाहिए? यह प्यारा स्नोमैन आसानी से क्रिसमस की भावना को किसी भी डिजाइन में जोड़ सकता है। स्नोमैन के लिए उपयोग की गई कोई भी छवि नहीं है, यह पूरी तरह से सीएसएस में लिखा गया है। यह सीएसएस कोड पर एक नज़र डालने के लिए लायक है, और देखें कि डेवलपर कैसे उपयोग करता है: पहले और बाद में छद्म चयनकर्ताओं को इच्छित परिणाम प्राप्त करने के लिए।.

10. CSS3 स्नोफ्लेक

आप उन्नत फ्रंट-एंड डेवलपमेंट टूल्स का उपयोग करके CSS3- केवल छवियों के निर्माण की सुविधा प्रदान कर सकते हैं; यह अच्छी तरह से डिज़ाइन किया गया CSS3 स्नोफ्लेक इसके लिए एक उत्कृष्ट उदाहरण है। डेवलपर ने HTML में संकलित जेड टेम्प्लेटिंग भाषा का उपयोग किया, और इस तेजस्वी बर्फ़ के डिजाइन को लागू करने के लिए Sass CSS प्रीप्रोसेसर।.

11. क्रिसमस बटन

स्मार्ट डिजाइन अक्सर सूक्ष्म समाधानों के लिए चुनते हैं, ठीक इसी कलम में बर्फीले क्रिसमस बटन की तरह। गहरे लाल रंग की पृष्ठभूमि क्रिसमस के डिजाइन के लिए एक आदर्श विकल्प है; सब कुछ हरे होने की जरूरत नहीं है.

रंग, ग्रेडिएंट्स, टाइपफेस और हॉवर इफेक्ट इस बटन को बहुत ही सुरुचिपूर्ण और पवित्र बनाते हैं। आपको उनमें से केवल कुछ की जरूरत है कि वे क्राइस्टमास्टाइम की साइट को जल्दी से सजा सकें.

12. लंबन हैप्पी हॉलिडे

यदि आपको लंबन स्क्रॉलिंग पसंद है, तो आप इसे अपने अवकाश डिजाइनों के लिए उपयोग क्यों नहीं करेंगे? इस पेन के डेवलपर ने स्मार्ट तरीके से प्रयोग किया, और कम सामान्य तरीके से Parallax.js jQuery प्लगइन का उपयोग किया, स्क्रॉलिंग प्रभाव हमेशा की तरह ऊर्ध्वाधर नहीं है, बल्कि क्षैतिज है। क्रिसमस का माहौल एक प्रभावशाली बर्फबारी से तेज होता है

अगर मुझे इस कलम के किसी भी दोष को चुनना था, तो यह रंग का विकल्प होगा: आंशिक रूप से सफेद पृष्ठभूमि पर सफेद अक्षर डिजाइन की पहुंच को काफी कमजोर करते हैं.

13. सीएसएस क्रिसमस रैपिंग पेपर

आप CSS3 की मदद से पूरी तरह से अनोखा क्रिसमस रैपिंग पेपर बना सकते हैं। इस पेन का डेवलपर न केवल एक, बल्कि इसके छह वेरिएंट दिखाता है। सुंदर पैटर्न सीएसएस ग्रेडिएंट्स के स्मार्ट उपयोग और पृष्ठभूमि-मिश्रण-मोड संपत्ति द्वारा प्राप्त किए जाते हैं.

आप और भी बेहतरीन उदाहरण पा सकते हैं और डेवलपर की अपनी वेबसाइट पर विस्तृत विवरण दे सकते हैं.

14. बॉक्स एक बॉक्स के भीतर

यह कल्पनाशील डिजाइन पारंपरिक रूसी गुड़िया (एक गुड़िया के अंदर एक गुड़िया) से प्रेरित था। यदि आप उस पर क्लिक करके बाहरी बॉक्स को खोलते हैं, तो यह एक आंतरिक बॉक्स को प्रकट करता है, जो दूसरे आंतरिक बॉक्स का बाहरी बॉक्स भी है। कार्यक्षमता jQuery में लिखी गई है, और बॉक्स के सटीक स्थानों को CSS फ़ाइल में पूर्ण और सापेक्ष स्थिति नियमों की सहायता से सेट किया गया है.

15. पेपर पील इफेक्ट वाला गिफ्ट बॉक्स

यदि आप रिबन को इस उपहार से हटाने के लिए प्रबंधन करते हैं, तो आप इसे खींचकर निकाल सकते हैं, तो आप सुपरकोल पेपर छील प्रभाव पर एक नज़र डाल सकते हैं जो उपहार की आंतरिक सामग्री को प्रकट करता है। आप डेवलपर की वेबसाइट पर पूरा ट्यूटोरियल पढ़ सकते हैं, यह एक चाल है जिसे यह निश्चित रूप से सीखने लायक है। यदि आप सिर्फ कोड का उपयोग करना चाहते हैं तो आप इसे GitHub से भी क्लोन कर सकते हैं.

16. हॉलिडे स्पिरिट एनिमेटेड कैनवस

नई चीजों के साथ प्रयोग करने के लिए क्रिसमस एक महान समय हो सकता है, ठीक उसी तरह जैसे कि डेवलपर ने एनिमेटेड पृष्ठभूमि के रूप में HTML5 कैनवास का उपयोग करके इस पेन में किया था। HTML फ़ाइल में सामग्री से पहले कैनवास आता है (हैप्पी छुट्टियाँ!), और इसे स्मार्ट सीएसएस पोजिशनिंग की मदद से पृष्ठभूमि के रूप में सेट किया जाता है।.

पेन एक अलग जावास्क्रिप्ट फ़ाइल के रूप में शामिल एक पृष्ठभूमि एनीमेशन स्क्रिप्ट का उपयोग करता है.

17. गिफ्ट कार्ड यूआई

यह आंख को पकड़ने वाला उपहार कार्ड केवल क्रिसमस के लिए ही नहीं है, बल्कि इसका उपयोग किसी भी समय किया जा सकता है जब आप अपने उपयोगकर्ताओं को अपनी वेबसाइट पर उपहार के साथ आश्चर्यचकित करना चाहते हैं। यह जावास्क्रिप्ट पर निर्भर नहीं है क्योंकि यह पूरी तरह से सैस स्टाइलशीट भाषा में लिखा गया है.

डिज़ाइन क्लिप-पथ CSS3 की संपत्ति का उपयोग करता है जो डेवलपर्स को किसी तत्व के केवल एक विशिष्ट क्षेत्र को प्रदर्शित करने की अनुमति देता है, बजाय इसके पूरे क्षेत्र को दिखाने के.

18. शुद्ध सीएसएस मेरी क्रिसमस कार्ड

यह असीम रूप से हँस सांता - केवल HTML और CSS3 का उपयोग कर - आपको समझने का अवसर दे सकता है कि कीफ्रेम एनीमेशन सिंटैक्स का उपयोग अभ्यास में कैसे किया जा सकता है। CSS3 में आप एनीमेशन के नियमों को निर्दिष्ट करने के लिए @keyframes नियम का उपयोग कर सकते हैं, और फिर आप इस निर्दिष्ट एनीमेशन को एनीमेशन CSS3 की संपत्ति का उपयोग करके एक निश्चित तत्व से बांध सकते हैं.

आपको एनीमेशन संपत्ति के पहले मूल्य के रूप में कीफ्रेम का नाम जोड़ने की आवश्यकता है, ठीक उसी तरह जैसे कि डेवलपर ने कस्टम पेनफ्रेम के साथ किया था जिसे बॉडीलॉफ, दाढ़ी, हंसी, हेडलॉफ और माउथलॉफ विशेष रूप से इस पेन के लिए बनाया गया था।.

19. क्रिसमस क्रैकर

यदि आप इस प्रभावशाली क्रिसमस क्रैकर पर मंडराते हैं, तो यह एक अनोखा क्रिसमस संदेश प्रकट करता है जो आपके आगंतुकों को मेरी क्रिसमस की शुभकामना देने का एक शानदार तरीका है। HTML को HAML, HTML Abstraction Markup Language में लिखा गया है, जबकि शैली के नियम Sass की शक्ति का लाभ उठाते हैं.

परिणाम वास्तव में स्मार्ट और भयानक है। कुछ और जावास्क्रिप्ट जोड़कर इसका उपयोग उपयोगकर्ताओं को कस्टम उद्धरण या संदेश देने के लिए भी किया जा सकता है.

20. चमकती रोशनी

ये चमकती क्रिसमस रोशनी किसी भी वेबसाइट को जल्दी से एक अनूठा माहौल दे सकती है। फ्रंट-एंड कोड HAML में लिखा गया है जो HTML, Sass में संकलित है जो CSS, और jQuery में संकलित है.

एनिमेटेड चमक प्रभाव CSS3 द्वारा प्रदान किए गए aforementioned @keyframes नियम द्वारा प्राप्त किया गया है। लेड्स के रंगों को एचएसएल कलर स्केल का उपयोग करके पिछले लीड के ह्यू वैल्यू में 50 डिग्री जोड़कर jQuery फाइल में सेट किया गया है.