स्क्रीन की चौड़ाई/ऊंचाई (केवल सीएसएस)

टेमानी अफ़िफ़ आमतौर पर सीएसएस डेमो के साथ इस सूची में दिखाई देता है। इस बार, किसी प्रभावशाली चीज़ के कारण: कस्टम गुणों को एट-प्रॉपर्टी और त्रिकोणमितीय कार्यों के साथ जोड़कर, वह स्क्रीन की ऊंचाई और चौड़ाई प्रदर्शित कर सकता है... कोई जावास्क्रिप्ट नहीं!

वेबजीएल इंटरएक्टिव ब्लॉब्स

इन सुंदर बूँदों पर माउस ले जाएँ और उन्हें प्रतिक्रिया करते और हिलते हुए देखें (उनसे भी अधिक जो वे पहले से कर रहे हैं)। यह केन्सिया कोंड्राशोवा द्वारा वेबजीएल के साथ एक मजेदार डेमो है जिसका उपयोग किसी वेबसाइट पर एक इंटरैक्टिव (और ध्यान भटकाने वाली) पृष्ठभूमि के रूप में किया जा सकता है।

मूवी कोटेशन हैक

यदि आपको मूवी उद्धरण और तेज़ गति वाले हैंग-मैन गेम पसंद हैं, तो अलेक्जेंड्रे वैकासिन का यह डेमो आपके लिए है: अक्षरों पर क्लिक करके मूवी उद्धरण का अनुमान लगाएं (कोई कीबोर्ड विकल्प नहीं, अफ़िक)। लेकिन सावधान रहें: आपके पास कार्य पूरा करने के लिए एक मिनट का समय होगा, और प्रत्येक असफल प्रयास में 5 सेकंड कम हो जायेंगे।

अंगूठी भूलभुलैया

एक और गेम, इस बार ZIM द्वारा। थ्रीजेएस के साथ बनाई गई यह त्रि-आयामी भूलभुलैया एक अंगूठी के आकार की है। कोडपेन चुनौती के लिए कोडित इस मनोरंजक डेमो में, गेंद भूलभुलैया के चारों ओर माउस का पीछा करेगी (यह कई बार चुनौतीपूर्ण हो सकता है)।

नेविगेशन होवर प्रभाव

वेरोनिका हिस्टोवा ने इस इंटरैक्टिव नेविगेशन को कोड किया। यह डेटा विशेषता में निर्दिष्ट पाठ को डुप्लिकेट करने और होवर पर एक रंगीन 3D प्रभाव उत्पन्न करने के लिए ::before और ::after छद्म तत्वों का उपयोग करता है। सरल और बढ़िया।

थ्री.जेएस ब्लॉबी एप्पल

यह केन्सिया कोंड्राशोवा का एक और डेमो है। इस सेब के चारों ओर घूमें जो घूमते समय तरल रूप से घूमता है, अपना आकार खोता है और एक नया आकार प्राप्त करता है - थ्रीजेएस के साथ एक अच्छा प्रयोग।

बिल स्प्लिटर ऐप

ड्रिबल (कोडपेन विवरण में जुड़ा हुआ) पर पाए गए डिज़ाइन से प्रेरित होकर, डिलम संजय ने रिएक्ट और टेलविंड का उपयोग करके इस बिल स्प्लिटर का एक लाइव संस्करण कोड किया। यह साफ-सुथरा दिखता है।

गौरैया

हाल ही में इस श्रृंखला में सीएसएस कला बहुत कम रही है, और एलिना द्वारा बनाई गई यह खूबसूरत गौरैया ड्राइंग एक उल्लेखनीय वापसी है। बेहांस के एक चित्र (कोड में लिंक) के आधार पर, कोड की सरलता चित्र की सफ़ाई के विपरीत है। अद्भुत कार्य।

आईके लैगून से प्राणी

माउस को स्क्रीन के चारों ओर ले जाएं और देखें कि यह प्राणी/ब्लॉब इसका अनुसरण कैसे करता है। प्रारंभ में शीर्ष से जुड़ा हुआ, यह कीड़ा (? जोंक? प्राणी!) जैसे-जैसे आगे बढ़ेगा, अलग हो जाएगा और बढ़ता जाएगा। लियाम एगन ने यह डेमो विकसित किया।

3डी जेंगा - सीएसएस

जोसेटक्सू द्वारा प्रोग्राम किया गया एक 3डी सीएसएस गेम। जबकि जेंगा पूरी तरह से बजाने योग्य नहीं है, आप बीच के टुकड़ों पर क्लिक कर सकते हैं, जो चेतन और गतिमान होंगे (फिर आप उन्हें "रिवर्स जेंगा" में वापस अंदर धकेल सकते हैं)।

यदि आपको ये डेमो पसंद हैं, तो जून 2024 से 10 कूल कोडपेन डेमो वाला पिछला लेख देखें!