ഈ സീരീസിൽ ഞാൻ പങ്കുവെച്ച ടെക്നിക്കുകൾ പ്രയോഗത്തിൽ വരുത്തിക്കൊണ്ട് ഒരു പുതിയ തീമും ഒരു കൂട്ടം പയനിയറിംഗ് കഥാപാത്രങ്ങളും ഉപയോഗിച്ച് ഞാൻ അടുത്തിടെ എൻ്റെ വെബ്സൈറ്റിലെ ആനിമേറ്റഡ് ഗ്രാഫിക്സ് പുതുക്കി. ആരെങ്കിലും അവരുമായി ഇടപഴകുമ്പോഴോ ദിവസത്തിൻ്റെ വ്യത്യസ്ത സമയങ്ങളിലോ എൻ്റെ ചില ആനിമേഷനുകൾ രൂപം മാറുന്നു.
എൻ്റെ ബ്ലോഗ് പേജുകൾക്ക് മുകളിലുള്ള ഗ്രാഫിക്കിലെ നിറങ്ങൾ എല്ലാ ദിവസവും രാവിലെ മുതൽ രാത്രി വരെ മാറുന്നു. പിന്നെ, ഒരു ഓവർലേ ലെയറിൻ്റെയും ബ്ലെൻഡിംഗ് മോഡിൻ്റെയും കടപ്പാടോടെ, തണുത്ത നിറങ്ങളും ശൈത്യകാല തീമും ചേർക്കുന്ന സ്നോ മോഡ് ഉണ്ട്.
ഇതിൽ പ്രവർത്തിക്കുമ്പോൾ, പ്രക്രിയ ലളിതമാക്കുന്നതിനൊപ്പം CSS ആപേക്ഷിക വർണ്ണ മൂല്യങ്ങൾക്ക് എനിക്ക് കൂടുതൽ നിയന്ത്രണം നൽകാനാകുമോ എന്ന് ഞാൻ ചിന്തിക്കാൻ തുടങ്ങി. ശ്രദ്ധിക്കുക: ഈ ട്യൂട്ടോറിയലിൽ, ആപേക്ഷിക വർണ്ണ മൂല്യങ്ങളിലും തീമിംഗ് ഗ്രാഫിക്സിനും ആനിമേഷനുകൾക്കുമുള്ള OKLCH കളർ സ്പെയ്സിലും ഞാൻ ശ്രദ്ധ കേന്ദ്രീകരിക്കും. നിങ്ങൾക്ക് ആപേക്ഷിക നിറത്തിലേക്ക് ആഴ്ന്നിറങ്ങണമെങ്കിൽ, അഹ്മദ് ഷാദീദ് ഒരു മികച്ച സംവേദനാത്മക ഗൈഡ് സൃഷ്ടിച്ചു. കളർ സ്പേസുകൾ, ഗാമറ്റുകൾ, OKLCH എന്നിവയെ സംബന്ധിച്ചിടത്തോളം, നമ്മുടെ സ്വന്തം ജെഫ് ഗ്രഹാം അവരെക്കുറിച്ച് എഴുതി.
മൂലകങ്ങളുടെ ആവർത്തിച്ചുള്ള ഉപയോഗം പ്രധാനമാണ്. സാധ്യമാകുമ്പോഴെല്ലാം പശ്ചാത്തലങ്ങൾ വീണ്ടും ഉപയോഗിച്ചു, സൂമുകളും ഓവർലേകളും ഒരേ കലാസൃഷ്ടിയിൽ നിന്ന് പുതിയ ദൃശ്യങ്ങൾ നിർമ്മിക്കാൻ സഹായിക്കുന്നു. ഇത് ആവശ്യകതയിൽ നിന്നാണ് ജനിച്ചത്, പക്ഷേ വ്യക്തിഗത രംഗങ്ങളേക്കാൾ പരമ്പരയുടെ അടിസ്ഥാനത്തിൽ ചിന്തിക്കാൻ ഇത് പ്രോത്സാഹിപ്പിക്കുകയും ചെയ്തു. വർണ്ണ പാലറ്റുകൾ സ്വമേധയാ അപ്ഡേറ്റ് ചെയ്യുന്നതിലെ പ്രശ്നം നമുക്ക് നേരെ എൻ്റെ വെല്ലുവിളിയിലേക്ക് കടക്കാം. ഇതുപോലുള്ള ടൂൺ ശീർഷകങ്ങളിൽ - 1959-ലെ യോഗി ബിയർ ഷോ എപ്പിസോഡ് "ലല്ലബൈ-ബൈ ബിയർ" അടിസ്ഥാനമാക്കി - പൊതുവെ, പാലറ്റുകൾ തിരഞ്ഞെടുത്ത കുറച്ച് നിറങ്ങളിൽ മാത്രമായി പരിമിതപ്പെടുത്തിയിരിക്കുന്നു.
കൂടുതൽ നിറങ്ങൾ ചേർക്കാതെ പാലറ്റ് വിപുലീകരിക്കാൻ ഞാൻ എൻ്റെ "അടിത്തറ" നിറം എന്ന് വിളിക്കുന്നതിൽ നിന്ന് ഷേഡുകളും ടിൻ്റുകളും സൃഷ്ടിക്കുന്നു.
സ്കെച്ചിൽ, ഞാൻ എച്ച്എസ്എൽ കളർ സ്പെയ്സിലാണ് പ്രവർത്തിക്കുന്നത്, അതിനാൽ ഈ പ്രക്രിയയിൽ എൻ്റെ ഫൗണ്ടേഷൻ കളറിൻ്റെ ലൈറ്റ്നെസ് മൂല്യം കൂട്ടുകയോ കുറയ്ക്കുകയോ ചെയ്യുന്നു. സത്യസന്ധമായി, ഇത് ബുദ്ധിമുട്ടുള്ള കാര്യമല്ല - എന്നാൽ മറ്റൊരു അടിസ്ഥാന നിറം തിരഞ്ഞെടുക്കുന്നതിന് ഒരു പുതിയ ഷേഡുകളും ടിൻ്റുകളും സൃഷ്ടിക്കേണ്ടതുണ്ട്. അത് സ്വമേധയാ ചെയ്യുന്നത്, വീണ്ടും വീണ്ടും, പെട്ടെന്ന് ശ്രമകരമാകും.
ഞാൻ HSL - H (ഹ്യൂ), S (സാച്ചുറേഷൻ), എൽ (ലൈറ്റ്നസ്) - കളർ സ്പേസ് എന്നിവ പരാമർശിച്ചു, എന്നാൽ ഇത് നിറം വിവരിക്കുന്നതിനുള്ള നിരവധി മാർഗങ്ങളിൽ ഒന്ന് മാത്രമാണ്. RGB - R (ചുവപ്പ്), G (പച്ച), B (നീല) - ഒരുപക്ഷേ ഏറ്റവും പരിചിതമാണ്, കുറഞ്ഞത് അതിൻ്റെ ഹെക്സ് രൂപത്തിൽ. LAB - L (ഇളം), A (പച്ച-ചുവപ്പ്), B (നീല-മഞ്ഞ) - കൂടാതെ പുതിയതും എന്നാൽ ഇപ്പോൾ വ്യാപകമായി പിന്തുണയ്ക്കുന്ന LCH - L (ലൈറ്റ്നസ്), C (ക്രോമ), H (ഹ്യൂ) - മോഡലും അതിൻ്റെ OKLCH രൂപത്തിൽ ഉണ്ട്. LCH ഉപയോഗിച്ച് - പ്രത്യേകിച്ച് CSS-ൽ OKLCH - എനിക്ക് എൻ്റെ ഫൗണ്ടേഷൻ വർണ്ണത്തിൻ്റെ ലൈറ്റ്നെസ് മൂല്യം ക്രമീകരിക്കാൻ കഴിയും.
അല്ലെങ്കിൽ എനിക്ക് അതിൻ്റെ ക്രോമ മാറ്റാം. എൽസിഎച്ച് ക്രോമയും എച്ച്എസ്എൽ സാച്ചുറേഷനും ഒരു വർണ്ണത്തിൻ്റെ തീവ്രതയോ സമ്പന്നതയോ വിവരിക്കുന്നു, എന്നാൽ അവ വ്യത്യസ്ത രീതികളിൽ ചെയ്യുന്നു. LCH എനിക്ക് വിശാലമായ ശ്രേണിയും നിറങ്ങൾക്കിടയിൽ കൂടുതൽ പ്രവചിക്കാവുന്ന മിശ്രിതവും നൽകുന്നു.
ഒരേ പ്രകാശവും ക്രോമ മൂല്യങ്ങളും പങ്കിടുന്ന നിറങ്ങളുടെ ഒരു പാലറ്റ് സൃഷ്ടിക്കാൻ എനിക്ക് നിറം മാറ്റാനും കഴിയും. എച്ച്എസ്എൽ, എൽസിഎച്ച് എന്നിവയിൽ, ഹ്യൂ സ്പെക്ട്രം ചുവപ്പിൽ ആരംഭിക്കുന്നു, പച്ച, നീല എന്നിവയിലൂടെ നീങ്ങുകയും ചുവപ്പിലേക്ക് മടങ്ങുകയും ചെയ്യുന്നു.
എന്തുകൊണ്ടാണ് OKLCH വർണ്ണത്തെക്കുറിച്ച് ഞാൻ ചിന്തിക്കുന്നത് എങ്ങനെ മാറ്റി ഡിസൈൻ ടൂളുകൾ - സ്കെച്ച് ഉൾപ്പെടെ - പിടികിട്ടിയില്ലെങ്കിലും, OKLCH കളർ സ്പേസിനുള്ള ബ്രൗസർ പിന്തുണ ഇപ്പോൾ വ്യാപകമാണ്. ഭാഗ്യവശാൽ, അത് OKLCH ഉപയോഗിക്കുന്നതിൽ നിന്ന് നിങ്ങളെ തടയില്ല. ബ്രൗസറുകൾ നിങ്ങൾക്കായി Hex, HSL, LAB, RGB മൂല്യങ്ങൾ സന്തോഷപൂർവ്വം OKLCH ആക്കി മാറ്റും. Hex ഉൾപ്പെടെ ഏത് സ്ഥലത്തും അടിസ്ഥാന നിറമുള്ള ഒരു 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 കാൽക് (h + 60));
ആ കണക്കുകൂട്ടലുകൾ പൂർണ്ണമാണ്. ഞാൻ ഒരു നിശ്ചിത തുക കുറയ്ക്കുമ്പോൾ, "എപ്പോഴും ഇത്രയും കുറയ്ക്കുക" എന്ന് ഞാൻ ഫലപ്രദമായി പറയുന്നു. സ്ഥിര മൂല്യങ്ങൾ ചേർക്കുമ്പോൾ ഇത് ബാധകമാണ്: കാൽക് (c - 0.10) calc(c + 0.10)
ഈ സമീപനത്തിൻ്റെ പരിധി ഞാൻ കഠിനമായി പഠിച്ചു. സ്ഥിരമായ ക്രോമ മൂല്യങ്ങൾ കുറയ്ക്കുന്നതിൽ ഞാൻ ആശ്രയിച്ചപ്പോൾ, അടിസ്ഥാനം മാറ്റിയ ഉടൻ തന്നെ നിറങ്ങൾ ചാരനിറത്തിലേക്ക് ചുരുങ്ങി. ഒരു നിറത്തിന് വേണ്ടി പ്രവർത്തിക്കുന്ന ഒരു പാലറ്റ് മറ്റൊന്നിലേക്ക് വീണു. ഗുണനം വ്യത്യസ്തമായി പ്രവർത്തിക്കുന്നു. ഞാൻ ക്രോമ ഗുണിക്കുമ്പോൾ, ഞാൻ ബ്രൗസറിനോട് പറയുന്നു: "ഈ നിറത്തിൻ്റെ തീവ്രത ഒരു അനുപാതത്തിൽ കുറയ്ക്കുക." അടിസ്ഥാനം മാറുമ്പോൾ പോലും നിറങ്ങൾ തമ്മിലുള്ള ബന്ധം കേടുകൂടാതെയിരിക്കും: കാൽക് (c * 0.10)
മൈ മൂവ് ഇറ്റ്, സ്കെയിൽ ഇറ്റ്, റൊട്ടേറ്റ് ഇറ്റ് റൂൾസ്
ലഘുത്വം നീക്കുക (കൂട്ടുക അല്ലെങ്കിൽ കുറയ്ക്കുക), സ്കെയിൽ ക്രോമ (ഗുണിക്കുക), നിറം തിരിക്കുക (ഡിഗ്രികൾ ചേർക്കുക അല്ലെങ്കിൽ കുറയ്ക്കുക).
അടിസ്ഥാന നിറത്തിന് ആനുപാതികമായി തുടരാൻ തീവ്രത മാറ്റങ്ങൾ ആഗ്രഹിക്കുന്നതിനാൽ ഞാൻ ക്രോമ സ്കെയിൽ ചെയ്യുന്നു. ഹ്യൂ ബന്ധങ്ങൾ ഭ്രമണപരമാണ്, അതിനാൽ നിറം വർദ്ധിപ്പിക്കുന്നതിൽ അർത്ഥമില്ല. ലഘുത്വം ഗ്രഹണാത്മകവും കേവലവുമാണ് - അതിനെ ഗുണിക്കുന്നത് പലപ്പോഴും വിചിത്രമായ ഫലങ്ങൾ നൽകുന്നു.
ഒരു നിറത്തിൽ നിന്ന് മുഴുവൻ തീമിലേക്കും ആപേക്ഷിക നിറം ഒരു അടിസ്ഥാന നിറം നിർവചിക്കാനും എനിക്ക് ആവശ്യമുള്ള മറ്റെല്ലാ നിറങ്ങളും സൃഷ്ടിക്കാനും എന്നെ അനുവദിക്കുന്നു - പൂരിപ്പിക്കൽ, സ്ട്രോക്കുകൾ, ഗ്രേഡിയൻ്റ് സ്റ്റോപ്പുകൾ, ഷാഡോകൾ - അതിൽ നിന്ന്. ആ സമയത്ത്, നിറം ഒരു പാലറ്റ് ആകുന്നത് നിർത്തുകയും ഒരു സിസ്റ്റമായി തുടങ്ങുകയും ചെയ്യുന്നു. SVG ചിത്രീകരണങ്ങൾ ഫില്ലുകൾ, സ്ട്രോക്കുകൾ, ഗ്രേഡിയൻ്റുകൾ എന്നിവയിലുടനീളം ഒരേ കുറച്ച് നിറങ്ങൾ വീണ്ടും ഉപയോഗിക്കാറുണ്ട്. ആ ബന്ധങ്ങളെ ഒരിക്കൽ നിർവചിക്കാനും എല്ലായിടത്തും പുനരുപയോഗിക്കാനും ആപേക്ഷിക നിറം നിങ്ങളെ അനുവദിക്കുന്നു - പുതിയ രംഗങ്ങൾ സൃഷ്ടിക്കാൻ ആനിമേറ്റർമാരുടെ പശ്ചാത്തലങ്ങൾ പുനരുപയോഗിക്കുന്നത് പോലെ.
ഫൗണ്ടേഷൻ്റെ നിറം ഒരിക്കൽ മാറ്റുക, കൈകൊണ്ട് ഒന്നും വീണ്ടും കണക്കാക്കാതെ തന്നെ ഓരോ നിറവും സ്വയമേവ അപ്ഡേറ്റ് ചെയ്യുന്നു. ആനിമേറ്റഡ് ഗ്രാഫിക്സിന് പുറത്ത്, ബട്ടണുകളും ലിങ്കുകളും പോലുള്ള സംവേദനാത്മക ഘടകങ്ങളുടെ അവസ്ഥകൾക്കായി നിറങ്ങൾ നിർവചിക്കാൻ എനിക്ക് ഇതേ സമീപനം ഉപയോഗിക്കാം. എൻ്റെ "Lullabye-Bye Bear" ടൂൺ ടൈറ്റിൽ ഉപയോഗിച്ച അടിസ്ഥാന നിറം സിയാൻ പോലെയുള്ള നീലയാണ്. എൻ്റെ അടിത്തറയ്ക്കും ഇരുണ്ട പതിപ്പിനും ഇടയിലുള്ള ഒരു റേഡിയൽ ഗ്രേഡിയൻ്റാണ് പശ്ചാത്തലം.
തികച്ചും വ്യത്യസ്തമായ മാനസികാവസ്ഥകളുള്ള ഇതര പതിപ്പുകൾ സൃഷ്ടിക്കുന്നതിന്, എനിക്ക് ഫൗണ്ടേഷൻ്റെ നിറം മാത്രം മാറ്റേണ്ടതുണ്ട്: --ഫൌണ്ടേഷൻ: #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 കാൽക് (h + 180)); }
90° ഷിഫ്റ്റ് പൂർണ്ണ പൂരകമാകാതെ ഉജ്ജ്വലമായ ഒരു ദ്വിതീയ നിറം ഉണ്ടാക്കുന്നു: .ടെക്സ്റ്റ്-ലൈറ്റ് { പൂരിപ്പിക്കുക: oklch(var(--ഫൌണ്ടേഷൻ) ൽ നിന്ന് l c കാൽക് (h - 90)); }
ക്വിക്ക് ഡ്രോ മക്ഗ്രോയുടെ 1959-ലെ ടൂൺ ടൈറ്റിൽ "എൽ കബോംഗ്" എന്ന എൻ്റെ വിനോദവും ഇതേ സാങ്കേതിക വിദ്യകൾ ഉപയോഗിക്കുന്നു, എന്നാൽ കൂടുതൽ വൈവിധ്യമാർന്ന പാലറ്റ് ഉപയോഗിച്ചാണ്. ഉദാഹരണത്തിന്, അടിസ്ഥാന നിറത്തിനും ഇരുണ്ട നിറത്തിനും ഇടയിൽ മറ്റൊരു റേഡിയൽ ഗ്രേഡിയൻ്റ് ഉണ്ട്.
പശ്ചാത്തലത്തിലുള്ള കെട്ടിടവും മരവും ഒരേ അടിസ്ഥാന നിറത്തിൻ്റെ വ്യത്യസ്ത ഷേഡുകൾ മാത്രമാണ്. ആ പാതകൾക്കായി, എനിക്ക് രണ്ട് അധിക നിറങ്ങൾ ആവശ്യമാണ്: .bg-mid { പൂരിപ്പിക്കുക: oklch(var(--ഫൌണ്ടേഷൻ) ൽ നിന്ന് calc (l - 0.04) calc (c * 0.91) h); }
.bg-dark { പൂരിപ്പിക്കുക: oklch(var(--ഫൌണ്ടേഷൻ) ൽ നിന്ന് calc (l - 0.12) calc (c * 0.64) h); }
അടിസ്ഥാനങ്ങൾ നീങ്ങാൻ തുടങ്ങുമ്പോൾ
ഇതുവരെ, ഞാൻ കാണിച്ചതെല്ലാം നിശ്ചലമാണ്. ഫൗണ്ടേഷൻ കളർ മാറ്റാൻ ആരെങ്കിലും കളർ പിക്കർ ഉപയോഗിക്കുമ്പോൾ പോലും, ആ മാറ്റം തൽക്ഷണം സംഭവിക്കുന്നു. എന്നാൽ ആനിമേറ്റഡ് ഗ്രാഫിക്സ് അപൂർവ്വമായി നിശ്ചലമായി നിൽക്കുന്നു - സൂചന പേരിലാണ്. അതിനാൽ, നിറം സിസ്റ്റത്തിൻ്റെ ഭാഗമാണെങ്കിൽ, അതിന് ആനിമേറ്റ് ചെയ്യാൻ ഒരു കാരണവുമില്ല.
അടിസ്ഥാന നിറം ആനിമേറ്റ് ചെയ്യാൻ, ഞാൻ ആദ്യം അതിനെ അതിൻ്റെ OKLCH ചാനലുകളായി വിഭജിക്കേണ്ടതുണ്ട്- പ്രകാശം, ക്രോമ, നിറം. എന്നാൽ ഒരു പ്രധാന അധിക ഘട്ടമുണ്ട്: എനിക്ക് ആ മൂല്യങ്ങൾ ടൈപ്പ് ചെയ്ത ഇഷ്ടാനുസൃത പ്രോപ്പർട്ടികൾ ആയി രജിസ്റ്റർ ചെയ്യേണ്ടതുണ്ട്. എന്നാൽ അത് എന്താണ് അർത്ഥമാക്കുന്നത്?
സ്ഥിരസ്ഥിതിയായി, ഒരു CSS ഇഷ്ടാനുസൃത പ്രോപ്പർട്ടി മൂല്യം നിറമോ നീളമോ നമ്പറോ മറ്റെന്തെങ്കിലുമോ പൂർണ്ണമായി പ്രതിനിധീകരിക്കുന്നുണ്ടോ എന്ന് ബ്രൗസറിന് അറിയില്ല. ആനിമേഷൻ സമയത്ത് അവ സുഗമമായി ഇൻ്റർപോളേറ്റ് ചെയ്യാൻ കഴിയില്ലെന്നും ഒരു മൂല്യത്തിൽ നിന്ന് അടുത്തതിലേക്ക് പോകാമെന്നും ഇതിനർത്ഥം.
ഒരു ഇഷ്ടാനുസൃത പ്രോപ്പർട്ടി രജിസ്റ്റർ ചെയ്യുന്നത് ബ്രൗസറിനോട് അത് പ്രതിനിധീകരിക്കുന്ന മൂല്യത്തിൻ്റെ തരത്തെക്കുറിച്ചും കാലക്രമേണ അത് എങ്ങനെ പെരുമാറണമെന്നും പറയുന്നു. ഈ സാഹചര്യത്തിൽ, ബ്രൗസർ എൻ്റെ വർണ്ണ ചാനലുകളെ അക്കങ്ങളായി കണക്കാക്കാൻ ഞാൻ ആഗ്രഹിക്കുന്നു, അങ്ങനെ അവ സുഗമമായി ആനിമേറ്റ് ചെയ്യാൻ കഴിയും.
@property --f-l {
വാക്യഘടന: "
@property --f-c {
വാക്യഘടന: "
@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 ആപേക്ഷിക നിറങ്ങൾ എങ്ങനെ മൈനിൻ്റെ ഇൻ്റീരിയറിനെ വിളക്കുകളിൽ നിന്നുള്ള നിറങ്ങൾ ഉപയോഗിച്ച് കൂടുതൽ യാഥാർത്ഥ്യമാക്കുമെന്ന് പര്യവേക്ഷണം ചെയ്യാൻ ഞാൻ ആഗ്രഹിച്ചു. യഥാർത്ഥ വെളിച്ചം ബാധിക്കുന്നതുപോലെ, ചുറ്റുമുള്ള ലോകത്തെ അവർ ബാധിക്കണമെന്ന് ഞാൻ ആഗ്രഹിച്ചു. അതിനാൽ, ഒന്നിലധികം നിറങ്ങൾ ആനിമേറ്റ് ചെയ്യുന്നതിനുപകരം, ഒരു നിറം മാത്രം ആനിമേറ്റ് ചെയ്യുന്ന ഒരു ചെറിയ ലൈറ്റിംഗ് സിസ്റ്റം ഞാൻ നിർമ്മിച്ചു.
പശ്ചാത്തലത്തിനും എൻ്റെ വിളക്കുകൾക്കുമിടയിൽ ഒരു ഓവർലേ ലെയർ സ്ലോട്ട് ചെയ്യുക എന്നതായിരുന്നു എൻ്റെ ആദ്യ ടാസ്ക്: <പാത ഐഡി="ഓവർലേ" fill="var(--overlay-tint)" [...] style="മിക്സ്-ബ്ലെൻഡ്-മോഡ്: കളർ" />
ഞാൻ മിക്സ്-ബ്ലെൻഡ്-മോഡ് ഉപയോഗിച്ചു: നിറം, കാരണം അത് അന്തർലീനമായ ലുമിനൻസ് സംരക്ഷിക്കുമ്പോൾ അതിന് താഴെയുള്ളതിൻ്റെ നിറം നൽകുന്നു. ആനിമേഷനുകൾ ഓണായിരിക്കുമ്പോൾ മാത്രമേ ഓവർലേ ദൃശ്യമാകാൻ ഞാൻ ആഗ്രഹിക്കുന്നുള്ളൂ, ഞാൻ ഓവർലേ ഓപ്റ്റ്-ഇൻ ആക്കി: .svg-mine #overlay { പ്രദർശിപ്പിക്കുക: ഒന്നുമില്ല; }
@media (prefers-reduced-motion: no-preference) { .svg-mine[data-animations=on] #overlay { ഡിസ്പ്ലേ: ബ്ലോക്ക്; അതാര്യത: 0.5; } }
ഓവർലേ സ്ഥലത്തുണ്ടായിരുന്നു, പക്ഷേ ഇതുവരെ വിളക്കുകളുമായി ബന്ധിപ്പിച്ചിട്ടില്ല. എനിക്ക് ഒരു പ്രകാശ സ്രോതസ്സ് ആവശ്യമായിരുന്നു. എൻ്റെ വിളക്കുകൾ ലളിതമാണ്, ഓരോന്നിലും ഞാൻ ഒരു ഫിൽട്ടർ ഉപയോഗിച്ച് മങ്ങിയ ഒരു സർക്കിൾ ഘടകം അടങ്ങിയിരിക്കുന്നു. മുഴുവൻ സർക്കിളിലും ഫിൽട്ടർ വളരെ മൃദുവായ മങ്ങൽ ഉണ്ടാക്കുന്നു.
<ഫിൽട്ടർ ഐഡി="ലാമ്പ്-ഗ്ലോ-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.6സെ അനന്തമായ രേഖീയം; ഒറ്റപ്പെടൽ: ഒറ്റപ്പെടുത്തുക;
/* ആനിമേറ്റുചെയ്ത ചാനലുകളിൽ നിന്ന് ഒരു തീജ്വാലയുടെ നിറം നിർമ്മിക്കുക */ --ജ്വാല: 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; } }
തീജ്വാല ഓറഞ്ചിലേക്ക് മാറുമ്പോൾ, വിളക്കുകൾ ചൂടാകുന്നു, ഒപ്പം രംഗം അവയുമായി ചൂടാകുന്നു. തീജ്വാല തണുക്കുമ്പോൾ, എല്ലാം ഒത്തുചേരുന്നു. ഒന്നും സ്വമേധയാ എഴുതിയിട്ടില്ല എന്നതാണ് ഏറ്റവും നല്ല ഭാഗം. ഞാൻ ഫൗണ്ടേഷൻ കളർ മാറ്റുകയോ ഫ്ലേം ആനിമേഷൻ ശ്രേണികൾ മാറ്റുകയോ ചെയ്താൽ, മുഴുവൻ ലൈറ്റിംഗ് സിസ്റ്റവും ഒരേസമയം അപ്ഡേറ്റ് ചെയ്യും. എൻ്റെ വെബ്സൈറ്റിൽ നിങ്ങൾക്ക് അന്തിമ ഫലം കാണാൻ കഴിയും. പുനരുപയോഗം, പുനരുപയോഗം, വീണ്ടും സന്ദർശിച്ചു ആ Hanna-Barbera ആനിമേറ്റർമാർക്ക് ആവശ്യകത കാരണം ഘടകങ്ങൾ പുനർനിർമ്മിക്കാൻ നിർബന്ധിതരായി, എന്നാൽ ഞാൻ നിറങ്ങൾ വീണ്ടും ഉപയോഗിക്കുന്നു, കാരണം ഇത് എൻ്റെ ജോലിയെ കൂടുതൽ സ്ഥിരതയുള്ളതും പരിപാലിക്കാൻ എളുപ്പവുമാക്കുന്നു. CSS ആപേക്ഷിക വർണ്ണ മൂല്യങ്ങൾ എന്നെ ഇനിപ്പറയുന്നവ ചെയ്യാൻ അനുവദിക്കുന്നു:
ഒരൊറ്റ അടിസ്ഥാന നിറം നിർവചിക്കുക, മറ്റ് നിറങ്ങൾ എങ്ങനെ ബന്ധപ്പെട്ടിരിക്കുന്നു എന്ന് വിവരിക്കുക, എല്ലായിടത്തും ആ ബന്ധങ്ങൾ വീണ്ടും ഉപയോഗിക്കുക, ഒപ്പം ഒരു മൂല്യം മാറ്റി സിസ്റ്റം ആനിമേറ്റ് ചെയ്യുക.
ആപേക്ഷിക നിറം തീമിംഗ് എളുപ്പമാക്കുന്നില്ല. ചലനം പോലെ വർണ്ണവും മനഃപൂർവ്വം - ഒരു മൂല്യം മാറ്റുന്നത് ഒരു മുഴുവൻ ദൃശ്യത്തെയും അതിൻ്റെ ചുവട്ടിലെ സൃഷ്ടിയെ മാറ്റിയെഴുതാതെ തന്നെ പരിവർത്തനം ചെയ്യാൻ കഴിയുന്നിടത്ത് അത് ചിന്തിക്കുന്ന ഒരു രീതിയെ പ്രോത്സാഹിപ്പിക്കുന്നു.
