मैंने हाल ही में अपनी वेबसाइट पर एक नई थीम और अग्रणी पात्रों के समूह के साथ एनिमेटेड ग्राफिक्स को ताज़ा किया है, इस श्रृंखला में मेरे द्वारा साझा की गई कई तकनीकों को अभ्यास में लाया है। जब कोई उनके साथ या दिन के अलग-अलग समय पर बातचीत करता है तो मेरे कुछ एनिमेशन का स्वरूप बदल जाता है।
मेरे ब्लॉग पृष्ठों के ऊपर ग्राफ़िक के रंग हर दिन सुबह से रात तक बदलते हैं। फिर, स्नो मोड है, जो एक ओवरले परत और एक ब्लेंडिंग मोड के सौजन्य से ठंडे रंग और एक शीतकालीन थीम जोड़ता है।
इस पर काम करते समय, मुझे आश्चर्य होने लगा कि क्या सीएसएस सापेक्ष रंग मान प्रक्रिया को सरल बनाते हुए मुझे अधिक नियंत्रण दे सकते हैं। नोट: इस ट्यूटोरियल में, मैं थीम ग्राफिक्स और एनिमेशन के लिए सापेक्ष रंग मूल्यों और ओकेएलसीएच रंग स्थान पर ध्यान केंद्रित करूंगा। यदि आप सापेक्ष रंग में गहराई से उतरना चाहते हैं, तो अहमद शदीद ने एक शानदार इंटरैक्टिव गाइड बनाया है। जहां तक रंग रिक्त स्थान, सरगम और ओकेएलसीएच का सवाल है, हमारे अपने ज्योफ ग्राहम ने उनके बारे में लिखा है।
तत्वों का बार-बार उपयोग महत्वपूर्ण था। जब भी संभव हुआ पृष्ठभूमि का पुन: उपयोग किया गया, ज़ूम और ओवरले के साथ उसी कलाकृति से नए दृश्य बनाने में मदद मिली। यह आवश्यकता से पैदा हुआ था, लेकिन इसने व्यक्तिगत दृश्यों के बजाय श्रृंखला के संदर्भ में सोचने को भी प्रोत्साहित किया। रंग पैलेटों को मैन्युअल रूप से अपडेट करने में समस्या चलिए सीधे मेरी चुनौती पर आते हैं। इस तरह के टून टाइटल में - 1959 के योगी बियर शो एपिसोड "लोलाबाई-बाय बियर" पर आधारित - और मेरे काम में आम तौर पर, पैलेट कुछ चुनिंदा रंगों तक ही सीमित होते हैं।
मैं अधिक रंग जोड़े बिना पैलेट का विस्तार करने के लिए जिसे मैं अपना "फाउंडेशन" रंग कहता हूं, उससे शेड और टिंट बनाता हूं।
स्केच में, मैं एचएसएल कलर स्पेस में काम करता हूं, इसलिए इस प्रक्रिया में मेरे फाउंडेशन कलर के लाइटनेस वैल्यू को बढ़ाना या घटाना शामिल है। ईमानदारी से कहूं तो, यह कोई कठिन काम नहीं है - लेकिन एक अलग फाउंडेशन रंग चुनने के लिए रंगों और रंगों का एक नया सेट बनाने की आवश्यकता होती है। बार-बार मैन्युअल रूप से ऐसा करना, जल्दी ही श्रमसाध्य हो जाता है।
मैंने एचएसएल - एच (रंग), एस (संतृप्ति), और एल (हल्कापन) - रंग स्थान का उल्लेख किया है, लेकिन यह रंग का वर्णन करने के कई तरीकों में से एक है। आरजीबी - आर (लाल), जी (हरा), बी (नीला) - शायद सबसे परिचित है, कम से कम इसके हेक्स रूप में। इसके ओकेएलसीएच फॉर्म में एलएबी - एल (हल्कापन), ए (हरा-लाल), बी (नीला-पीला) - और नया, लेकिन अब व्यापक रूप से समर्थित एलसीएच - एल (हल्कापन), सी (क्रोमा), एच (ह्यू) - मॉडल भी है। एलसीएच के साथ - विशेष रूप से सीएसएस में ओकेएलसीएच - मैं अपने फाउंडेशन रंग के हल्केपन मूल्य को समायोजित कर सकता हूं।
या मैं इसका क्रोमा बदल सकता हूं. एलसीएच क्रोमा और एचएसएल संतृप्ति दोनों एक रंग की तीव्रता या समृद्धि का वर्णन करते हैं, लेकिन वे अलग-अलग तरीकों से ऐसा करते हैं। एलसीएच मुझे रंगों के बीच व्यापक रेंज और अधिक पूर्वानुमानित सम्मिश्रण प्रदान करता है।
मैं रंगों का एक पैलेट बनाने के लिए रंग को भी बदल सकता हूं जो समान चमक और क्रोमा मान साझा करता है। एचएसएल और एलसीएच दोनों में, रंग स्पेक्ट्रम लाल रंग से शुरू होता है, हरे और नीले रंग से गुजरता है, और लाल रंग में वापस आ जाता है।
ओकेएलसीएच ने रंग के बारे में मेरे सोचने के तरीके को क्यों बदल दिया ओकेएलसीएच कलर स्पेस के लिए ब्राउज़र समर्थन अब व्यापक है, भले ही डिज़ाइन टूल - जिसमें स्केच भी शामिल है - पकड़ में नहीं आया है। सौभाग्य से, यह आपको OKLCH का उपयोग करने से नहीं रोकेगा। ब्राउज़र आपके लिए हेक्स, एचएसएल, लैब और आरजीबी मानों को खुशी-खुशी ओकेएलसीएच में बदल देंगे। आप हेक्स सहित किसी भी स्थान पर फाउंडेशन रंग के साथ सीएसएस कस्टम प्रॉपर्टी को परिभाषित कर सकते हैं: /* फाउंडेशन का रंग */ --फाउंडेशन: #5एसीसीडी6;
इससे प्राप्त कोई भी रंग स्वचालित रूप से OKLCH में परिवर्तित हो जाएगा: --फाउंडेशन-लाइट: ओकेएलसीएच(वर से(--फाउंडेशन) [...]; } --फाउंडेशन-मिड: ओकेएलसीएच(वर से(--फाउंडेशन) [...]; } --फाउंडेशन-डार्क: ओकेएलसीएच(वर से(--फाउंडेशन) [...]; }
एक डिजाइन प्रणाली के रूप में सापेक्ष रंग सापेक्ष रंग के बारे में इस प्रकार सोचें: "यह रंग लो, इसे सुधारो, फिर मुझे परिणाम दो।" किसी रंग को समायोजित करने के दो तरीके हैं: पूर्ण परिवर्तन और आनुपातिक परिवर्तन। वे कोड में समान दिखते हैं, लेकिन जब आप फाउंडेशन रंगों की अदला-बदली शुरू करते हैं तो उनका व्यवहार बहुत अलग होता है। उस अंतर को समझना ही सापेक्ष रंग के उपयोग को एक प्रणाली में बदल सकता है। /* फाउंडेशन का रंग */ --फाउंडेशन: #5एसीसीडी6;
उदाहरण के लिए, मेरे फाउंडेशन रंग का हल्कापन मान 0.7837 है, जबकि गहरे संस्करण का मान 0.5837 है। अंतर की गणना करने के लिए, मैं उच्च वाले से निचले मान को घटाता हूं और कैल्क() फ़ंक्शन का उपयोग करके परिणाम लागू करता हूं: --नींव-अंधेरा: Oklch(var(--फाउंडेशन से) कैल्क (एल - 0.20) सी एच);
हल्का रंग पाने के लिए, मैं इसके बजाय अंतर जोड़ता हूँ: --नींव-प्रकाश: Oklch(var(--फाउंडेशन से) कैल्क (एल + 0.10) सी एच);
क्रोमासमायोजन उसी प्रक्रिया का पालन करते हैं। मेरे फाउंडेशन रंग की तीव्रता को 0.1035 से घटाकर 0.0035 करने के लिए, मैं एक मान को दूसरे से घटाता हूँ: Oklch(var(--फाउंडेशन से) एल कैल्क(सी - 0.10) एच);
रंगों का एक पैलेट बनाने के लिए, मैं अपने फाउंडेशन रंग (200) और मेरे नए रंग (260) के रंग मूल्य के बीच अंतर की गणना करता हूं: Oklch(var(--फाउंडेशन से) एल सी कैल्क (एच + 60));
वे गणनाएँ पूर्ण हैं. जब मैं एक निश्चित राशि घटाता हूं, तो मैं प्रभावी ढंग से कह रहा हूं, "हमेशा इतना ही घटाएं।" निश्चित मान जोड़ते समय भी यही बात लागू होती है: कैल्क (सी - 0.10) कैल्क (सी + 0.10)
मैंने इस दृष्टिकोण की सीमाएं कठिन तरीके से सीखीं। जब मैंने निश्चित क्रोमा मानों को घटाने पर भरोसा किया, तो जैसे ही मैंने आधार बदला, रंग धूसर हो गए। एक पैलेट जो एक रंग के लिए काम करता था वह दूसरे रंग के लिए अलग हो गया। गुणन अलग ढंग से व्यवहार करता है. जब मैं क्रोमा को गुणा करता हूं, तो मैं ब्राउज़र से कहता हूं: "इस रंग की तीव्रता को एक अनुपात से कम करें।" आधार बदलने पर भी रंगों के बीच संबंध बरकरार रहता है: कैल्क (सी * 0.10)
माई मूव इट, स्केल इट, रोटेट इट रूल्स
हल्कापन ले जाएँ (जोड़ें या घटाएँ), स्केल क्रोमा (गुणा करें), रंग घुमाएं (डिग्री जोड़ें या घटाएं)।
मैं क्रोमा स्केल करता हूं क्योंकि मैं चाहता हूं कि तीव्रता में बदलाव बेस रंग के समानुपाती रहे। रंग संबंध घूर्णी हैं, इसलिए रंग को गुणा करने का कोई मतलब नहीं है। हल्कापन अवधारणात्मक और निरपेक्ष है - इसे गुणा करने पर अक्सर अजीब परिणाम मिलते हैं।
एक रंग से लेकर संपूर्ण थीम तक सापेक्ष रंग मुझे एक फाउंडेशन रंग को परिभाषित करने और उसमें से हर वह रंग उत्पन्न करने की अनुमति देता है जिसकी मुझे आवश्यकता है - भरता है, स्ट्रोक करता है, ग्रेडिएंट स्टॉप, छाया। उस बिंदु पर, रंग एक पैलेट बनना बंद कर देता है और एक प्रणाली बनना शुरू कर देता है। एसवीजी चित्रण भरण, स्ट्रोक और ग्रेडिएंट में समान कुछ रंगों का पुन: उपयोग करते हैं। सापेक्ष रंग आपको उन रिश्तों को एक बार परिभाषित करने और उन्हें हर जगह पुन: उपयोग करने देता है - ठीक उसी तरह जैसे एनिमेटरों ने नए दृश्य बनाने के लिए पृष्ठभूमि का पुन: उपयोग किया।
फ़ाउंडेशन रंग को एक बार बदलें, और प्रत्येक व्युत्पन्न रंग स्वचालित रूप से अपडेट हो जाता है, बिना हाथ से कुछ भी पुनर्गणना किए। एनिमेटेड ग्राफिक्स के अलावा, मैं बटन और लिंक जैसे इंटरैक्टिव तत्वों की स्थिति के लिए रंगों को परिभाषित करने के लिए इसी दृष्टिकोण का उपयोग कर सकता हूं। मैंने अपने "लोरी-बाय बियर" टून टाइटल में जो फाउंडेशन रंग इस्तेमाल किया है वह सियान जैसा दिखने वाला नीला है। पृष्ठभूमि मेरी नींव और गहरे संस्करण के बीच एक रेडियल ग्रेडिएंट है।
पूरी तरह से अलग मूड के साथ वैकल्पिक संस्करण बनाने के लिए, मुझे केवल फाउंडेशन का रंग बदलना होगा: --फाउंडेशन: #5एसीसीडी6; --ग्रेड-एंड: var(--फाउंडेशन); --ग्रेड-स्टार्ट: oklch(var(--फाउंडेशन से) कैल्क (एल - 0.2357) कैल्क (सी * 0.833) एच);
रंग मानों की नकल किए बिना उन कस्टम गुणों को मेरे एसवीजी ग्रेडिएंट से जोड़ने के लिए, मैंने हार्ड-कोडेड स्टॉप-कलर मानों को इनलाइन शैलियों से बदल दिया:
<डिफ़्स>
<रेडियलग्रैडिएंट आईडी='बीजी-ग्रेड' […]>
इसके बाद, मुझे यह सुनिश्चित करने की ज़रूरत थी कि मेरा टून टेक्स्ट हमेशा मेरे द्वारा चुने गए फाउंडेशन रंग से भिन्न हो। 180 डिग्री का रंग घुमाव एक पूरक रंग उत्पन्न करता है जो निश्चित रूप से पॉप होता है - लेकिन असुविधाजनक रूप से कंपन कर सकता है: .पाठ-प्रकाश { भरें: oklch(var(--फाउंडेशन से) एल सी कैल्क (एच + 180)); }
90° का बदलाव पूरी तरह से पूरक हुए बिना एक ज्वलंत माध्यमिक रंग उत्पन्न करता है: .पाठ-प्रकाश { भरें: oklch(var(--फाउंडेशन से) एल सी कैल्क (एच - 90)); }
क्विक ड्रा मैकग्रा के 1959 टून शीर्षक "एल काबोंग" का मेरा मनोरंजन समान तकनीकों का उपयोग करता है लेकिन अधिक विविध पैलेट के साथ। उदाहरण के लिए, फाउंडेशन रंग और गहरे शेड के बीच एक और रेडियल ग्रेडिएंट होता है।
पृष्ठभूमि में इमारत और पेड़ एक ही नींव के रंग के अलग-अलग रंग हैं। उन पथों के लिए, मुझे दो अतिरिक्त भरण रंगों की आवश्यकता थी: .बीजी-मध्य { भरें: oklch(var(--फाउंडेशन से) कैल्क (एल - 0.04) कैल्क (सी * 0.91) एच); }
.बीजी-अंधेरा { भरें: oklch(var(--फाउंडेशन से) कैल्क (एल - 0.12) कैल्क (सी * 0.64) एच); }
जब नींव हिलने लगती है अब तक, मैंने जो कुछ भी दिखाया है वह स्थिर है। यहां तक कि जब कोई फाउंडेशन का रंग बदलने के लिए कलर पिकर का उपयोग करता है, तो वह परिवर्तन तुरंत हो जाता है। लेकिन एनिमेटेड ग्राफिक्स शायद ही कभी स्थिर रहते हैं - सुराग नाम में है। इसलिए, यदि रंग सिस्टम का हिस्सा है, तो कोई कारण नहीं है कि वह चेतन न हो सके। फाउंडेशन रंग को जीवंत करने के लिए, मुझे सबसे पहले इसे इसके ओकेएलसीएच चैनलों में विभाजित करना होगा- हल्कापन, क्रोमा और रंग। लेकिन एक महत्वपूर्ण अतिरिक्त कदम है: मुझे उन मानों को टाइप की गई कस्टम संपत्तियों के रूप में पंजीकृत करने की आवश्यकता है। लेकिन इसका क्या मतलब है? डिफ़ॉल्ट रूप से, ब्राउज़र को यह नहीं पता होता है कि CSS कस्टम प्रॉपर्टी मान किसी रंग, लंबाई, संख्या या पूरी तरह से कुछ और का प्रतिनिधित्व करता है या नहीं। इसका मतलब अक्सर यह होता है कि एनीमेशन के दौरान उन्हें आसानी से प्रक्षेपित नहीं किया जा सकता है, और वे एक मान से दूसरे मान पर नहीं जा सकते हैं। एक कस्टम प्रॉपर्टी पंजीकृत करना ब्राउज़र को बताता है कि यह किस प्रकार के मूल्य का प्रतिनिधित्व करता है और इसे समय के साथ कैसे व्यवहार करना चाहिए। इस मामले में, मैं चाहता हूं कि ब्राउज़र मेरे रंगीन चैनलों को संख्याओं के रूप में देखे ताकि उन्हें आसानी से एनिमेटेड किया जा सके। @संपत्ति --f-l { वाक्यविन्यास: "<संख्या>"; विरासत: सत्य; प्रारंभिक-मूल्य: 0.40; }
@संपत्ति --एफ-सी { वाक्यविन्यास: "<संख्या>"; विरासत: सत्य; प्रारंभिक-मूल्य: 0.11; }
@संपत्ति --एफ-एच { वाक्यविन्यास: "<संख्या>"; विरासत: सत्य; प्रारंभिक-मूल्य: 305; }
एक बार पंजीकृत होने के बाद, ये कस्टम गुण मूल सीएसएस की तरह व्यवहार करते हैं। ब्राउज़र उन्हें फ़्रेम-दर-फ़्रेम प्रक्षेपित कर सकता है. मैं फिर उन चैनलों से फाउंडेशन रंग का पुनर्निर्माण करता हूं: --फाउंडेशन: oklch(var(--f-l) var(--f-c) var(--f-h));
इससे किसी भी अन्य संख्यात्मक मान की तरह ही फाउंडेशन का रंग भी एनिमेटेबल हो जाता है। यहां एक सरल "सांस लेने" वाला एनीमेशन है जो समय के साथ हल्केपन को धीरे-धीरे बदलता है: @कीफ्रेम सांस लेते हैं { 0%, 100% { --f-l: 0.36; } 50% { --f-l: 0.46; } }
.टून-शीर्षक { एनीमेशन: 10s साँस लें आसानी से अंदर-बाहर अनंत; }
क्योंकि भरण, ग्रेडिएंट और स्ट्रोक में हर दूसरा रंग --फाउंडेशन से लिया गया है, वे सभी एक साथ एनिमेट होते हैं, और कुछ भी मैन्युअल रूप से अपडेट करने की आवश्यकता नहीं होती है। एक एनिमेटेड रंग, अनेक प्रभाव इस प्रक्रिया की शुरुआत में, मुझे आश्चर्य हुआ कि क्या सीएसएस सापेक्ष रंग मान अधिक संभावनाएं प्रदान कर सकते हैं और साथ ही उन्हें लागू करना आसान बना सकते हैं। मैंने हाल ही में अपनी वेबसाइट के संपर्क पृष्ठ पर एक नई सोने की खान की पृष्ठभूमि जोड़ी है, और पहले पुनरावृत्ति में तेल के लैंप शामिल हैं जो चमकते और झूलते हैं।
मैं यह पता लगाना चाहता था कि कैसे एनिमेटिंग सीएसएस सापेक्ष रंग खदान के इंटीरियर को लैंप के रंगों से रंगकर अधिक यथार्थवादी बना सकते हैं। मैं चाहता था कि वे अपने आस-पास की दुनिया को उसी तरह प्रभावित करें जिस तरह वास्तविक प्रकाश प्रभावित करता है। इसलिए, कई रंगों को एनिमेट करने के बजाय, मैंने एक छोटी प्रकाश व्यवस्था बनाई जो केवल एक रंग को एनिमेट करती है।
मेरा पहला काम पृष्ठभूमि और मेरे लैंप के बीच एक ओवरले परत लगाना था: <पथ आईडी = "ओवरले" fill='var(--overlay-tint)' [...] शैली = "मिश्रण-मिश्रण-मोड: रंग" />
मैंने मिक्स-ब्लेंड-मोड: कलर का उपयोग किया क्योंकि यह अंतर्निहित चमक को संरक्षित करते हुए इसके नीचे क्या है उसे रंग देता है। चूँकि मैं चाहता हूँ कि ओवरले केवल तभी दिखाई दे जब एनिमेशन चालू हों, इसलिए मैंने ओवरले ऑप्ट-इन किया: .svg-मेरा #ओवरले { प्रदर्शन: कोई नहीं; }
@मीडिया (पसंद-कम-गति: कोई-वरीयता नहीं) { .svg-मेरा[डेटा-एनिमेशन=पर] #ओवरले { प्रदर्शन: ब्लॉक; अपारदर्शिता: 0.5; } }
ओवरले अपनी जगह पर था, लेकिन अभी तक लैंप से जुड़ा नहीं था। मुझे एक प्रकाश स्रोत की आवश्यकता थी. मेरे लैंप सरल हैं, और प्रत्येक में एक वृत्त तत्व होता है जिसे मैंने फ़िल्टर के साथ धुंधला कर दिया है। फ़िल्टर पूरे सर्कल पर बहुत हल्का धुंधलापन पैदा करता है।
<फ़िल्टर आईडी = "लैंप-ग्लो-1" x = "-120%" y = "-120%" चौड़ाई = "340%" ऊंचाई = "340%">
ओवरले और लैंप को अलग-अलग एनिमेट करने के बजाय, मैं एक "लौ" रंग टोकन को एनिमेट करता हूं और उससे बाकी सब कुछ प्राप्त करता हूं। सबसे पहले, मैं OKLCH चैनलों के लिए तीन टाइप की गई कस्टम प्रॉपर्टी पंजीकृत करता हूं: @संपत्ति --fl-l { वाक्यविन्यास: "<संख्या>"; विरासत: सत्य; प्रारंभिक-मूल्य: 0.86; } @संपत्ति --fl-c { वाक्यविन्यास: "<संख्या>"; विरासत: सत्य; प्रारंभिक-मूल्य: 0.12; } @संपत्ति --fl-h { वाक्यविन्यास: "<संख्या>"; विरासत: सत्य; प्रारंभिक-मूल्य: 95; }
मैंने उन चैनलों को एनिमेटेड किया, जानबूझकर कुछ फ़्रेमों को नारंगी रंग की ओर धकेला ताकि फ़्लिकर स्पष्ट रूप से फायरलाइट के रूप में पढ़े:
@कीफ़्रेम्स लौ { 0%, 100% { --fl-l: 0.86; --एफएल-सी: 0.12; --एफएल-एच: 95; } 6% { --fl-l: 0.91; --एफएल-सी: 0.10; --एफएल-एच: 92; } 12% { --fl-l: 0.83; --एफएल-सी: 0.14; --एफएल-एच: 100; } 18% { --fl-l: 0.88; --एफएल-सी: 0.11; --एफएल-एच: 94; } 24% { --fl-l: 0.82; --एफएल-सी: 0.16; --एफएल-एच: 82; } 30% { --fl-l: 0.90; --एफएल-सी: 0.12; --एफएल-एच: 90; } 36% { --fl-l: 0.79; --एफएल-सी: 0.17; --एफएल-एच: 76; } 44% { --fl-l: 0.87; --एफएल-सी: 0.12; --एफएल-एच: 96; } 52% { --fl-l: 0.81; --एफएल-सी: 0.15; --एफएल-एच: 102; } 60% { --fl-l: 0.89; --एफएल-सी: 0.11; --एफएल-एच: 93; } 68% { --fl-l: 0.83; --एफएल-सी: 0.16; --एफएल-एच: 85; } 76% { --fl-l: 0.91; --एफएल-सी: 0.10; --एफएल-एच: 91; } 84% { --fl-l: 0.85; --एफएल-सी: 0.14; --एफएल-एच: 98; } 92% {--एफएल-एल: 0.80; --एफएल-सी: 0.17; --एफएल-एच: 74; } }
फिर मैंने उस एनीमेशन को एसवीजी तक सीमित कर दिया, ताकि साझा किए गए वेरिएबल लैंप और मेरे ओवरले दोनों के लिए उपलब्ध हों:
@मीडिया (पसंद-कम-गति: कोई-वरीयता नहीं) { .svg-मेरा[डेटा-एनिमेशन=पर] { एनीमेशन: लौ 3.6 एस अनंत रैखिक; अलगाव: अलग करना;
/*एनिमेटेड चैनलों से फ्लेम कलर बनाएं*/ --फ्लेम: oklch(var(--fl-l) var(--fl-c) var(--fl-h));
/* दीपक का रंग लौ से प्राप्त होता है */ --लैंप-कोर: ओकेएलसीएच(वर(--फ्लेम) कैल्क(एल + 0.05) कैल्क(सी * 0.70) एच);
/* एक ही लौ से प्राप्त ओवरले टिंट */ --ओवरले-टिंट: ओकेएलसीएच(वर(--फ्लेम) से) कैल्क(एल + 0.06) कैल्क(सी * 0.65) कैल्क(एच - 10)); } }
अंत में, मैंने उन व्युत्पन्न रंगों को चमकते लैंप और उनके द्वारा प्रभावित ओवरले पर लागू किया: @मीडिया (पसंद-कम-गति: कोई-वरीयता नहीं) { .svg-मेरा[डेटा-एनिमेशन=ऑन] #मेरा-लैंप-1 > वृत्त, .svg-मेरा[डेटा-एनिमेशन=पर] #मेरा-लैंप-2 > वृत्त { भरें: var(--लैंप-कोर); }
.svg-मेरा[डेटा-एनिमेशन=पर] #ओवरले { प्रदर्शन: ब्लॉक; भरें: var(--ओवरले-टिंट); अपारदर्शिता: 0.5; } }
जब लौ नारंगी रंग की ओर बढ़ती है, तो लैंप गर्म हो जाते हैं और उनके साथ दृश्य भी गर्म हो जाता है। जब लौ ठंडी हो जाती है, तो सब कुछ एक साथ बैठ जाता है। सबसे अच्छी बात यह है कि इसमें कुछ भी मैन्युअल रूप से नहीं लिखा जाता है। यदि मैं फाउंडेशन का रंग बदलता हूं या फ्लेम एनीमेशन रेंज में बदलाव करता हूं, तो संपूर्ण प्रकाश व्यवस्था एक साथ अपडेट हो जाती है। आप अंतिम परिणाम मेरी वेबसाइट पर देख सकते हैं। पुन: उपयोग, पुन: प्रयोजन, पुनरीक्षित उन हन्ना-बारबेरा एनिमेटरों को आवश्यकता के कारण तत्वों का पुन: उपयोग करने के लिए मजबूर किया गया था, लेकिन मैं रंगों का पुन: उपयोग करता हूं क्योंकि यह मेरे काम को अधिक सुसंगत और बनाए रखने में आसान बनाता है। सीएसएस सापेक्ष रंग मान मुझे इसकी अनुमति देते हैं:
एकल फाउंडेशन रंग को परिभाषित करें, वर्णन करें कि अन्य रंग इससे कैसे संबंधित हैं, उन रिश्तों का हर जगह पुन: उपयोग करें, और एक मान बदलकर सिस्टम को चेतन करें।
सापेक्ष रंग सिर्फ थीम को आसान नहीं बनाता है। यह सोचने के एक ऐसे तरीके को प्रोत्साहित करता है जहां रंग, गति की तरह, जानबूझकर होता है - और जहां एक मूल्य को बदलने से इसके नीचे के काम को दोबारा लिखे बिना पूरे दृश्य को बदल दिया जा सकता है।
