एक अजीब सीएसएस ग्रेडियेंट बग से स्थिर शोर बनाना

👋 इस लेख में डेमो सीएसएस ग्रेडिएंट्स और सब-पिक्सेल रेंडरिंग से संबंधित एक गैर-मानक बग के साथ प्रयोग करता है। उनका व्यवहार भविष्य में कभी भी बदल सकता है। वे बिल्ली के समान भारी भी हैं। हम उन्हें एसिंक्रोनस सर्व कर रहे हैं जहां आप लोड करने के लिए क्लिक करते हैं, लेकिन फिर भी यदि आपका लैपटॉप पंखा घूमना शुरू कर देता है तो हम आपको एक हेड-अप देना चाहते हैं।

क्या आपको पुराने टीवी पर बिना किसी सिग्नल के स्थिर शोर याद है? या जब सिग्नल खराब हो और तस्वीर विकृत हो? यदि टीवी सिग्नल की अवधारणा आपसे पहले की है, तो यहां एक जीआईएफ है जो दिखाता है कि मेरा क्या मतलब है।

देखें छवि (ऑटो-प्लेइंग मीडिया शामिल है)

जी हां, हम केवल CSS का उपयोग करके ऐसा ही कुछ करने जा रहे हैं। यहाँ हम क्या बना रहे हैं:

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

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

चलो कुछ शोर करते हैं!

इस शोर प्रभाव को बनाने के लिए हम ... ग्रेडिएंट्स का उपयोग करने जा रहे हैं! नहीं, ऐसा कोई गुप्त संघटक या नई संपत्ति नहीं है जो ऐसा करती है। हम उन चीजों का उपयोग करने जा रहे हैं जो पहले से ही हमारे CSS टूलबॉक्स में हैं!

"ट्रिक" इस तथ्य पर निर्भर करती है कि ग्रेडियेंट एंटी-अलियासिंग में खराब हैं। आप हार्ड स्टॉप रंगों का उपयोग करते समय हमें मिलने वाले दांतेदार किनारों को जानते हैं? हां, मैं ज्यादातर में उन्हीं की बात करता हूं मेरे लेख क्योंकि वे थोड़े कष्टप्रद होते हैं और चीजों को सुचारू करने के लिए हमें हमेशा कुछ पिक्सेल जोड़ने या निकालने की आवश्यकता होती है:

जैसा कि आप देख सकते हैं, दूसरा सर्कल पहले वाले की तुलना में बेहतर प्रस्तुत करता है क्योंकि इसमें एक छोटा सा अंतर है (0.5%) ग्रेडिएंट में दो रंगों के बीच सीधे-सीधे कठोर रंग का उपयोग करने के बजाय पहले वृत्त की तरह पूर्ण संख्या मानों का उपयोग करना बंद करें।

यहाँ एक और नज़र है, इस बार एक का उपयोग कर conic-gradient जहां परिणाम अधिक स्पष्ट है:

जब मैं ये डेमो बना रहा था तो एक दिलचस्प विचार आया। हर समय विकृति को ठीक करने के बजाय, विपरीत करने की कोशिश क्यों नहीं की जाती? मुझे नहीं पता था कि क्या होगा लेकिन यह एक मजेदार आश्चर्य था! मैंने शांकव ढाल मूल्यों को लिया और खराब एंटी-अलियासिंग परिणामों को और भी बदतर बनाने के लिए उन्हें कम करना शुरू कर दिया।

क्या आप देखते हैं कि आखिरी वाला कितना बुरा है? यह बीच में एक तरह का तला हुआ है और कुछ भी चिकना नहीं है। आइए इसे छोटे मानों के साथ फ़ुल-स्क्रीन बनाएं:

मुझे लगता है कि आप देख रहे हैं कि यह कहां जा रहा है। ग्रेडिएंट में कठोर रंगों के रुकने के लिए जब हम बहुत छोटे दशमलव मानों का उपयोग करते हैं तो हमें एक अजीब विकृत दृश्य मिलता है। हमारा शोर पैदा होता है!

हम अभी भी उस दानेदार शोर से दूर हैं जो हम चाहते हैं क्योंकि हम अभी भी वास्तविक शंकु ढाल देख सकते हैं। लेकिन हम मूल्यों को बहुत, बहुत छोटे - जैसे घटा सकते हैं 0.0001% - और अचानक कोई और ग्रेडिएंट नहीं बल्कि शुद्ध दानेदारता है:

टाडा! हमारे पास एक शोर प्रभाव है और इसके लिए केवल एक CSS ग्रेडिएंट की आवश्यकता है। मैं शर्त लगाता हूँ कि यदि मैं इसे समझाने से पहले आपको यह दिखाऊँ, तो आप कभी महसूस नहीं करेंगे कि आप ग्रेडिएंट देख रहे हैं। इसे देखने के लिए आपको ग्रेडिएंट के केंद्र को बहुत ध्यान से देखना होगा।

हम इसकी स्थिति को समायोजित करते हुए ढाल के आकार को बहुत बड़ा बनाकर यादृच्छिकता बढ़ा सकते हैं:

