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