నేను ఇటీవల నా వెబ్సైట్లోని యానిమేటెడ్ గ్రాఫిక్లను కొత్త థీమ్ మరియు మార్గదర్శక పాత్రల సమూహంతో రిఫ్రెష్ చేసాను, ఈ సిరీస్లో నేను భాగస్వామ్యం చేసిన అనేక సాంకేతికతలను ఆచరణలో పెట్టాను. ఎవరైనా వారితో పరస్పర చర్య చేసినప్పుడు లేదా రోజులోని వేర్వేరు సమయాల్లో నా కొన్ని యానిమేషన్లు రూపాన్ని మారుస్తాయి.
నా బ్లాగ్ పేజీల పైన ఉన్న గ్రాఫిక్లోని రంగులు ప్రతిరోజూ ఉదయం నుండి రాత్రి వరకు మారుతూ ఉంటాయి. తర్వాత, మంచు మోడ్ ఉంది, ఇది చల్లటి రంగులను మరియు శీతాకాలపు థీమ్ను జోడిస్తుంది, ఓవర్లే లేయర్ మరియు బ్లెండింగ్ మోడ్ సౌజన్యంతో.
దీనిపై పని చేస్తున్నప్పుడు, ప్రక్రియను సులభతరం చేస్తున్నప్పుడు CSS సంబంధిత రంగు విలువలు నాకు మరింత నియంత్రణను ఇవ్వగలవా అని నేను ఆశ్చర్యపోయాను. గమనిక: ఈ ట్యుటోరియల్లో, నేను సంబంధిత రంగు విలువలు మరియు థీమింగ్ గ్రాఫిక్స్ మరియు యానిమేషన్ల కోసం OKLCH కలర్ స్పేస్పై దృష్టి పెడతాను. మీరు సాపేక్ష రంగులోకి లోతుగా డైవ్ చేయాలనుకుంటే, అహ్మద్ షాదీద్ అద్భుతమైన ఇంటరాక్టివ్ గైడ్ను సృష్టించారు. కలర్ స్పేస్లు, గామట్లు మరియు OKLCH విషయానికొస్తే, మా స్వంత జియోఫ్ గ్రాహం వాటి గురించి రాశారు.
మూలకాల యొక్క పునరావృత ఉపయోగం కీలకం. సాధ్యమైనప్పుడల్లా బ్యాక్గ్రౌండ్లు మళ్లీ ఉపయోగించబడతాయి, జూమ్లు మరియు ఓవర్లేలు ఒకే కళాకృతి నుండి కొత్త దృశ్యాలను రూపొందించడంలో సహాయపడతాయి. ఇది అవసరం నుండి పుట్టింది, కానీ ఇది వ్యక్తిగత సన్నివేశాల కంటే సిరీస్ పరంగా ఆలోచించడాన్ని ప్రోత్సహించింది. రంగుల పలకలను మాన్యువల్గా అప్డేట్ చేయడంలో సమస్య నేరుగా నా ఛాలెంజ్కి వెళ్దాం. ఇలాంటి టూన్ టైటిల్స్లో — 1959 యోగి బేర్ షో ఎపిసోడ్ “లుల్లబై-బై బేర్” ఆధారంగా — మరియు సాధారణంగా నా పని, ప్యాలెట్లు కొన్ని ఎంపిక చేసిన రంగులకు పరిమితం చేయబడ్డాయి.
మరిన్ని రంగులను జోడించకుండా ప్యాలెట్ను విస్తరించడానికి నేను నా "ఫౌండేషన్" రంగు అని పిలిచే దాని నుండి షేడ్స్ మరియు టింట్లను సృష్టిస్తాను.
స్కెచ్లో, నేను HSL కలర్ స్పేస్లో పని చేస్తాను, కాబట్టి ఈ ప్రక్రియలో నా ఫౌండేషన్ రంగు యొక్క తేలిక విలువను పెంచడం లేదా తగ్గించడం జరుగుతుంది. నిజాయితీగా, ఇది కష్టమైన పని కాదు - కానీ వేరే పునాది రంగును ఎంచుకోవడానికి సరికొత్త షేడ్స్ మరియు టింట్లను సృష్టించడం అవసరం. మాన్యువల్గా, మళ్లీ మళ్లీ చేయడం త్వరగా శ్రమతో కూడుకున్నది.
నేను HSL — H (హ్యూ), S (సంతృప్తత) మరియు L (తేలికతనం) — రంగు స్థలాన్ని ప్రస్తావించాను, కానీ రంగును వివరించడానికి ఇది అనేక మార్గాలలో ఒకటి. RGB — R (ఎరుపు), G (ఆకుపచ్చ), B (నీలం) - బహుశా చాలా సుపరిచితం, కనీసం దాని హెక్స్ రూపంలో ఉంటుంది. LAB — L (తేలికతనం), A (ఆకుపచ్చ-ఎరుపు), B (నీలం-పసుపు) - మరియు కొత్తది, కానీ ఇప్పుడు విస్తృతంగా మద్దతునిచ్చే LCH — L (తేలికతనం), C (క్రోమా), H (వర్ణం) — మోడల్ కూడా దాని OKLCH రూపంలో ఉంది. LCHతో — ప్రత్యేకంగా CSSలో OKLCH — నేను నా పునాది రంగు యొక్క తేలిక విలువను సర్దుబాటు చేయగలను.
లేదా నేను దాని క్రోమాని మార్చగలను. LCH క్రోమా మరియు HSL సంతృప్తత రెండూ రంగు యొక్క తీవ్రత లేదా గొప్పదనాన్ని వివరిస్తాయి, అయితే అవి వివిధ మార్గాల్లో చేస్తాయి. LCH నాకు విస్తృత శ్రేణిని మరియు రంగుల మధ్య మరింత ఊహించదగిన కలయికను అందిస్తుంది.
నేను అదే తేలిక మరియు క్రోమా విలువలను పంచుకునే రంగుల ప్యాలెట్ని సృష్టించడానికి రంగును కూడా మార్చగలను. HSL మరియు LCH రెండింటిలోనూ, హ్యూ స్పెక్ట్రం ఎరుపు రంగులో ప్రారంభమవుతుంది, ఆకుపచ్చ మరియు నీలం ద్వారా కదులుతుంది మరియు ఎరుపు రంగుకు తిరిగి వస్తుంది.
OKLCH ఎందుకు మార్చబడింది, నేను రంగు గురించి ఎలా ఆలోచిస్తున్నాను డిజైన్ సాధనాలు - స్కెచ్తో సహా - గుర్తించబడనప్పటికీ, OKLCH రంగు స్థలం కోసం బ్రౌజర్ మద్దతు ఇప్పుడు విస్తృతంగా ఉంది. అదృష్టవశాత్తూ, అది OKLCHని ఉపయోగించకుండా మిమ్మల్ని ఆపదు. బ్రౌజర్లు మీ కోసం Hex, HSL, LAB మరియు RGB విలువలను సంతోషంగా OKLCHగా మారుస్తాయి. మీరు హెక్స్తో సహా ఏదైనా స్థలంలో పునాది రంగుతో CSS అనుకూల ప్రాపర్టీని నిర్వచించవచ్చు: /* పునాది రంగు */ --ఫౌండేషన్: #5accd6;
దాని నుండి ఉద్భవించిన ఏవైనా రంగులు స్వయంచాలకంగా OKLCH లోకి మార్చబడతాయి: --Foundation-light: oklch(var(--Foundation) నుండి [...]; } --Foundation-mid: oklch(var(--Foundation) నుండి [...]; } --Foundation-dark: oklch(var(--Foundation) నుండి [...]; }
డిజైన్ సిస్టమ్గా సాపేక్ష రంగు సాపేక్ష రంగు గురించి ఇలా చెప్పండి: "ఈ రంగును తీసుకోండి, దాన్ని సర్దుబాటు చేయండి, ఆపై నాకు ఫలితం ఇవ్వండి." రంగును సర్దుబాటు చేయడానికి రెండు మార్గాలు ఉన్నాయి: సంపూర్ణ మార్పులు మరియు అనుపాత మార్పులు. అవి కోడ్లో ఒకేలా కనిపిస్తాయి, కానీ మీరు ఫౌండేషన్ రంగులను మార్చుకోవడం ప్రారంభించిన తర్వాత చాలా భిన్నంగా ప్రవర్తిస్తారు. ఆ వ్యత్యాసాన్ని అర్థం చేసుకోవడం సాపేక్ష రంగును వ్యవస్థగా మార్చగలదు. /* పునాది రంగు */ --ఫౌండేషన్: #5accd6;
ఉదాహరణకు, నా పునాది రంగు యొక్క తేలిక విలువ 0.7837, అయితే ముదురు వెర్షన్ 0.5837 విలువను కలిగి ఉంటుంది. వ్యత్యాసాన్ని గణించడానికి, నేను అధిక విలువ నుండి తక్కువ విలువను తీసివేసి, calc() ఫంక్షన్ని ఉపయోగించి ఫలితాన్ని వర్తింపజేస్తాను: --పునాది-చీకటి: oklch(var(--ఫౌండేషన్) నుండి calc (l - 0.20) c h);
తేలికపాటి రంగును సాధించడానికి, నేను బదులుగా వ్యత్యాసాన్ని జోడిస్తాను: --ఫౌండేషన్-లైట్: oklch(var(--ఫౌండేషన్) నుండి calc (l + 0.10) c h);
క్రోమాసర్దుబాట్లు అదే విధానాన్ని అనుసరిస్తాయి. నా పునాది రంగు యొక్క తీవ్రతను 0.1035 నుండి 0.0035కి తగ్గించడానికి, నేను ఒక విలువను మరొక దాని నుండి తీసివేస్తాను: oklch(var(--ఫౌండేషన్) నుండి l calc (c - 0.10) h);
రంగుల ప్యాలెట్ని రూపొందించడానికి, నా పునాది రంగు (200) మరియు నా కొత్త రంగు (260) యొక్క రంగు విలువ మధ్య వ్యత్యాసాన్ని నేను గణిస్తాను: oklch(var(--ఫౌండేషన్) నుండి l c calc(h + 60));
ఆ లెక్కలు పక్కా. నేను నిర్ణీత మొత్తాన్ని తీసివేసినప్పుడు, "ఎల్లప్పుడూ ఇంత ఎక్కువ తీసివేయి" అని నేను ప్రభావవంతంగా చెబుతున్నాను. స్థిర విలువలను జోడించేటప్పుడు ఇది వర్తిస్తుంది: calc(c - 0.10) calc(c + 0.10)
నేను ఈ విధానం యొక్క పరిమితులను కఠినంగా నేర్చుకున్నాను. నేను స్థిర క్రోమా విలువలను తీసివేయడంపై ఆధారపడినప్పుడు, నేను పునాదిని మార్చిన వెంటనే రంగులు బూడిద రంగులోకి పడిపోయాయి. ఒక రంగు కోసం పని చేసే పాలెట్ మరొక రంగు కోసం విడిపోయింది. గుణకారం భిన్నంగా ప్రవర్తిస్తుంది. నేను క్రోమాను గుణించినప్పుడు, నేను బ్రౌజర్కి చెబుతున్నాను: "ఈ రంగు యొక్క తీవ్రతను ఒక నిష్పత్తిలో తగ్గించండి." పునాది మారినప్పుడు కూడా రంగుల మధ్య సంబంధం చెక్కుచెదరకుండా ఉంటుంది: calc(c * 0.10)
మై మూవ్ ఇట్, స్కేల్ ఇట్, రొటేట్ ఇట్ రూల్స్
తేలికగా తరలించు (జోడించడం లేదా తీసివేయడం), స్కేల్ క్రోమా (గుణించడం), రంగును తిప్పండి (డిగ్రీలను జోడించండి లేదా తీసివేయండి).
నేను క్రోమాను స్కేల్ చేస్తున్నాను ఎందుకంటే నేను తీవ్రత మార్పులు మూల రంగుకు అనులోమానుపాతంలో ఉండాలనుకుంటున్నాను. రంగు సంబంధాలు భ్రమణంగా ఉంటాయి, కాబట్టి రంగును గుణించడంలో అర్థం లేదు. తేలిక అనేది గ్రహణశక్తి మరియు సంపూర్ణమైనది - దానిని గుణించడం తరచుగా బేసి ఫలితాలను ఇస్తుంది.
ఒక రంగు నుండి మొత్తం థీమ్ వరకు సాపేక్ష రంగు నాకు పునాది రంగును నిర్వచించడానికి మరియు నాకు అవసరమైన ప్రతి ఇతర రంగును రూపొందించడానికి అనుమతిస్తుంది - పూరకాలు, స్ట్రోక్లు, గ్రేడియంట్ స్టాప్లు, షాడోలు - దాని నుండి. ఆ సమయంలో, రంగు పాలెట్గా ఆగిపోయి, సిస్టమ్గా ప్రారంభమవుతుంది. SVG ఇలస్ట్రేషన్లు పూరకాలు, స్ట్రోక్లు మరియు గ్రేడియంట్లలో అదే కొన్ని రంగులను మళ్లీ ఉపయోగించుకుంటాయి. సాపేక్ష రంగు ఆ సంబంధాలను ఒకసారి నిర్వచించటానికి మరియు వాటిని ప్రతిచోటా తిరిగి ఉపయోగించడానికి మిమ్మల్ని అనుమతిస్తుంది - యానిమేటర్లు కొత్త దృశ్యాలను సృష్టించడానికి నేపథ్యాలను తిరిగి ఉపయోగించినట్లు.
పునాది రంగును ఒకసారి మార్చండి మరియు ప్రతి ఉత్పన్నమైన రంగు స్వయంచాలకంగా నవీకరించబడుతుంది, చేతితో దేనినీ తిరిగి లెక్కించకుండా. యానిమేటెడ్ గ్రాఫిక్స్ వెలుపల, బటన్లు మరియు లింక్ల వంటి ఇంటరాక్టివ్ ఎలిమెంట్ల స్థితులకు రంగులను నిర్వచించడానికి నేను ఇదే విధానాన్ని ఉపయోగించగలను. నా “లల్లబై-బై బేర్” టూన్ టైటిల్లో నేను ఉపయోగించిన పునాది రంగు నీలం రంగులో నీలం రంగులో ఉంది. నేపథ్యం నా ఫౌండేషన్ మరియు ముదురు వెర్షన్ మధ్య రేడియల్ గ్రేడియంట్.
పూర్తిగా భిన్నమైన మూడ్లతో ప్రత్యామ్నాయ వెర్షన్లను రూపొందించడానికి, నేను పునాది రంగును మాత్రమే మార్చాలి: --ఫౌండేషన్: #5accd6; --grad-end: var(--Foundation); --grad-start: oklch(var(--Foundation) నుండి calc (l - 0.2357) calc (c * 0.833) h);
రంగు విలువలను డూప్లికేట్ చేయకుండా ఆ అనుకూల లక్షణాలను నా SVG గ్రేడియంట్కి బంధించడానికి, నేను హార్డ్-కోడెడ్ స్టాప్-కలర్ విలువలను ఇన్లైన్ స్టైల్స్తో భర్తీ చేసాను:
తర్వాత, నా టూన్ టెక్స్ట్ ఎల్లప్పుడూ నేను ఎంచుకున్న ఫౌండేషన్ కలర్తో విరుద్ధంగా ఉండేలా చూసుకోవాలి. 180డిగ్రీల రంగు భ్రమణం పరిపూరకరమైన రంగును ఉత్పత్తి చేస్తుంది, అది ఖచ్చితంగా పాప్ అవుతుంది - కానీ అసౌకర్యంగా కంపిస్తుంది: .టెక్స్ట్-లైట్ { పూరించండి: oklch(var(--ఫౌండేషన్) నుండి l c calc(h + 180)); }
90° షిఫ్ట్ పూర్తిగా కాంప్లిమెంటరీ లేకుండా స్పష్టమైన ద్వితీయ రంగును ఉత్పత్తి చేస్తుంది: .టెక్స్ట్-లైట్ { పూరించండి: oklch(var(--ఫౌండేషన్) నుండి l c కాల్క్ (h - 90)); }
క్విక్ డ్రా మెక్గ్రా యొక్క 1959 టూన్ టైటిల్ "ఎల్ కబాంగ్" యొక్క నా వినోదం అదే పద్ధతులను ఉపయోగిస్తుంది కానీ మరింత వైవిధ్యమైన ప్యాలెట్తో ఉంటుంది. ఉదాహరణకు, పునాది రంగు మరియు ముదురు నీడ మధ్య మరొక రేడియల్ గ్రేడియంట్ ఉంది.
బ్యాక్గ్రౌండ్లో ఉన్న భవనం మరియు చెట్టు ఒకే పునాది రంగు యొక్క విభిన్న షేడ్స్. ఆ మార్గాల కోసం, నాకు రెండు అదనపు పూరక రంగులు అవసరం: .bg-మధ్య { పూరించండి: 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 { వాక్యనిర్మాణం: "<సంఖ్య>"; వారసత్వంగా: నిజం; ప్రారంభ-విలువ: 0.40; }
@property --f-c { వాక్యనిర్మాణం: "<సంఖ్య>"; వారసత్వంగా: నిజం; ప్రారంభ-విలువ: 0.11; }
@property --f-h { వాక్యనిర్మాణం: "<సంఖ్య>"; వారసత్వంగా: నిజం; ప్రారంభ-విలువ: 305; }
నమోదు చేసిన తర్వాత, ఈ అనుకూల లక్షణాలు స్థానిక CSS వలె ప్రవర్తిస్తాయి. బ్రౌజర్ వాటిని ఫ్రేమ్-బై-ఫ్రేమ్ ఇంటర్పోలేట్ చేయగలదు. నేను ఆ ఛానెల్ల నుండి పునాది రంగును పునర్నిర్మించాను: --ఫౌండేషన్: oklch(var(--f-l) var(--f-c) var(--f-h));
ఇది ఏ ఇతర సంఖ్యా విలువ వలెనే పునాది రంగును యానిమేటబుల్గా మార్చుతుంది. కాలక్రమేణా తేలికను సున్నితంగా మార్చే సరళమైన "శ్వాస" యానిమేషన్ ఇక్కడ ఉంది: @keyframes ఊపిరి { 0%, 100% { --f-l: 0.36; } 50% { --f-l: 0.46; } }
.toon-title { యానిమేషన్: బ్రీత్ 10s ఈజ్-ఇన్-అవుట్ అనంతం; }
పూరణలు, గ్రేడియంట్లు మరియు స్ట్రోక్లలోని ప్రతి ఇతర రంగు --ఫౌండేషన్ నుండి ఉద్భవించినందున, అవన్నీ కలిసి యానిమేట్ చేయబడతాయి మరియు ఏదీ మాన్యువల్గా అప్డేట్ చేయవలసిన అవసరం లేదు. ఒక యానిమేటెడ్ రంగు, అనేక ప్రభావాలు ఈ ప్రక్రియ ప్రారంభంలో, CSS సాపేక్ష రంగు విలువలు వాటిని అమలు చేయడానికి సులభతరం చేస్తున్నప్పుడు మరిన్ని అవకాశాలను అందించగలవా అని నేను ఆశ్చర్యపోయాను. నేను ఇటీవల నా వెబ్సైట్ సంప్రదింపు పేజీకి కొత్త బంగారు గని నేపథ్యాన్ని జోడించాను మరియు మొదటి పునరావృతంలో మెరుస్తున్న మరియు స్వింగ్ చేసే నూనె దీపాలు ఉన్నాయి.
CSS సంబంధిత రంగులను యానిమేట్ చేయడం వల్ల గని ఇంటీరియర్ను ల్యాంప్స్ నుండి రంగులతో టిన్టింగ్ చేయడం ద్వారా మరింత వాస్తవికంగా ఎలా మార్చగలదో నేను అన్వేషించాలనుకుంటున్నాను. వారు తమ చుట్టూ ఉన్న ప్రపంచాన్ని, నిజమైన కాంతిని ప్రభావితం చేయాలని నేను కోరుకున్నాను. కాబట్టి, బహుళ రంగులను యానిమేట్ చేయడం కంటే, నేను ఒక రంగును యానిమేట్ చేసే చిన్న లైటింగ్ సిస్టమ్ను నిర్మించాను.
నా మొదటి పని బ్యాక్గ్రౌండ్ మరియు నా ల్యాంప్ల మధ్య అతివ్యాప్తి పొరను స్లాట్ చేయడం: <మార్గం id="ఓవర్లే" fill="var(--overlay-tint)" [...] style="mix-blend-mode: color" />
నేను మిక్స్-బ్లెండ్-మోడ్ని ఉపయోగించాను: రంగు ఎందుకంటే అది అంతర్లీన కాంతిని సంరక్షించేటప్పుడు దాని క్రింద ఉన్నదానిని లేపుతుంది. యానిమేషన్లు ఆన్లో ఉన్నప్పుడు మాత్రమే ఓవర్లే కనిపించాలని నేను కోరుకుంటున్నాను కాబట్టి, నేను ఓవర్లే ఆప్ట్-ఇన్ చేసాను: .svg-mine #overlay { ప్రదర్శన: ఏదీ లేదు; }
@media (prefers-reduced-motion: no-preference) { .svg-mine[data-animations=on] #overlay { ప్రదర్శన: బ్లాక్; అస్పష్టత: 0.5; } }
ఓవర్లే స్థానంలో ఉంది, కానీ ఇంకా దీపాలకు కనెక్ట్ కాలేదు. నాకు కాంతి మూలం కావాలి. నా ల్యాంప్లు చాలా సరళమైనవి మరియు ప్రతి దానిలో నేను ఫిల్టర్తో బ్లర్ చేసిన సర్కిల్ ఎలిమెంట్ ఉంటుంది. ఫిల్టర్ మొత్తం సర్కిల్పై చాలా మృదువైన బ్లర్ను ఉత్పత్తి చేస్తుంది.
<ఫిల్టర్ id="ల్యాంప్-గ్లో-1" x="-120%" y="-120%" వెడల్పు="340%" ఎత్తు="340%">
ఓవర్లే మరియు ల్యాంప్లను విడివిడిగా యానిమేట్ చేయడానికి బదులుగా, నేను ఒకే "ఫ్లేమ్" కలర్ టోకెన్ను యానిమేట్ చేస్తాను మరియు దాని నుండి మిగతావన్నీ పొందుతాను. మొదట, నేను OKLCH ఛానెల్ల కోసం టైప్ చేసిన మూడు అనుకూల లక్షణాలను నమోదు చేస్తాను: @property --fl-l { వాక్యనిర్మాణం: "<సంఖ్య>"; వారసత్వంగా: నిజం; ప్రారంభ-విలువ: 0.86; } @property --fl-c { వాక్యనిర్మాణం: "<సంఖ్య>"; వారసత్వంగా: నిజం; ప్రారంభ-విలువ: 0.12; } @property --fl-h { వాక్యనిర్మాణం: "<సంఖ్య>"; వారసత్వంగా: నిజం; ప్రారంభ-విలువ: 95; }
నేను ఆ ఛానెల్లను యానిమేట్ చేసాను, ఉద్దేశపూర్వకంగా కొన్ని ఫ్రేమ్లను నారింజ రంగులోకి నెట్టాను, తద్వారా ఫ్లికర్ ఫైర్లైట్గా స్పష్టంగా చదవబడుతుంది:
@keyframes జ్వాల { 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; } 92% {--fl-l: 0.80; --fl-c: 0.17; --fl-h: 74; } }
అప్పుడు నేను ఆ యానిమేషన్ని SVGకి స్కోప్ చేసాను, కాబట్టి షేర్డ్ వేరియబుల్స్ లాంప్స్ మరియు నా ఓవర్లే రెండింటికీ అందుబాటులో ఉన్నాయి:
@media (prefers-reduced-motion: no-preference) { .svg-mine[data-animations=on] { యానిమేషన్: జ్వాల 3.6s అనంతం సరళ; ఒంటరిగా: ఒంటరిగా;
/* యానిమేటెడ్ ఛానెల్ల నుండి జ్వాల రంగును రూపొందించండి */ --జ్వాల: oklch(var(--fl-l) var(--fl-c) var(--fl-h));
/* జ్వాల నుండి వచ్చిన దీపం రంగు */ --లాంప్-కోర్: oklch(var(--జ్వాల) calc(l + 0.05) calc(c * 0.70) h);
/* అదే జ్వాల నుండి ఉద్భవించిన అతివ్యాప్తి రంగు */ --ఓవర్లే-టిన్ట్: oklch(var(--జ్వాల) నుండి 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 (--ఓవర్లే-టిన్ట్); అస్పష్టత: 0.5; } }
జ్వాల నారింజ రంగులోకి మారినప్పుడు, దీపాలు వేడెక్కుతాయి మరియు వాటితో దృశ్యం వేడెక్కుతుంది. మంట చల్లబడినప్పుడు, ప్రతిదీ కలిసి స్థిరపడుతుంది. ఉత్తమ భాగం ఏదీ మానవీయంగా వ్రాయబడలేదు. నేను ఫౌండేషన్ రంగును మార్చినట్లయితే లేదా ఫ్లేమ్ యానిమేషన్ పరిధులను సర్దుబాటు చేస్తే, మొత్తం లైటింగ్ సిస్టమ్ ఏకకాలంలో అప్డేట్ అవుతుంది. మీరు నా వెబ్సైట్లో తుది ఫలితాన్ని చూడవచ్చు. పునర్వినియోగం, పునర్వినియోగం, మళ్లీ సందర్శించడం ఆ హన్నా-బార్బెరా యానిమేటర్లు తప్పనిసరిగా ఎలిమెంట్లను తిరిగి తయారు చేయవలసి వచ్చింది, కానీ నేను రంగులను మళ్లీ ఉపయోగిస్తాను ఎందుకంటే ఇది నా పనిని మరింత స్థిరంగా మరియు సులభంగా నిర్వహించేలా చేస్తుంది. CSS సంబంధిత రంగు విలువలు నన్ను వీటిని అనుమతిస్తాయి:
ఒకే పునాది రంగును నిర్వచించండి, ఇతర రంగులు దానితో ఎలా సంబంధం కలిగి ఉన్నాయో వివరించండి, ప్రతిచోటా ఆ సంబంధాలను మళ్లీ ఉపయోగించుకోండి మరియు ఒక విలువను మార్చడం ద్వారా సిస్టమ్ను యానిమేట్ చేయండి.
సాపేక్ష రంగు థీమింగ్ను సులభతరం చేయదు. చలనం వంటి రంగు ఉద్దేశపూర్వకంగా ఉండే ఆలోచనా విధానాన్ని ఇది ప్రోత్సహిస్తుంది - మరియు ఒక విలువను మార్చడం వలన దాని క్రింద ఉన్న పనిని తిరిగి వ్రాయకుండా మొత్తం దృశ్యాన్ని మార్చవచ్చు.