ग्रेडिएंट एक निश्चित पर लागू होता है 3000px वर्ग और पर रखा गया 60% 60% निर्देशांक। इस मामले में हम शायद ही इसके केंद्र को नोटिस कर सकें। रेडियल ग्रेडिएंट के साथ भी ऐसा ही किया जा सकता है:

और चीजों को और भी यादृच्छिक बनाने के लिए (और वास्तविक शोर प्रभाव के करीब) हम ग्रेडियेंट और उपयोग दोनों को जोड़ सकते हैं background-blend-mode चीजों को चिकना करने के लिए:

हमारा शोर प्रभाव एकदम सही है! यहां तक ​​​​कि अगर हम प्रत्येक उदाहरण को करीब से देखते हैं, तो वहां किसी भी ग्रेडिएंट का कोई निशान नहीं है, बल्कि सुंदर दानेदार स्थिर शोर है। हमने उस एंटी-अलियासिंग बग को एक चालाक सुविधा में बदल दिया!

अब जबकि हमारे पास यह है, आइए कुछ दिलचस्प उदाहरण देखें जहां हम इसका उपयोग कर सकते हैं।

एनिमेटेड कोई टीवी सिग्नल नहीं

हमारे द्वारा शुरू किए गए डेमो पर वापस जाना:

यदि आप कोड की जांच करते हैं, तो आप देखेंगे कि मैं एक ग्रेडियेंट पर एक सीएसएस एनीमेशन का उपयोग कर रहा हूं। यह वास्तव में उतना ही सरल है! हम बस इतना कर रहे हैं कि शांकव प्रवणता की स्थिति को बिजली की तेज़ अवधि में आगे बढ़ा रहे हैं (.1s) और यही हमें मिलता है!

मैंने इसी तकनीक का उपयोग एक-डिव सीएसएस कला चुनौती पर किया:

दानेदार छवि फ़िल्टर

एक अन्य विचार यह है कि पुराने जमाने का रूप पाने के लिए शोर को एक छवि पर लागू किया जाए। शोर के बिना उन्हें देखने के लिए प्रत्येक छवि को होवर करें।

मैं छद्म तत्व पर केवल एक ढाल का उपयोग कर रहा हूं और इसे छवि के साथ मिश्रित कर रहा हूं, धन्यवाद mix-blend-mode: overlay.

यदि हम CSS का उपयोग करते हैं तो हम और भी मजेदार प्रभाव प्राप्त कर सकते हैं filter संपत्ति

और अगर हम एक जोड़ते हैं mask मिश्रण करने के लिए, हम और भी अधिक प्रभाव डाल सकते हैं!

दानेदार पाठ उपचार

हम इसी प्रभाव को टेक्स्ट पर भी लागू कर सकते हैं। फिर से, हम सभी की जरूरत है a पर जंजीर ग्रेडिएंट्स की एक जोड़ी background-image और फिर बैकग्राउंड को ब्लेंड करें। फर्क सिर्फ इतना है कि हम भी पहुंच रहे हैं background-clip इसलिए प्रभाव केवल प्रत्येक वर्ण की सीमा पर लागू होता है।

जनन कला

यदि आप ढाल मूल्यों के साथ खेलना जारी रखते हैं, तो आपको साधारण शोर प्रभाव से अधिक आश्चर्यजनक परिणाम मिल सकते हैं। हम कुछ यादृच्छिक आकार प्राप्त कर सकते हैं जो बहुत कुछ दिखते हैं उत्पादक कला!

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

राक्षसी चेहरा

एक आखिरी उदाहरण मैंने बनाया कोडपेन divtober 2022 संग्रह:

ऊपर लपेटकर

मुझे आशा है कि आपको यह छोटा CSS प्रयोग अच्छा लगा होगा। हमने वास्तव में कुछ "नया" नहीं सीखा, लेकिन हमने ग्रेडिएंट्स के साथ थोड़ा बदलाव किया और इसे कुछ मज़ेदार बना दिया। मैं इसे फिर से कहूंगा: यह ऐसा कुछ नहीं है जिसे मैं वास्तविक परियोजना पर उपयोग करने पर विचार करूंगा क्योंकि कौन जानता है कि किसी समय पर एंटी-अलियासिंग को संबोधित किया जाएगा या नहीं। इसके बजाय, यह एक बहुत ही यादृच्छिक और सुखद आश्चर्य था जब मैंने इसमें ठोकर खाई। इसे नियंत्रित करना भी इतना आसान नहीं है और यह ब्राउज़रों में असंगत व्यवहार करता है।

इसने कहा, मैं यह देखने के लिए उत्सुक हूं कि आप इसके साथ क्या कर सकते हैं! आप मूल्यों के साथ खेल सकते हैं, विभिन्न परतों को जोड़ सकते हैं, ए का उपयोग कर सकते हैं filterया, mix-blend-mode, या जो भी हो, और आप निश्चित रूप से वास्तव में कुछ अच्छा प्राप्त करेंगे। अपनी कृतियों को टिप्पणी अनुभाग में साझा करें - कोई पुरस्कार नहीं है लेकिन हम एक अच्छा संग्रह प्राप्त कर सकते हैं!