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