CSS, SVG ആനിമേഷനുകളെക്കുറിച്ച് എനിക്ക് കഴിയുന്നതെല്ലാം പഠിക്കാൻ ആവശ്യമായ ഒരു പ്രോജക്റ്റ് പൂർത്തിയാക്കിയ ശേഷം, സ്മാഷിംഗ് ആനിമേഷനുകളെക്കുറിച്ചും "ക്ലാസിക് കാർട്ടൂണുകൾ ആധുനിക CSS-നെ എങ്ങനെ പ്രചോദിപ്പിക്കുന്നു" എന്നതിനെക്കുറിച്ചും ഈ പരമ്പര എഴുതാൻ തുടങ്ങി. ഈ വർഷം പൂർത്തിയാക്കാൻ, ടൂൺ ശീർഷകങ്ങളെ വളരെ സ്വാധീനമുള്ള ആ ഘടകം സൃഷ്ടിക്കാൻ ആധുനിക CSS എങ്ങനെ ഉപയോഗിക്കാമെന്ന് ഞാൻ നിങ്ങളെ കാണിക്കാൻ ആഗ്രഹിക്കുന്നു: അവയുടെ ടൈപ്പോഗ്രാഫി. തലക്കെട്ട് ആർട്ട് വർക്ക് ഡിസൈൻ 1920-കളിലെ നിശബ്ദ കാലഘട്ടത്തിലും 30-കളുടെ തുടക്കത്തിലും, ഒരു സിനിമയുടെ ടൈറ്റിൽ കാർഡിൻ്റെ ടൈപ്പോഗ്രാഫി ഒരു മൂഡ് സൃഷ്ടിക്കുകയും, രംഗം സജ്ജമാക്കുകയും, പ്രേക്ഷകർക്ക് അവർ പണം കൊടുത്ത് കാണാൻ ആഗ്രഹിച്ച സിനിമയെ ഓർമ്മപ്പെടുത്തുകയും ചെയ്തു.
കാർട്ടൂൺ ടൈറ്റിൽ കാർഡുകളും ബ്രാൻഡിംഗ്, മൂഡ്, സീൻ സെറ്റിംഗ് എന്നിവയായിരുന്നു, എല്ലാം ഒന്നായി ചുരുട്ടി. ആദ്യ വർഷങ്ങളിൽ, പ്രധാന സ്റ്റുഡിയോ ബജറ്റുകൾ വലുതായിരുന്നപ്പോൾ, ഈ ശീർഷക കാർഡുകൾ പലപ്പോഴും ചിത്രീകരണവും ചിത്രകലയും ആയിരുന്നു.
എന്നാൽ 1950-കളിൽ ടെലിവിഷൻ കുതിച്ചുയർന്നപ്പോൾ, ബജറ്റുകൾ കുറഞ്ഞു, ലോറൻസ് "ആർട്ട്" ഗോബിളിനെപ്പോലുള്ള കലാകാരന്മാർ രൂപകൽപ്പന ചെയ്ത കാർഡുകൾ ഒരു പുതിയ വിഷ്വൽ ഭാഷ സ്വീകരിച്ചു, കൂടുതൽ ഗ്രാഫിക്, സ്റ്റൈലൈസ്ഡ്, കുറച്ച് സങ്കീർണ്ണമായി. കുറിപ്പ്: ലോറൻസ് "ആർട്ട്" ഗോബിൾ മിഡ്-സെഞ്ച്വറി അമേരിക്കൻ ആനിമേഷനിലെ പലപ്പോഴും ശ്രദ്ധിക്കപ്പെടാത്ത നായകന്മാരിൽ ഒരാളാണ്. 1950 കളിലെയും 1960 കളിലെയും ഏറ്റവും സ്വാധീനമുള്ള വർഷങ്ങളിൽ അദ്ദേഹം പ്രാഥമികമായി ഹന്ന-ബാർബെറയ്ക്കുവേണ്ടി പ്രവർത്തിച്ചു. ഗോബിൾ ഒരു ക്യാരക്ടർ ആനിമേറ്റർ ആയിരുന്നില്ല. അന്തരീക്ഷം സൃഷ്ടിക്കുക എന്നതായിരുന്നു അദ്ദേഹത്തിൻ്റെ പങ്ക്, അതിനാൽ അദ്ദേഹം ദി ഫ്ലിൻ്റ്സ്റ്റോൺസ്, ഹക്കിൾബെറി ഹൗണ്ട്, ക്വിക്ക് ഡ്രോ മക്ഗ്രോ, യോഗി ബിയർ എന്നിവയ്ക്കായി പരിതസ്ഥിതികൾ രൂപകൽപ്പന ചെയ്തു, കൂടാതെ ടോൺ സജ്ജമാക്കുന്ന ഓപ്പണിംഗ് ടൈറ്റിൽ കാർഡുകളും. അദ്ദേഹത്തിൻ്റെ ടൈറ്റിൽ കാർഡുകൾ, ലോഗോ പൊതിഞ്ഞ പെയിൻ്റിംഗുകൾ, ഹന്ന-ബാർബെറയുടെ ഐക്കണിക് ലുക്ക് നിർവചിക്കാൻ സഹായിച്ചു. ക്വിക്ക് ഡ്രോ മക്ഗ്രോ, യോഗി ബിയർ തുടങ്ങിയ കഥാപാത്രങ്ങൾക്കായുള്ള ഗോബിളിൻ്റെ കലാസൃഷ്ടി ചെറിയ ടിവി സ്ക്രീനുകളിൽ ഫലപ്രദമായിരുന്നു. കാർട്ടൂണിൽ നിന്ന് ഒരു സ്റ്റിൽ പുനർനിർമ്മിക്കുന്നതിനുപകരം, അതിൻ്റെ സാരാംശം ഉൾക്കൊള്ളുന്ന ഒരൊറ്റ ശക്തമായ ആശയം - പലപ്പോഴും സിലൗറ്റിൽ - അവതരിപ്പിക്കുന്നതിൽ അദ്ദേഹം ശ്രദ്ധ കേന്ദ്രീകരിച്ചു. "ദി ബസിൻ ബിയർ" എന്ന ചിത്രത്തിൽ യോഗി ഹെലികോപ്റ്ററിൽ മുഴങ്ങുന്നു. "ബിയർ ഓൺ എ പിക്നിക്കിൽ", കൈയിൽ പിക്-എ-നിക് ബാസ്ക്കറ്റുമായി അവൻ കുതിച്ചുയരുന്നു, കൂടാതെ തൻ്റെ "പ്രൈസ് ഫൈറ്റ് ഫൈറ്റ്" എന്നതിനായി യോഗി ടൈറ്റിൽ ടെക്സ്റ്റ് ബോക്സ് ചെയ്യുന്നു.
ആശ്രയിക്കാൻ കുറച്ച് അല്ലെങ്കിൽ ചലനമില്ലാതെ, ഗോബിളിൻ്റെ ഒറ്റ ഫ്രെയിമുകൾക്ക് ഒരു മാനസികാവസ്ഥ സൃഷ്ടിക്കുകയും രംഗം സജ്ജമാക്കുകയും ഒരു കഥ വിവരിക്കുകയും ചെയ്യേണ്ടതുണ്ട്. പരന്ന നിറങ്ങൾ, ഗ്രാഫിക് ആകൃതികൾ, ആർട്ട് വർക്കിൽ ഇടയ്ക്കിടെ സമന്വയിപ്പിച്ച ടൈപ്പോഗ്രാഫി എന്നിവ ഉപയോഗിച്ചാണ് അവർ ഇത് ചെയ്തത്.
വെബിൽ പ്രവർത്തിക്കുന്ന ഡിസൈനർമാർ എന്ന നിലയിൽ, ടൂൺ ശീർഷകങ്ങൾക്ക് ഒരു ബ്രാൻഡിൻ്റെ വ്യക്തിത്വം എങ്ങനെ അറിയിക്കാമെന്നും ഒരു ആദ്യ മതിപ്പ് ഉണ്ടാക്കാമെന്നും ഒരു ഉൽപ്പന്നമോ വെബ്സൈറ്റോ ഉപയോഗിച്ച് ഒരാളുടെ അനുഭവത്തിനായി പ്രതീക്ഷകൾ സജ്ജീകരിക്കുന്നതിനെക്കുറിച്ചും ധാരാളം പഠിപ്പിക്കാൻ കഴിയും. ഫലപ്രദമായ ബാനറുകൾ, ലാൻഡിംഗ് പേജ് തലക്കെട്ടുകൾ, നല്ല പഴയ സ്പ്ലാഷ് സ്ക്രീനുകൾ എന്നിവ സൃഷ്ടിക്കാനുള്ള ആർട്ടിസ്റ്റുകളുടെ സാങ്കേതികതകളിൽ നിന്ന് നമുക്ക് പഠിക്കാം. ടൂൺ ടൈറ്റിൽ ടൈപ്പോഗ്രാഫി ഇമേജറിയുമായി തരം ലയിപ്പിക്കുന്നത് ഒരു ഹെഡറിനോ ഹീറോയ്ക്കോ ആവശ്യമായ പഞ്ച് എങ്ങനെ നൽകുന്നുവെന്ന് കാർട്ടൂൺ ടൈറ്റിൽ കാർഡുകൾ കാണിക്കുന്നു. ഒരുപിടി ടെക്സ്റ്റ് ഷാഡോ, ടെക്സ്റ്റ് സ്ട്രോക്ക്, ട്രാൻസ്ഫോർമേഷൻ ട്രിക്കുകൾ എന്നിവ ഉപയോഗിച്ച്, അതേ ഊർജം ടാപ്പുചെയ്യാൻ ആധുനിക CSS നിങ്ങളെ അനുവദിക്കുന്നു.
ടൂൺ ടെക്സ്റ്റ് ടൈറ്റിൽ ജനറേറ്റർ ഈ ലേഖനം എഴുതുമ്പോൾ, ഞാൻ വളരെയധികം ഇഷ്ടപ്പെടുന്ന കാർട്ടൂൺ ശീർഷകങ്ങൾ പോലെയുള്ള ടെക്സ്റ്റ് സൃഷ്ടിക്കുന്നതിനുള്ള ഒരു ഉപകരണം ഉപയോഗപ്രദമാകുമെന്ന് ഞാൻ മനസ്സിലാക്കി. അങ്ങനെ ഞാൻ ഒരെണ്ണം ഉണ്ടാക്കി. മൈ ടൂൺ ടെക്സ്റ്റ് ടൈറ്റിൽ ജനറേറ്റർ നിറങ്ങൾ, സ്ട്രോക്കുകൾ, ഒന്നിലധികം ടെക്സ്റ്റ് ഷാഡോകൾ എന്നിവ ഉപയോഗിച്ച് പരീക്ഷിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു. നിങ്ങൾക്ക് പെയിൻ്റ് ക്രമം ക്രമീകരിക്കാനും അക്ഷരങ്ങളുടെ സ്പെയ്സിംഗ് പ്രയോഗിക്കാനും സാമ്പിൾ ഫോണ്ടുകളുടെ തിരഞ്ഞെടുപ്പിൽ നിങ്ങളുടെ ടെക്സ്റ്റ് പ്രിവ്യൂ ചെയ്യാനും തുടർന്ന് ഒരു പ്രോജക്റ്റിൽ ഉപയോഗിക്കുന്നതിന് ജനറേറ്റുചെയ്ത CSS നേരിട്ട് നിങ്ങളുടെ ക്ലിപ്പ്ബോർഡിലേക്ക് പകർത്താനും കഴിയും. ടൂൺ ശീർഷകം CSS ടൂൺ ടെക്സ്റ്റ് ടൈറ്റിൽ ജനറേറ്റർ നിങ്ങൾക്ക് നൽകുന്ന CSS കോപ്പി പേസ്റ്റ് ചെയ്യാം. എന്നാൽ അത് എന്താണ് ചെയ്യുന്നതെന്ന് നമുക്ക് അടുത്ത് നോക്കാം. ടെക്സ്റ്റ് ഷാഡോ ഓഗി ഡോഗിയുടെ "യുക്-യുക് ഡക്ക്" എന്ന എപ്പിസോഡിൽ നിന്നുള്ള ഈ ശീർഷകത്തിലെ തരം നോക്കൂ, അതിൻ്റെ ഇളം മഞ്ഞ അക്ഷരങ്ങളും ഇരുണ്ടതും കടുപ്പമുള്ളതും ഓഫ്സെറ്റ് ഷാഡോയും പശ്ചാത്തലത്തിൽ നിന്ന് ഉയർത്തുകയും ആഴത്തിൻ്റെ മിഥ്യ സൃഷ്ടിക്കുകയും ചെയ്യുന്നു.
ടെക്സ്റ്റ് ഷാഡോ നാല് മൂല്യങ്ങൾ സ്വീകരിക്കുന്നുവെന്ന് നിങ്ങൾ ഇതിനകം അറിഞ്ഞിരിക്കാം: (1) തിരശ്ചീനവും (2) ലംബവുമായ ഓഫ്സെറ്റുകൾ, (3) മങ്ങൽ, (4) ഖരമോ അർദ്ധ സുതാര്യമോ ആയ ഒരു നിറം. ആ ഓഫ്സെറ്റ് മൂല്യങ്ങൾ പോസിറ്റീവോ നെഗറ്റീവോ ആകാം, അതിനാൽ താഴേക്കും വലത്തോട്ടും വലിച്ചിഴച്ച ഒരു ഹാർഡ് ഷാഡോ ഉപയോഗിച്ച് എനിക്ക് "യുക്-യുക് ഡക്ക്" ആവർത്തിക്കാം: നിറം: #f7f76d; ടെക്സ്റ്റ് ഷാഡോ: 5px 5px 0 #1e1904;
മറുവശത്ത്, ഈ "പിൻ്റ് ജയൻ്റ്" ശീർഷകത്തിന് അതിൻ്റെ നെഗറ്റീവ് സെമി-സോഫ്റ്റ് ഷാഡോയിൽ വ്യത്യസ്തമായ അനുഭവമുണ്ട്: നിറം: #c2a872; ടെക്സ്റ്റ് ഷാഡോ: -7px 5px 0 #b100e, 0 -5px 10px #546c6f;
അധിക ഡെപ്ത് ചേർക്കാനും കൂടുതൽ രസകരമായ ഇഫക്റ്റുകൾ സൃഷ്ടിക്കാനും, എനിക്ക് ഒന്നിലധികം ഷാഡോകൾ ലെയർ ചെയ്യാൻ കഴിയും. "ലെറ്റ്സ് ഡക്ക് ഔട്ട്" എന്നതിനായി, ഞാൻ നാല് ഷാഡോകൾ സംയോജിപ്പിക്കുന്നു: ആദ്യത്തേത് പശ്ചാത്തലത്തിൽ നിന്ന് ടെക്സ്റ്റ് ഉയർത്താൻ നെഗറ്റീവ് ഹോറിസോണ്ടൽ ഓഫ്സെറ്റുള്ള സോളിഡ് ഷാഡോ, തുടർന്ന് ക്രമേണ മൃദുവായ ഷാഡോകൾ അതിന് ചുറ്റും മങ്ങൽ സൃഷ്ടിക്കുന്നു: നിറം: #6F4D80; ടെക്സ്റ്റ് ഷാഡോ: -5px5px 0 #260e1e, /* ഷാഡോ 1 */ 0 0 15px #e9ce96, /* ഷാഡോ 2 */ 0 0 30px #e9ce96, /* ഷാഡോ 3 */ 0 0 30px #e9ce96; /* ഷാഡോ 4 */
ഈ ഷാഡോകൾ കാണിക്കുന്നത് ടെക്സ്റ്റ് ഷാഡോ ഉപയോഗിക്കുന്നത് ലൈറ്റിംഗ് ഇഫക്റ്റുകൾ സൃഷ്ടിക്കുക മാത്രമല്ല, കാരണം അവയ്ക്ക് അലങ്കാരവും വ്യക്തിത്വം ചേർക്കാനും കഴിയും. ടെക്സ്റ്റ് സ്ട്രോക്ക് പല കാർട്ടൂൺ ടൈറ്റിൽ കാർഡുകളിലും ബോൾഡ് ഔട്ട്ലൈനോടുകൂടിയ അക്ഷരങ്ങൾ പശ്ചാത്തലത്തിൽ നിന്ന് വേറിട്ടുനിൽക്കുന്നു. ടെക്സ്റ്റ്-സ്ട്രോക്ക് ഉപയോഗിച്ച് എനിക്ക് ഈ ഇഫക്റ്റ് പുനഃസൃഷ്ടിക്കാൻ കഴിയും. വളരെക്കാലമായി, ഈ പ്രോപ്പർട്ടി ഒരു -webkit- പ്രിഫിക്സ് വഴി മാത്രമേ ലഭ്യമായിരുന്നുള്ളൂ, എന്നാൽ ആധുനിക ബ്രൗസറുകളിലുടനീളം ഇത് ഇപ്പോൾ പിന്തുണയ്ക്കുന്നു എന്നാണ് ഇതിനർത്ഥം.
ടെക്സ്റ്റ്-സ്ട്രോക്ക് രണ്ട് പ്രോപ്പർട്ടികൾക്കുള്ള ഒരു ചുരുക്കെഴുത്താണ്. ആദ്യത്തേത്, ടെക്സ്റ്റ്-സ്ട്രോക്ക്-വിഡ്ത്ത്, വ്യക്തിഗത അക്ഷരങ്ങൾക്ക് ചുറ്റും ഒരു കോണ്ടൂർ വരയ്ക്കുന്നു, രണ്ടാമത്തേത്, ടെക്സ്റ്റ്-സ്ട്രോക്ക്-നിറം, അതിൻ്റെ നിറത്തെ നിയന്ത്രിക്കുന്നു. "വാറ്റ് എവർ ഗോസ് പപ്പ്" എന്നതിനായി, ഞാൻ മഞ്ഞ വാചകത്തിലേക്ക് 4px നീല സ്ട്രോക്ക് ചേർത്തു: നിറം: #eff0cd; -webkit-text-stroke: 4px #7890b5; ടെക്സ്റ്റ്-സ്ട്രോക്ക്: 4px #7890b5;
സ്ട്രോക്കുകൾ നിഴലുകളുമായി സംയോജിപ്പിക്കുമ്പോൾ പ്രത്യേകിച്ചും ഉപയോഗപ്രദമാകും, അതിനാൽ "വളരുന്നു, വളരുന്നു, പോയി" എന്നതിന്, ഈ ത്രിമാന ടെക്സ്റ്റ് ഇഫക്റ്റ് സൃഷ്ടിക്കുന്നതിന്, മങ്ങിയ 1px ഷാഡോയിലേക്ക് ഞാൻ നേർത്ത 3px സ്ട്രോക്ക് ചേർത്തു: നിറം: #fbb999; ടെക്സ്റ്റ് ഷാഡോ: 3px 5px 1px #5160b1; -webkit-text-stroke: 3px #984336; ടെക്സ്റ്റ്-സ്ട്രോക്ക്: 3px #984336;
പെയിൻ്റ് ഓർഡർ ടെക്സ്റ്റ്-സ്ട്രോക്ക് ഉപയോഗിക്കുന്നത് എല്ലായ്പ്പോഴും പ്രതീക്ഷിച്ച ഫലം നൽകുന്നില്ല, പ്രത്യേകിച്ച് കനം കുറഞ്ഞ അക്ഷരങ്ങളും കട്ടിയുള്ള സ്ട്രോക്കുകളും, കാരണം സ്ഥിരസ്ഥിതിയായി ബ്രൗസർ ഫില്ലിന് മുകളിലൂടെ ഒരു സ്ട്രോക്ക് വരയ്ക്കുന്നു. ദുഃഖകരമെന്നു പറയട്ടെ, സ്കെച്ചിൽ ഞാൻ പലപ്പോഴും ചെയ്യുന്നതുപോലെ സ്ട്രോക്ക് പ്ലേസ്മെൻ്റ് ക്രമീകരിക്കാൻ ഇപ്പോഴും CSS എന്നെ അനുവദിക്കുന്നില്ല. എന്നിരുന്നാലും, പെയിൻ്റ്-ഓർഡർ പ്രോപ്പർട്ടിക്ക് ഫില്ലിന് മുന്നിൽ സ്ട്രോക്ക് സ്ഥാപിക്കുന്നതിന് പകരം സ്ട്രോക്ക് പിന്നിൽ സ്ഥാപിക്കാൻ എന്നെ അനുവദിക്കുന്ന മൂല്യങ്ങളുണ്ട്.
പെയിൻ്റ്-ഓർഡർ: സ്ട്രോക്ക് ആദ്യം സ്ട്രോക്കിനെ പെയിൻ്റ് ചെയ്യുന്നു, പിന്നീട് ഫിൽ ചെയ്യുന്നു, പെയിൻ്റ്-ഓർഡർ: ഫിൽ വിപരീതമാണ് ചെയ്യുന്നത്: നിറം: #fbb999; പെയിൻ്റ്-ഓർഡർ: പൂരിപ്പിക്കുക; ടെക്സ്റ്റ് ഷാഡോ: 3px 5px 1px #5160b1; ടെക്സ്റ്റ്-സ്ട്രോക്ക്-നിറം:#984336; ടെക്സ്റ്റ്-സ്ട്രോക്ക് വീതി: 3px;
ഫലപ്രദമായ സ്ട്രോക്ക് അക്ഷരങ്ങൾ വായിക്കാൻ കഴിയുന്ന തരത്തിൽ നിലനിർത്തുന്നു, ഭാരം കൂട്ടുന്നു, കൂടാതെ - ഷാഡോകളും പെയിൻ്റ് ഓർഡറും കൂടിച്ചേർന്നാൽ - ഫ്ലാറ്റ് ടെക്സ്റ്റ് യഥാർത്ഥ സാന്നിധ്യം നൽകുന്നു. ടെക്സ്റ്റിനുള്ളിലെ പശ്ചാത്തലങ്ങൾ പല കാർട്ടൂൺ ശീർഷക കാർഡുകളും അക്ഷരങ്ങളിൽ ടെക്സ്ചർ, ഗ്രേഡിയൻ്റുകൾ, അല്ലെങ്കിൽ ചിത്രീകരിച്ച വിശദാംശങ്ങൾ എന്നിവ ചേർത്ത് ഫ്ലാറ്റ് നിറത്തിനപ്പുറം പോകുന്നു. ചിലപ്പോൾ അതൊരു ടെക്സ്ചറാണ്, മറ്റു ചിലപ്പോൾ സൂക്ഷ്മമായ ടോണൽ ഷിഫ്റ്റുള്ള ഗ്രേഡിയൻ്റായിരിക്കാം. വെബിൽ, ടെക്സ്റ്റിന് പിന്നിലെ ഒരു പശ്ചാത്തല ചിത്രമോ ഗ്രേഡിയൻ്റോ ഉപയോഗിച്ച് എനിക്ക് ഈ ഇഫക്റ്റ് പുനഃസൃഷ്ടിക്കാൻ കഴിയും, തുടർന്ന് അത് അക്ഷരങ്ങളുടെ ആകൃതിയിലേക്ക് ക്ലിപ്പ് ചെയ്യുക. ഇത് ഒരുമിച്ച് പ്രവർത്തിക്കുന്ന രണ്ട് പ്രോപ്പർട്ടികളിൽ ആശ്രയിക്കുന്നു: പശ്ചാത്തല-ക്ലിപ്പ്: ടെക്സ്റ്റ്, ടെക്സ്റ്റ്-ഫിൽ-വർണ്ണം: സുതാര്യം.
ആദ്യം, ഞാൻ വാചകത്തിന് പിന്നിൽ ഒരു പശ്ചാത്തലം പ്രയോഗിക്കുന്നു. ഇതൊരു ബിറ്റ്മാപ്പ് അല്ലെങ്കിൽ വെക്റ്റർ ഇമേജ് അല്ലെങ്കിൽ ഒരു CSS ഗ്രേഡിയൻ്റ് ആകാം. Quick Draw McGraw എപ്പിസോഡിൽ നിന്നുള്ള ഈ ഉദാഹരണത്തിനായി, "ബാബ ബെയ്റ്റ്" എന്ന ശീർഷക വാചകത്തിൽ ഇരുട്ടിൽ നിന്ന് വെളിച്ചത്തിലേക്കുള്ള സൂക്ഷ്മമായ ടോപ്പ്-ബോട്ടം ഗ്രേഡിയൻ്റ് ഉൾപ്പെടുന്നു: പശ്ചാത്തലം: ലീനിയർ-ഗ്രേഡിയൻ്റ്(0deg, #667b6a, #1d271a);
അടുത്തതായി, ഞാൻ ആ പശ്ചാത്തലം ഗ്ലിഫുകളിലേക്ക് ക്ലിപ്പ് ചെയ്യുകയും വാചകം സുതാര്യമാക്കുകയും ചെയ്യുന്നതിനാൽ പശ്ചാത്തലം ഇതിലൂടെ കാണിക്കുന്നു: -webkit-background-clip: text; -webkit-text-fill-color: സുതാര്യം;
ആ രണ്ട് വരികൾ മാത്രം ഉപയോഗിച്ച്, പശ്ചാത്തലം വാചകത്തിന് പിന്നിൽ വരയ്ക്കില്ല; പകരം, അത് അതിനുള്ളിൽ വരച്ചിരിക്കുന്നു. സ്ട്രോക്കുകളും ഷാഡോകളും കൂടിച്ചേർന്നാൽ ഈ സാങ്കേതികത നന്നായി പ്രവർത്തിക്കുന്നു. ക്ലിപ്പുചെയ്ത ഗ്രേഡിയൻ്റ് അക്ഷരങ്ങൾക്ക് നിറവും ഘടനയും നൽകുന്നു, ഒരു സ്ട്രോക്ക് അതിൻ്റെ അരികുകൾ മൂർച്ചയുള്ളതാക്കുന്നു, ഒരു നിഴൽ അതിനെ പശ്ചാത്തലത്തിൽ നിന്ന് ഉയർത്തുന്നു. ഒരു ചെറിയ CSS എന്നതല്ലാതെ മറ്റൊന്നും ഉപയോഗിച്ച് അവർ ഒരുമിച്ച് കൈകൊണ്ട് വരച്ച ടൈറ്റിൽ കാർഡുകളുടെ ലേയേർഡ് ലുക്ക് പുനഃസൃഷ്ടിക്കുന്നു. ബ്രൗസർ ക്വിർക്കുകൾ ചിലപ്പോൾ ഷാഡോകളെയും റെൻഡറിംഗിനെയും ബാധിക്കുമെന്നതിനാൽ, എല്ലായ്പ്പോഴും എന്നപോലെ, ക്ലിപ്പുചെയ്ത വാചകം ശ്രദ്ധാപൂർവ്വം പരിശോധിക്കുക. വാചകം വ്യക്തിഗത പ്രതീകങ്ങളായി വിഭജിക്കുന്നു ചിലപ്പോൾ ഒരു മുഴുവൻ വാക്കും തലക്കെട്ടും സ്റ്റൈൽ ചെയ്യാൻ ഞാൻ ആഗ്രഹിക്കുന്നില്ല. എനിക്ക് വ്യക്തിഗത അക്ഷരങ്ങൾ സ്റ്റൈൽ ചെയ്യണമെന്നുണ്ട് - ഒരു കഥാപാത്രത്തെ അതിൻ്റെ സ്ഥാനത്തേക്ക് മാറ്റാനോ, ഒരു ഗ്ലിഫിന് അധിക ഭാരം നൽകാനോ അല്ലെങ്കിൽ കുറച്ച് അക്ഷരങ്ങൾ സ്വതന്ത്രമായി ആനിമേറ്റ് ചെയ്യാനോ. പ്ലെയിൻ HTML, CSS എന്നിവയിൽ, അത് ചെയ്യാൻ ഒരേയൊരു വിശ്വസനീയമായ മാർഗമേയുള്ളൂ: ഓരോ പ്രതീകവും അതിൻ്റേതായ സ്പാൻ ഘടകത്തിൽ പൊതിയുക. എനിക്ക് അത് സ്വമേധയാ ചെയ്യാൻ കഴിയും, പക്ഷേ അത് ദുർബലവും പരിപാലിക്കാൻ ബുദ്ധിമുട്ടുള്ളതും പകർപ്പ് മാറുമ്പോൾ പെട്ടെന്ന് തകരുകയും ചെയ്യും. പകരം, എനിക്ക് ഓരോ അക്ഷരത്തിനും നിയന്ത്രണം ആവശ്യമായി വരുമ്പോൾ, splt.js പോലെയുള്ള ഒരു ടെക്സ്റ്റ് സ്പ്ലിറ്റിംഗ് ലൈബ്രറി ഞാൻ ഉപയോഗിക്കുന്നു (മറ്റ് പരിഹാരങ്ങൾ ലഭ്യമാണെങ്കിലും). ഇത് ഒരു ടെക്സ്റ്റ് നോഡ് എടുക്കുകയും വാക്കുകളോ പ്രതീകങ്ങളോ സ്വയമേവ പൊതിയുകയും ചെയ്യുന്നു, ഇത് എൻ്റെ മാർക്ക്അപ്പ് കുഴപ്പത്തിലാക്കാതെ ആനിമേറ്റുചെയ്യാനും സ്റ്റൈൽ ചെയ്യാനും എനിക്ക് അധിക കൊളുത്തുകൾ നൽകുന്നു. ക്ലാസിക് കാർട്ടൂൺ ശീർഷക കാർഡുകളിൽ നിങ്ങൾ കാണുന്ന അസമത്വവും സ്വഭാവസവിശേഷതയുമുള്ള ടൈപ്പോഗ്രാഫി പുനഃസൃഷ്ടിക്കുന്നതിന് എനിക്ക് സൂക്ഷ്മമായ നിയന്ത്രണം നൽകുമ്പോൾ, എൻ്റെ HTML വായിക്കാവുന്നതും അർത്ഥവത്തായതുമായി നിലനിർത്തുന്ന ഒരു സമീപനമാണിത്. എന്നിരുന്നാലും, ഈ സമീപനം വരുന്നുമിക്ക സ്ക്രീൻ റീഡറുകളും ടെക്സ്റ്റ് നോഡുകൾ ക്രമത്തിൽ വായിക്കുന്നതിനാൽ പ്രവേശനക്ഷമത മുന്നറിയിപ്പ് നൽകുന്നു. അതിനാൽ ഇത്:
ഹം സ്വീറ്റ് ഹം
നിങ്ങൾ പ്രതീക്ഷിക്കുന്നത് പോലെ വായിക്കുന്നു: ഹം സ്വീറ്റ് ഹം
എന്നാൽ ഇത്:
H u m
…ബ്രൗസറും സ്ക്രീൻ റീഡറും അനുസരിച്ച് വ്യത്യസ്തമായി വ്യാഖ്യാനിക്കാം. ചിലർ അക്ഷരങ്ങൾ കൂട്ടിച്ചേർത്ത് വാക്കുകൾ ശരിയായി വായിക്കും. മറ്റുള്ളവർ അക്ഷരങ്ങൾക്കിടയിൽ താൽക്കാലികമായി നിർത്തിയേക്കാം, ഏറ്റവും മോശം സാഹചര്യത്തിൽ ഇത് ഇതുപോലെ തോന്നാം: "എച്ച്..." "യു..." "എം..."
സങ്കടകരമെന്നു പറയട്ടെ, ചില വിഭജന പരിഹാരങ്ങൾ എല്ലായ്പ്പോഴും ആക്സസ് ചെയ്യാവുന്ന ഫലം നൽകുന്നില്ല, അതിനാൽ ഞാൻ എൻ്റെ സ്വന്തം ടെക്സ്റ്റ് സ്പ്ലിറ്റർ, splinter.js എഴുതിയിട്ടുണ്ട്, അത് നിലവിൽ ബീറ്റയിലാണ്. വ്യക്തിഗത അക്ഷരങ്ങൾ രൂപാന്തരപ്പെടുത്തുന്നു എൻ്റെ ടൂൺ ടെക്സ്റ്റ് സ്പ്ലിറ്റർ സജീവമാക്കുന്നതിന്, ഞാൻ വിഭജിക്കാൻ ആഗ്രഹിക്കുന്ന ഘടകത്തിലേക്ക് ഒരു ഡാറ്റ-ആട്രിബ്യൂട്ട് ചേർക്കുന്നു:
ഹം സ്വീറ്റ് ഹം
ആദ്യം, എൻ്റെ സ്ക്രിപ്റ്റ് ഓരോ പദത്തെയും വ്യക്തിഗത അക്ഷരങ്ങളായി വേർതിരിക്കുകയും ക്ലാസ്, ARIA ആട്രിബ്യൂട്ടുകൾ എന്നിവ ഉപയോഗിച്ച് സ്പാൻ ഘടകത്തിൽ പൊതിയുകയും ചെയ്യുന്നു:
സ്ക്രിപ്റ്റ് സ്പ്ലിറ്റ് എലമെൻ്റിൻ്റെ പ്രാരംഭ ഉള്ളടക്കം എടുക്കുകയും പ്രവേശനക്ഷമത നിലനിർത്താൻ സഹായിക്കുന്നതിന് ഒരു ഏരിയ ആട്രിബ്യൂട്ടായി ചേർക്കുകയും ചെയ്യുന്നു:
ആ ക്ലാസ് ആട്രിബ്യൂട്ടുകൾ പ്രയോഗിച്ചാൽ, ഞാൻ തിരഞ്ഞെടുക്കുന്നതുപോലെ എനിക്ക് വ്യക്തിഗത പ്രതീകങ്ങൾ സ്റ്റൈൽ ചെയ്യാൻ കഴിയും.
ഉദാഹരണത്തിന്, "ഹം സ്വീറ്റ് ഹം" എന്നതിന്, അതിൻ്റെ അക്ഷരങ്ങൾ ബേസ്ലൈനിൽ നിന്ന് മാറുന്നത് എങ്ങനെയെന്ന് ആവർത്തിക്കാൻ ഞാൻ ആഗ്രഹിക്കുന്നു. എൻ്റെ ടൂൺ ടെക്സ്റ്റ് സ്പ്ലിറ്റർ ഉപയോഗിച്ചതിന് ശേഷം, ഒരു സെമി-റാൻഡം ലുക്ക് സൃഷ്ടിക്കാൻ നിരവധി :nth-child സെലക്ടറുകൾ ഉപയോഗിച്ച് ഞാൻ നാല് വ്യത്യസ്ത വിവർത്തന മൂല്യങ്ങൾ പ്രയോഗിച്ചു: /* 4, 8, 12... */ .toon-char:nth-child(4n) {വിവർത്തനം: 0 -8px; } /* 1, 5, 9... */ .toon-char:nth-child(4n+1) {വിവർത്തനം: 0 -4px; } /* 2nd, 6th, 10th... */ .toon-char:nth-child(4n+2) {translate: 0 4px; } /* 3, 7, 11... */ .toon-char:nth-child(4n+3) {translate: 0 8px; }
എന്നാൽ എൻ്റെ ടൂൺ ടെക്സ്റ്റ് രൂപാന്തരപ്പെടുത്താൻ എനിക്ക് ഉപയോഗിക്കാൻ കഴിയുന്ന ഒരേയൊരു പ്രോപ്പർട്ടി മാത്രമാണ് വിവർത്തനം.
കൂടുതൽ അരാജകമായ രൂപത്തിനായി എനിക്ക് ആ വ്യക്തിഗത പ്രതീകങ്ങൾ തിരിക്കാനും കഴിയും: /* 4, 8, 12... */ .toon-line .toon-char:nth-child(4n) {ഭ്രമണം: -4deg; } /* 1, 5, 9... */ .toon-char:nth-child(4n+1) {ഭ്രമണം: -8deg; } /* 2nd, 6th, 10th... */ .toon-char:nth-child(4n+2) {ഭ്രമണം: 4deg; } /* 3, 7, 11... */ .toon-char:nth-child(4n+3) {ഭ്രമണം: 8deg; }
എന്നാൽ എൻ്റെ ടൂൺ ടെക്സ്റ്റ് രൂപാന്തരപ്പെടുത്താൻ എനിക്ക് ഉപയോഗിക്കാൻ കഴിയുന്ന ഒരേയൊരു പ്രോപ്പർട്ടി മാത്രമാണ് വിവർത്തനം. കൂടുതൽ അരാജകമായ രൂപത്തിനായി എനിക്ക് ആ വ്യക്തിഗത പ്രതീകങ്ങൾ തിരിക്കാനും കഴിയും: /* 4, 8, 12... */ .toon-line .toon-char:nth-child(4n) { തിരിക്കുക: -4deg; }
/* 1, 5, 9... */ .toon-char:nth-child(4n+1) { തിരിക്കുക: -8ഡിഗ്രി; }
/* 2nd, 6th, 10th... */ .toon-char:nth-child(4n+2) { തിരിക്കുക: 4ഡിഗ്രി; }
/* 3, 7, 11... */ .toon-char:nth-child(4n+3) { തിരിക്കുക: 8ഡിഗ്രി; }
കൂടാതെ, തീർച്ചയായും, ആ കഥാപാത്രങ്ങളെ ഇക്കിളിപ്പെടുത്താനും എൻ്റെ ടൂൺ ടെക്സ്റ്റ് ശൈലി ശീർഷകങ്ങൾ ജീവസുറ്റതാക്കാനും എനിക്ക് ആനിമേഷനുകൾ ചേർക്കാൻ കഴിയും. ആദ്യം, ഞാൻ പ്രതീകങ്ങൾ തിരിക്കുന്ന ഒരു കീഫ്രെയിം ആനിമേഷൻ സൃഷ്ടിച്ചു:
@keyframes വിറയ്ക്കുക { 0%, 100% {പരിവർത്തനം: തിരിക്കുക(var(--ബേസ്-റൊട്ടേറ്റ്, 0ഡിഗ്രി)); } 25% {പരിവർത്തനം: റൊട്ടേറ്റ് (കാൽക്(var(--ബേസ്-റൊട്ടേറ്റ്, 0ഡിഗ്രി) + 3ഡിഗ്രി)); } 50% {പരിവർത്തനം: റൊട്ടേറ്റ് (കാൽക്(var(--ബേസ്-റൊട്ടേറ്റ്, 0ഡിഗ്രി) - 2ഡിഗ്രി)); } 75% {പരിവർത്തനം: റൊട്ടേറ്റ് (കാൽക്(var(--ബേസ്-റൊട്ടേറ്റ്, 0ഡിഗ്രി) + 1ഡിഗ്രി)); } }
എൻ്റെ ടൂൺ ടെക്സ്റ്റ് സ്പ്ലിറ്റർ സൃഷ്ടിച്ച സ്പാൻ ഘടകങ്ങളിലേക്ക് ഇത് പ്രയോഗിക്കുന്നതിന് മുമ്പ്: .ടൂൺ-ചാർ { ആനിമേഷൻ: ജിഗിൾ 3s അനന്തമായ ഈസ്-ഇൻ-ഔട്ട്; രൂപാന്തരം-ഉത്ഭവം: മധ്യഭാഗം; }
അവസാനമായി, ഓരോ പ്രതീകവും വിറയ്ക്കാൻ തുടങ്ങുന്നതിനു മുമ്പുള്ള റൊട്ടേഷൻ തുകയും കാലതാമസവും സജ്ജമാക്കുക: .toon-char:nth-child(4n) { --base-rotate: -2deg; } .toon-char:nth-child(4n+1) { --base-rotate: -4deg; } .toon-char:nth-child(4n+2) { --base-rotate: 2deg; } .toon-char:nth-child(4n+3) { --base-rotate: 4deg; }
.toon-char:nth-child(4n) { animation-delay: 0.1s; } .toon-char:nth-child(4n+1) { animation-delay: 0.3s; } .toon-char:nth-child(4n+2) { animation-delay: 0.5s; } .toon-char:nth-child(4n+3) { animation-delay: 0.7s; }
ഒരു മതിപ്പ് ഉണ്ടാക്കാൻ ഒരു ഫ്രെയിം കാർട്ടൂൺ ടൈറ്റിൽ ആർട്ടിസ്റ്റുകൾക്ക് ഒരു മതിപ്പ് ഉണ്ടാക്കാൻ ഒരു ഫ്രെയിം ഉണ്ടായിരുന്നു, അവരുടെ ടൈപ്പോഗ്രാഫി അവർ വരച്ച കലാസൃഷ്ടി പോലെ തന്നെ പ്രധാനമാണ്. വെബിലും ഇതുതന്നെയാണ് സ്ഥിതി. നന്നായി രൂപകൽപ്പന ചെയ്ത തലക്കെട്ട് അല്ലെങ്കിൽ ഹീറോപ്രദേശത്തിന് വ്യക്തതയും സ്വഭാവവും ആത്മവിശ്വാസവും ആവശ്യമാണ് - കേവലം മങ്ങിയ പൂർണ്ണ-വീതിയുള്ള പശ്ചാത്തല ചിത്രം മാത്രമല്ല. ശ്രദ്ധാപൂർവം തിരഞ്ഞെടുത്ത കുറച്ച് CSS പ്രോപ്പർട്ടികൾ - ഷാഡോകൾ, സ്ട്രോക്കുകൾ, ക്ലിപ്പുചെയ്ത പശ്ചാത്തലങ്ങൾ, ചില നിയന്ത്രിത ആനിമേഷൻ എന്നിവ ഉപയോഗിച്ച് - നമുക്ക് അതേ സ്വാധീനം പുനഃസൃഷ്ടിക്കാൻ കഴിയും. ഞാൻ ടൂൺ ടെക്സ്റ്റ് ഇഷ്ടപ്പെടുന്നത് ഞാൻ ഗൃഹാതുരമായതുകൊണ്ടല്ല, മറിച്ച് അതിൻ്റെ ഡിസൈൻ മനഃപൂർവമായതുകൊണ്ടാണ്. ബോധപൂർവമായ തിരഞ്ഞെടുപ്പുകൾ നടത്തുക, നിങ്ങളുടെ ഡിസൈനുകളിൽ പഞ്ച് ചേർക്കാൻ അൽപ്പം ടൂൺ ടെക്സ്റ്റ് ടൈപ്പോഗ്രാഫി അനുവദിക്കുക.
