मैले भर्खरै मेरो वेबसाइटमा एनिमेटेड ग्राफिक्सलाई नयाँ विषयवस्तु र अग्रगामी पात्रहरूको समूहको साथ ताजा गरेको छु, यस श्रृंखलामा मैले साझा गरेको धेरै प्रविधिहरू अभ्यासमा राख्दै। मेरा केही एनिमेसनहरूले तिनीहरूसँग अन्तरक्रिया गर्दा वा दिनको विभिन्न समयमा देखा पर्छन्।
मेरो ब्लग पृष्ठहरूमा ग्राफिकमा रङहरू हरेक दिन बिहानदेखि बेलुकासम्म परिवर्तन हुन्छन्। त्यसपछि, त्यहाँ स्नो मोड छ, जसले चिसो रंगहरू र जाडोको विषयवस्तु थप्छ, ओभरले तह र मिश्रण मोडको सौजन्य।
यसमा काम गर्दा, मैले प्रक्रियालाई सरल बनाउने क्रममा CSS सापेक्ष रंग मानहरूले मलाई थप नियन्त्रण दिन सक्छ कि भनेर सोच्न थाले। नोट: यस ट्यूटोरियलमा, म सापेक्ष रङ मानहरू र विषयवस्तु ग्राफिक्स र एनिमेसनको लागि OKLCH रङ स्पेसमा ध्यान दिनेछु। यदि तपाईं सापेक्षिक रंगमा गहिरो डुब्न चाहनुहुन्छ भने, अहमद शादेदले एक उत्कृष्ट अन्तरक्रियात्मक गाइड सिर्जना गर्नुभयो। रङ स्पेस, गामट्स, र OKLCH को लागि, हाम्रो आफ्नै जियोफ ग्राहमले तिनीहरूको बारेमा लेखे।
तत्वहरूको बारम्बार प्रयोग प्रमुख थियो। सम्भव भएसम्म पृष्ठभूमिहरू पुन: प्रयोग गरियो, जुम र ओभरलेहरूले एउटै कलाकृतिबाट नयाँ दृश्यहरू निर्माण गर्न मद्दत गर्दछ। यो आवश्यकताबाट जन्मिएको थियो, तर यसले व्यक्तिगत दृश्यहरूको सट्टा श्रृंखलाको सन्दर्भमा सोच्न प्रोत्साहित गर्यो। रङ प्यालेटहरू म्यानुअल रूपमा अद्यावधिक गर्दा समस्या सीधा मेरो चुनौतीमा जाऔं। 1959 योगी भालु शो एपिसोड "लुल्लाबाइ-बाय भालु" मा आधारित - यो जस्तै Toon शीर्षकहरूमा - र मेरो काम सामान्यतया, प्यालेटहरू केही चयन रङहरूमा सीमित छन्।
मैले मेरो "फाउन्डेशन" रङलाई थप रंगहरू थप नगरी प्यालेट विस्तार गर्नका लागि छायाँ र टिन्टहरू सिर्जना गर्छु।
स्केचमा, म HSL कलर स्पेसमा काम गर्छु, त्यसैले यो प्रक्रियामा मेरो फाउन्डेसन रङको हल्कापन मान बढाउने वा घटाउने समावेश छ। इमानदारीपूर्वक, यो एक कठिन कार्य होइन - तर फरक आधार रंग छनोट गर्न रंग र टिन्टहरूको पूर्ण नयाँ सेट सिर्जना गर्न आवश्यक छ। त्यो म्यानुअल रूपमा गर्नाले, बारम्बार, चाँडै श्रमसाध्य हुन्छ।
मैले HSL - H (ह्यु), S (संतृप्ति), र L (लाइटनेस) - रङ स्पेस उल्लेख गरें, तर यो रङ वर्णन गर्ने धेरै तरिकाहरू मध्ये एक मात्र हो। RGB - R (रातो), G (हरियो), B (नीलो) - सायद सबैभन्दा परिचित छ, कम्तिमा यसको हेक्स फारममा। त्यहाँ LAB — L (लाइटनेस), A (हरियो-रातो), B (निलो-पहेंलो) — र नयाँ, तर अहिले व्यापक रूपमा समर्थित LCH — L (लाइटनेस), C (क्रोमा), H (ह्यु) — मोडेल यसको OKLCH फारममा पनि छ। LCH को साथ - विशेष गरी CSS मा OKLCH - म मेरो आधार रंगको हल्कापन मान समायोजन गर्न सक्छु।
वा म यसको क्रोमा परिवर्तन गर्न सक्छु। एलसीएच क्रोमा र एचएसएल संतृप्ति दुवैले रंगको तीव्रता वा समृद्धिको वर्णन गर्दछ, तर तिनीहरू फरक तरिकामा गर्छन्। LCH ले मलाई रङहरू बीच फराकिलो दायरा र अधिक अनुमानित मिश्रण दिन्छ।
उही हल्कापन र क्रोमा मानहरू साझा गर्ने रङहरूको प्यालेट सिर्जना गर्न म रंग परिवर्तन गर्न सक्छु। दुबै HSL र LCH मा, ह्यु स्पेक्ट्रम रातोमा सुरु हुन्छ, हरियो र नीलो हुँदै जान्छ, र रातोमा फर्कन्छ।
किन OKLCH परिवर्तन भयो म कसरी रंगको बारेमा सोच्छु OKLCH रङ स्पेसको लागि ब्राउजर समर्थन अब व्यापक छ, यद्यपि डिजाइन उपकरणहरू - स्केच सहित - समातेको छैन। सौभाग्य देखि, यसले तपाईंलाई OKLCH प्रयोग गर्नबाट रोक्नु हुँदैन। ब्राउजरहरूले खुशीसाथ हेक्स, HSL, LAB, र RGB मानहरूलाई तपाईंको लागि OKLCH मा रूपान्तरण गर्नेछन्। तपाईंले हेक्स सहित कुनै पनि ठाउँमा फाउन्डेशन रङको साथ CSS अनुकूलन गुण परिभाषित गर्न सक्नुहुन्छ: /* आधार रंग */ --फाउन्डेशन: #5accd6;
यसबाट व्युत्पन्न कुनै पनि रङहरू स्वचालित रूपमा OKLCH मा रूपान्तरण हुनेछन्: --foundation-light: oklch(var(--foundation) बाट [...]; } --foundation-mid: oklch(var(--foundation) बाट [...]; } --फाउन्डेशन-डार्क: oklch(var(--foundation) बाट [...]; }
डिजाइन प्रणालीको रूपमा सापेक्ष रंग यसरी सापेक्ष रंगको बारेमा सोच्नुहोस्: "यो रङ लिनुहोस्, यसलाई ट्वीक गर्नुहोस्, त्यसपछि मलाई परिणाम दिनुहोस्।" रंग समायोजन गर्न दुई तरिकाहरू छन्: निरपेक्ष परिवर्तनहरू र समानुपातिक परिवर्तनहरू। तिनीहरू कोडमा उस्तै देखिन्छन्, तर तपाईंले फाउन्डेसन रङहरू बदल्न थाल्नुभयो भने धेरै फरक व्यवहार गर्नुहोस्। त्यो भिन्नता बुझ्नु भनेको सापेक्षिक रङ प्रयोग गरेर प्रणालीमा परिवर्तन गर्न सकिन्छ। /* आधार रंग */ --फाउन्डेशन: #5accd6;
उदाहरणका लागि, मेरो फाउन्डेसन रङको हल्कापन मान ०.७८३७ हो, जबकि गाढा संस्करणको मान ०.५८३७ छ। भिन्नता गणना गर्न, म उच्चबाट तल्लो मान घटाउँछु र calc() प्रकार्य प्रयोग गरेर परिणाम लागू गर्छु: --फाउन्डेशन-डार्क: oklch(var(--फाउन्डेशन) बाट calc(l - 0.20) c h);
हल्का रङ प्राप्त गर्न, म यसको सट्टा भिन्नता थप्छु: --फाउन्डेशन-लाइट: oklch(var(--फाउन्डेशन) बाट calc(l + 0.10) c h);
क्रोमासमायोजन एउटै प्रक्रिया पछ्याउँछ। ०.१०३५ देखि ०.००३५ मा मेरो फाउन्डेसन रङको तीव्रता घटाउनको लागि, म अर्कोबाट एउटा मान घटाउँछु: oklch(var(--फाउन्डेशन) बाट l क्याल्क(c - 0.10) h);
रंगहरूको प्यालेट सिर्जना गर्न, म मेरो आधार रंग (200) र मेरो नयाँ रङ (260) को ह्यु मान बीचको भिन्नता गणना गर्छु: oklch(var(--फाउन्डेशन) बाट l c क्याल्क (h + 60));
ती गणनाहरू निरपेक्ष छन्। जब म एक निश्चित रकम घटाउँछु, म प्रभावकारी रूपमा भन्छु, "सधैं यो धेरै घटाउनुहोस्।" निश्चित मानहरू थप्दा उही लागू हुन्छ: क्याल्क (ग - ०.१०) क्याल्क (c + ०.१०)
मैले कठिन तरिकाले यस दृष्टिकोणको सीमाहरू सिकें। जब मैले फिक्स्ड क्रोमा मानहरू घटाउनमा भर परेको थिएँ, मैले फाउन्डेशन परिवर्तन गर्ने बित्तिकै रङहरू खैरो तर्फ पतन भयो। एउटा रंगको लागि काम गर्ने प्यालेट अर्कोको लागि अलग भयो। गुणनले फरक व्यवहार गर्छ। जब म क्रोमा गुणन गर्छु, म ब्राउजरलाई भन्छु: "यस रङको तीव्रतालाई अनुपातमा घटाउनुहोस्।" रङहरू बीचको सम्बन्ध अक्षुण्ण रहन्छ, आधार परिवर्तन हुँदा पनि: क्याल्क (c * ०.१०)
मेरो चाल, यो मापन, घुमाउनुहोस् यो नियम
हल्कापन सार्नुहोस् (थप्नुहोस् वा घटाउनुहोस्), स्केल क्रोमा (गुण), रंग घुमाउनुहोस् (डिग्री थप्नुहोस् वा घटाउनुहोस्)।
म क्रोमा मापन गर्छु किनभने म तीव्रता परिवर्तनहरू आधार रंगको समानुपातिक रहन चाहन्छु। ह्यु सम्बन्धहरू घुमाउरो हुन्छन्, त्यसैले रङ्गलाई गुणन गर्नुको कुनै अर्थ हुँदैन। लाइटनेस अवधारणात्मक र निरपेक्ष छ - यसलाई गुणन गर्दा प्राय: अजीब परिणामहरू उत्पन्न हुन्छ।
एक रङ देखि एक सम्पूर्ण विषयवस्तुमा सापेक्ष रंगले मलाई फाउन्डेसन रङ परिभाषित गर्न र मलाई चाहिने हरेक रङ उत्पन्न गर्न अनुमति दिन्छ — फिल, स्ट्रोक, ग्रेडियन्ट स्टप, छायाँ — यसबाट। त्यस बिन्दुमा, रंग प्यालेट हुन रोक्छ र प्रणाली हुन थाल्छ। SVG दृष्टान्तहरूले भरिने, स्ट्रोकहरू, र ग्रेडियन्टहरूमा उही केही रङहरू पुन: प्रयोग गर्ने प्रवृत्ति हुन्छ। सापेक्ष रंगले तपाईंलाई ती सम्बन्धहरू एक पटक परिभाषित गर्न र तिनीहरूलाई जताततै पुन: प्रयोग गर्न दिन्छ — जस्तै एनिमेटरहरूले नयाँ दृश्यहरू सिर्जना गर्न पृष्ठभूमिहरू पुन: प्रयोग गरे।
एक पटक फाउन्डेशन रङ परिवर्तन गर्नुहोस्, र प्रत्येक व्युत्पन्न रङ स्वचालित रूपमा अद्यावधिक हुन्छ, हातले केहि पुन: गणना नगरी। एनिमेटेड ग्राफिक्सको बाहिर, म बटनहरू र लिङ्कहरू जस्ता अन्तरक्रियात्मक तत्वहरूको अवस्थाका लागि रङहरू परिभाषित गर्न यही दृष्टिकोण प्रयोग गर्न सक्छु। मैले मेरो "Lullabye-Bye Bear" Toon शीर्षकमा प्रयोग गरेको फाउन्डेशन रङ सियान देखिने नीलो हो। पृष्ठभूमि मेरो फाउन्डेशन र गाढा संस्करण बीचको रेडियल ढाँचा हो।
पूरै फरक मुडको साथ वैकल्पिक संस्करणहरू सिर्जना गर्न, मैले केवल आधार रंग परिवर्तन गर्न आवश्यक छ: --फाउन्डेशन: #5accd6; --ग्रेड-अन्त: var(--फाउन्डेशन); --grad-start: oklch(var(--foundation) बाट calc(l - 0.2357) calc(c * 0.833) h);
रङ मानहरू नक्कल नगरिकन ती अनुकूलन गुणहरूलाई मेरो SVG ग्रेडियन्टमा बाँध्न, मैले हार्ड-कोडित स्टप-रङ मानहरूलाई इनलाइन शैलीहरूसँग प्रतिस्थापन गरें:
अर्को, मैले यो सुनिश्चित गर्न आवश्यक छ कि मेरो टून पाठ सधैं मैले रोजेको आधारभूत रङसँग विपरित हुन्छ। 180deg ह्यु रोटेशनले एक पूरक रङ उत्पादन गर्छ जुन निश्चित रूपमा पप हुन्छ - तर असहज रूपमा कम्पन हुन सक्छ: टेक्स्ट-लाइट { भर्नुहोस्: oklch (var(--फाउन्डेशन) बाट l c क्याल्क (h + 180)); }
एक 90° शिफ्टले पूर्ण रूपमा पूरक नभई ज्वलन्त माध्यमिक रंग उत्पादन गर्दछ: टेक्स्ट-लाइट { भर्नुहोस्: oklch (var(--फाउन्डेशन) बाट l c calc(h - 90)); }
Quick Draw McGraw को 1959 Toon शीर्षक "El Kabong" को मेरो मनोरञ्जनले उही प्रविधिहरू प्रयोग गर्दछ तर धेरै विविध प्यालेटको साथ। उदाहरणका लागि, फाउन्डेसन रङ र गाढा शेडको बीचमा अर्को रेडियल ग्रेडियन्ट छ।
पृष्ठभूमिमा रहेको भवन र रूख एउटै फाउन्डेसन रङका फरक-फरक शेडहरू हुन्। ती मार्गहरूको लागि, मलाई दुई थप भरिने रंगहरू चाहिन्छ: .bg-mid { भर्नुहोस्: oklch (var(--फाउन्डेशन) बाट calc(l - 0.04) calc(c * 0.91) h); }
.bg-गाढा { भर्नुहोस्: oklch (var(--फाउन्डेशन) बाट calc(l - 0.12) calc(c * 0.64) h); }
जब आधारहरू सार्न थाल्छन्
अहिलेसम्म, मैले देखाएको सबै स्थिर छ। कसैले फाउन्डेसनको रङ परिवर्तन गर्न रङ पिकर प्रयोग गर्दा पनि त्यो परिवर्तन तुरुन्तै हुन्छ। तर एनिमेटेड ग्राफिक्स विरलै स्थिर रहन्छन् - सुराग नाममा छ। त्यसोभए, यदि रङ प्रणालीको अंश हो भने, त्यहाँ कुनै कारण छैन कि यसले एनिमेसन गर्न सक्दैन।
फाउन्डेसन रङ एनिमेसन गर्न, मैले पहिले यसलाई यसको OKLCH च्यानलहरूमा विभाजन गर्न आवश्यक छ- हल्कापन, क्रोमा, र रंग। तर त्यहाँ एउटा महत्त्वपूर्ण अतिरिक्त चरण छ: मैले ती मानहरूलाई टाइप गरिएको अनुकूलन गुणहरूको रूपमा दर्ता गर्न आवश्यक छ। तर यसको मतलब के हो?
पूर्वनिर्धारित रूपमा, ब्राउजरले थाहा पाउँदैन कि CSS अनुकूलन गुण मानले रङ, लम्बाइ, संख्या, वा अरू केहि पूर्ण रूपमा प्रतिनिधित्व गर्दछ। यसको मतलब प्रायः तिनीहरू एनिमेसनको समयमा सहज रूपमा अन्तर्निहित गर्न सकिँदैन, र एक मानबाट अर्कोमा जानुहोस्।
आफू अनुकूल गुण दर्ता गर्दा ब्राउजरलाई यसले प्रतिनिधित्व गर्ने मानको प्रकार र यसले समयसँगै कसरी व्यवहार गर्नुपर्छ भनी बताउँछ। यस अवस्थामा, म ब्राउजरले मेरो रङ च्यानलहरूलाई संख्याको रूपमा व्यवहार गर्न चाहन्छु ताकि तिनीहरू सजिलैसँग एनिमेसन गर्न सकून्।
@property --f-l {
वाक्य रचना: "
@property --f-c {
वाक्य रचना: "
@property --f-h {
वाक्य रचना: "
एक पटक दर्ता भएपछि, यी अनुकूलन गुणहरू नेटिभ CSS जस्तै व्यवहार गर्छन्। ब्राउजरले तिनीहरूलाई फ्रेम-द्वारा-फ्रेम अन्तर्निहित गर्न सक्छ। त्यसपछि मैले ती च्यानलहरूबाट फाउन्डेशन रङ पुन: निर्माण गर्छु: --फाउन्डेशन: oklch(var(--f-l) var(--f-c) var(--f-h));
यसले कुनै पनि अन्य संख्यात्मक मान जस्तै, फाउन्डेशन रङलाई एनिमेबल बनाउँछ। यहाँ एक सरल "सास फेर्न" एनिमेसन छ जसले समयको साथ हल्कापनलाई बिस्तारै परिवर्तन गर्दछ: @keyframes सास फेर्न { ०%, १००% { --f-l: ०.३६; } ५०% { --f-l: ०.४६; } }
.toon-title { एनिमेसन: सास 10s सहज-इन-आउट अनन्त; }
किनभने फिल, ग्रेडियन्ट र स्ट्रोकहरूमा प्रत्येक अन्य रङ --foundation बाट लिइएको हो, तिनीहरू सबै सँगै एनिमेट हुन्छन्, र केहि पनि म्यानुअल रूपमा अद्यावधिक गर्न आवश्यक छैन। एक एनिमेटेड रंग, धेरै प्रभावहरू यस प्रक्रियाको सुरुमा, मैले सोचेँ कि CSS सापेक्ष रङ मानहरूले थप सम्भावनाहरू प्रदान गर्न सक्छ र तिनीहरूलाई कार्यान्वयन गर्न सजिलो बनाउँछ। मैले भर्खरै मेरो वेबसाइटको सम्पर्क पृष्ठमा नयाँ सुनको खानी पृष्ठभूमि थपेको छु, र पहिलो पुनरावृत्तिमा तेल बत्तीहरू समावेश छन् जुन चमक र स्विंग गर्दछ।
म कसरी CSS सापेक्ष रंगहरू एनिमेसन गर्न चाहान्छु कि कसरी मेरो भित्री भागलाई बत्तीहरूका रङहरूसँग टिन्टिङ गरेर थप यथार्थवादी बनाउन सक्छ। म चाहन्थे कि तिनीहरूले तिनीहरूको वरपरको संसारलाई प्रभाव पारून्, जसरी वास्तविक प्रकाशले गर्छ। त्यसैले, धेरै रङहरू एनिमेसन गर्नुको सट्टा, मैले एउटा सानो प्रकाश प्रणाली बनाएको छु जसले केवल एउटा रङलाई एनिमेसन गर्छ।
मेरो पहिलो कार्य पृष्ठभूमि र मेरो बत्तीहरू बीच ओभरले तह स्लट गर्न थियो: <मार्ग id="overlay" fill="var(-overlay-tint)" [...] शैली="मिश्रण-मोड: रंग" />
मैले मिक्स-ब्लेन्ड-मोड: कलर प्रयोग गरें किनभने यसले अन्तर्निहित ल्युमिनेन्सलाई सुरक्षित राख्दा यसको मुनि के छ भनेर टिन्ट गर्छ। एनिमेसनहरू सक्रिय हुँदा ओभरले मात्र देखिन चाहन्छु, मैले ओभरले अप्ट-इन गरें: .svg-mine #overlay { प्रदर्शन: कुनै पनि; }
@media (prefers-reduced-motion: no-preference) { .svg-mine[data-animations=on] #overlay { प्रदर्शन: ब्लक; अस्पष्टता: 0.5; } }
ओभरले ठाउँमा थियो, तर अझै बत्तीहरूसँग जोडिएको छैन। मलाई प्रकाशको स्रोत चाहियो। मेरा बत्तीहरू सरल छन्, र प्रत्येकले एउटा सर्कल तत्व समावेश गर्दछ जुन मैले फिल्टरको साथ धमिलो पारेको छु। फिल्टरले सम्पूर्ण सर्कलमा धेरै नरम धमिलो उत्पादन गर्दछ।
ओभरले र बत्तीहरू अलग-अलग एनिमेसन गर्नुको सट्टा, म एकल "ज्वाला" रङ टोकन एनिमेस गर्छु र त्यसबाट अरू सबै प्राप्त गर्छु। पहिले, म OKLCH च्यानलहरूको लागि तीन टाइप गरिएको अनुकूलन गुणहरू दर्ता गर्छु:
@property --fl-l {
वाक्य रचना: "
मैले ती च्यानलहरूलाई एनिमेटेड गरें, जानाजानी सुन्तला तर्फ केही फ्रेमहरू धकेल्दै ताकि फ्लिकरले फायरलाइटको रूपमा स्पष्ट रूपमा पढ्छ:
@keyframes ज्वाला { ०%, १००% { --fl-l: ०.८६; --fl-c: ०.१२; --fl-h: 95; } ६% { --fl-l: ०.९१; --fl-c: ०.१०; --fl-h: 92; } १२% { --fl-l: ०.८३; --fl-c: ०.१४; --fl-h: 100; } १८% { --fl-l: ०.८८; --fl-c: ०.११; --fl-h: 94; } २४% { --fl-l: ०.८२; --fl-c: ०.१६; --fl-h: 82; } ३०% { --fl-l: ०.९०; --fl-c: ०.१२; --fl-h: 90; } ३६% { --fl-l: ०.७९; --fl-c: ०.१७; --fl-h: 76; } ४४% { --fl-l: ०.८७; --fl-c: ०.१२; --fl-h: 96; } ५२% { --fl-l: ०.८१; --fl-c: ०.१५; --fl-h: 102; } ६०% { --fl-l: ०.८९; --fl-c: ०.११; --fl-h: 93; } ६८% { --fl-l: ०.८३; --fl-c: ०.१६; --fl-h: 85; } ७६% { --fl-l: ०.९१; --fl-c: ०.१०; --fl-h: 91; } ८४% { --fl-l: ०.८५; --fl-c: ०.१४; --fl-h: 98; } ९२% {--fl-l: ०.८०; --fl-c: ०.१७; --fl-h: 74; } }
त्यसपछि मैले त्यो एनिमेसनलाई SVG मा स्कोप गरें, त्यसैले साझा चरहरू दुवै बत्ती र मेरो ओभरलेमा उपलब्ध छन्:
@media (prefers-reduced-motion: no-preference) { .svg-mine[data-animations=on] { एनिमेसन: ज्वाला 3.6s अनन्त रैखिक; अलगाव: पृथक;
/* एनिमेटेड च्यानलहरूबाट फ्लेम कलर बनाउनुहोस् */ --flame: oklch(var(-fl-l) var(-fl-c) var(--fl-h));
/* ज्वालाबाट व्युत्पन्न बत्तीको रंग */ --दीप-कोर: oklch(var(--flame) calc(l + 0.05) calc(c * 0.70) h बाट);
/* एउटै ज्वालाबाट व्युत्पन्न ओभरले टिन्ट */ --overlay-tint: oklch(var(--flame) बाट calc(l + 0.06) calc(c * 0.65) calc(h - 10)); } }
अन्तमा, मैले ती व्युत्पन्न रंगहरू चम्किलो बत्तीहरूमा लागू गरें र तिनीहरूले असर गर्ने ओभरले: @media (prefers-reduced-motion: no-preference) { .svg-mine[data-animations=on] #mine-lamp-1 > सर्कल, .svg-mine[data-animations=on] #mine-lamp-2 > सर्कल { भर्नुहोस्: var(--दीप-कोर); }
.svg-mine[data-animations=on] #overlay { प्रदर्शन: ब्लक; भर्नुहोस्: var(-overlay-tint); अस्पष्टता: 0.5; } }
जब ज्वाला सुन्तला तिर सर्छ, बत्तीहरू न्यानो हुन्छ, र दृश्य तिनीहरूसँग न्यानो हुन्छ। जब ज्वाला चिसो हुन्छ, सबै कुरा मिल्छ। सबै भन्दा राम्रो पक्ष यो हो कि केहि पनि म्यानुअल रूपमा लेखिएको छैन। यदि मैले फाउन्डेसनको रङ परिवर्तन गर्छु वा फ्लेम एनिमेसन दायराहरू ट्वीक गर्छु भने, सम्पूर्ण प्रकाश प्रणाली एकैसाथ अपडेट हुन्छ। तपाईंले मेरो वेबसाइटमा अन्तिम नतिजा हेर्न सक्नुहुन्छ। पुन: प्रयोग, पुन: प्रयोग, पुन: अवलोकन ती हन्ना-बार्बेरा एनिमेटरहरूलाई आवश्यक तत्वहरू पुन: प्रयोग गर्न बाध्य पारिएको थियो, तर म रङहरू पुन: प्रयोग गर्छु किनभने यसले मेरो कामलाई अझ सुसंगत र मर्मत गर्न सजिलो बनाउँछ। CSS सापेक्ष रंग मानहरूले मलाई अनुमति दिन्छ:
एकल आधार रंग परिभाषित गर्नुहोस्, अन्य रङहरू यससँग कसरी सम्बन्धित छन् वर्णन गर्नुहोस्, ती सम्बन्धहरूलाई जताततै पुन: प्रयोग गर्नुहोस्, र एक मान परिवर्तन गरेर प्रणाली एनिमेट गर्नुहोस्।
सापेक्ष रंगले विषयवस्तुलाई सजिलो बनाउँदैन। यसले सोच्ने तरिकालाई प्रोत्साहित गर्दछ जहाँ रङ, जस्तै गति, जानाजानी हो - र जहाँ एक मान परिवर्तनले यसको तलको कामलाई पुन: लेख्न बिना सम्पूर्ण दृश्यलाई रूपान्तरण गर्न सक्छ।
