CSS आनी SVG एनिमेशनां विशीं म्हाका शक्य तें सगळें शिकचें पडटालो असो प्रकल्प सोंपतकच हांवें ही मालिका स्मॅशिंग एनिमेशन्स आनी “How Classic Cartoons Inspire Modern CSS” हांचे विशीं बरोवंक सुरवात केली. अंदूं गोल करपाक, हांवें तुमकां दाखोवपाचें आसा की आधुनीक CSS कसो वापर करून तो घटक तयार करचो जो Toon Titles इतलो प्रभावी करता: तांची टायपोग्राफी. शीर्षक कलाकृती डिझायन १९२० च्या दशकाच्या आनी ’३० च्या सुमाराकच्या मूक युगांत फिल्माच्या टायटल कार्डाची टाइपोग्राफी एक मूड तयार करताली, दृश्य थारायताली आनी प्रेक्षकांक पळोवपाक पयशे दिल्ल्या फिल्माच्या प्रकाराची याद करून दिताली.
कार्टून टायटल कार्डांय ब्रँडींग, मूड आनी सीन-सेटिंग आशिल्लीं, सगळीं एकेच गुठलायल्लीं. सुरवेच्या वर्सांनी जेन्ना मुखेल स्टुडिओचें बजेट व्हड आसतालें तेन्ना हीं टायटल कार्डां चड करून चित्रात्मक आनी चित्रात्मक आशिल्लीं.
पूण १९५० च्या दशकांत जेन्ना दूरचित्रवाणीची उदरगत जाली तेन्ना अर्थसंकल्प देंवले आनी लॉरेन्स “आर्ट” गोबले सारकिल्या कलाकारांनी तयार केल्ल्या कार्डांनी नवी दृश्य भास आपणायली, ती चड ग्राफिक, शैलीबध्द आनी उणी गुंतागुंतीची जाली. टिप: लॉरेन्स “आर्ट” गोबल हो मध्य शेंकड्यांतल्या अमेरिकन एनिमेशनांतल्या चड करून दुर्लक्षीत नायकांतलो एक. ताणें मुखेलपणान हान्ना-बार्बेरा खातीर १९५० आनी १९६० च्या चड प्रभावी वर्सांनी काम केलें. गोबल हो पात्र एनिमेटर नाशिल्लो. ताची भुमिका वातावरण तयार करपाची आशिल्ली, देखून ताणें द फ्लिंटस्टोन्स, हकलबेरी हाउंड, क्विक ड्रॉ मॅकग्रा, योगी बेअर हांचेखातीर वातावरण तशेंच सुर थारावपी सुरवातीचे शीर्षक कार्ड तयार केले. ताच्या शीर्षक कार्डांनी, तातूंत लोगो आच्छादीत केल्लीं चित्रां आशिल्लीं, हान्ना-बार्बेराचो प्रतिकात्मक देखावो व्याख्या करपाक मदत जाली. क्विक ड्रॉ मॅकग्रा आनी योगी बेअर ह्या पात्रांखातीर गोबलेची कलाकृती ल्हान टीव्ही पडद्याचेर प्रभावी आशिल्ली. कार्टूनांतल्यान एक स्टिल परतून तयार करचे परस ताणें एकूच, बळिश्ट कल्पना — चड करून सिल्हूटांत — सादर करपाचेर लक्ष केंद्रीत केलें, जी ताचें सार धरताली. “द बझिन’ बेअर” ह्या सिनेमांत योगी हेलिकॉप्टरांतल्यान गुंजायमान वता. तो हातांत पिक-ए-निक टोपली घेवन उडून वता, “बेअर ऑन अ पिकनिक” ह्या पुस्तकांत आनी ताच्या “प्रायझ फायट फ्रायट” खातीर योगी शीर्षक मजकूर बॉक्सांत घालता.
अवलंबून रावपाक उणी वा कसलीच गती नाशिल्ल्यान गोबलेच्या एकाच फ्रेमांक एक मूड तयार करचो पडटालो, दृश्य सेट करचो पडटालो आनी एके काणयेचें वर्णन करचें पडटालें. सपाट रंग, चित्रात्मक आकार आनी मुद्रणकला वापरून तांणी हें केलें, जें कलाकृतींत वारंवार एकठांय केल्लें.
वेबचेर काम करपी डिझायनर म्हणून, toon शीर्षकां आमकां ब्रँडाचें व्यक्तिमत्व कशें सांगप, पयली छाप कशी करप, आनी उत्पादन वा संकेतथळ वापरून कोणाच्याय अणभवाची अपेक्षा दवरप हाचे विशीं खूब कितें शिकवंक शकतात. प्रभावी बॅनर, लँडिंग-पान हेडर, आनी बरे ol’ fashioned splash screen लेगीत तयार करपाक कलाकारांच्या तंत्रांतल्यान आमी शिकूं येतात. टून शीर्षक मुद्रणकला कार्टून शीर्षक कार्डां दाखयतात की प्रकार प्रतिमे वांगडा विलीन केल्यार शीर्षकाक वा नायकाक जाय आशिल्लो पंच कसो मेळटा. मुठीभर मजकूर-सावळी, मजकूर-स्ट्रोक, आनी रुपांतर युक्तींनी, आधुनीक CSS तुमकां त्याच उर्जेंत टॅप करूंक दिता.
टून मजकूर शीर्षक जनरेटर हो लेख बरोवपाच्या अर्दांत म्हाका कळ्ळें की म्हाका इतले आवडटात त्या कार्टून शीर्षकां सारके मजकूर स्टायलाचें मजकूर तयार करपाचें साधन आसल्यार उपेगी थारतलें. म्हणून हांवें एक केलें. म्हजो Toon मजकूर शीर्षक जनरेटर तुमकां रंग, स्ट्रोक, आनी एका परस चड मजकूर सावळेचो प्रयोग करूंक दिता. तुमी रंग क्रम समायोजीत करूंक शकतात, अक्षरांचो अंतर लागू करूंक शकतात, नमुन्याच्या फॉन्टांच्या निवडींत तुमचो मजकूर पूर्वावलोकन करूंक शकतात, आनी मागीर प्रकल्पांत वापरपाखातीर तयार केल्लो CSS सरळ तुमच्या क्लिपबोर्डाचेर कॉपी करूंक शकतात. टून शीर्षक सीएसएस तुमी फकत Toon मजकूर शीर्षक जनरेटर तुमकां दिता तो CSS कॉपी-पेस्ट करूंक शकतात. पूण तें कितें करता तें बारीकसाणेन पळोवया. मजकूर सावळी ऑगी डॉगीच्या “युक-युक डक” ह्या एपिसोडांतल्यान ह्या शीर्षकांतलो प्रकार पळयात, ताचे फिकट हळडुवे अक्षर आनी काळी, कठीण, ऑफसेट सावळी जी ताका फाटभूंयेर उखलून खोलायेन भ्रम निर्माण करता.
मजकूर-सावळी चार मोलां स्वीकारता हें तुमकां पयलींच खबर आसतलें: (1) आडवे आनी (2) उबे ऑफसेट, (3) धूसर, आनी (4) घन वा अर्द पारदर्शक आसूं येता असो रंग. तीं ऑफसेट मोलां सकारात्मक वा नकारात्मक आसूं येतात, देखून हांव सकयल आनी उजवे वटेन ओडून घेतिल्ली कठीण सावळी वापरून “युक-युक डक” प्रतिकृती करूंक शकता: रंग: # f7f76d; मजकूर-सावळी: 5px 5px 0 # 1e1904;
दुसरे वटेन ह्या “पिंट जायंट” शीर्षकाक ताच्या नकारात्मक अर्द-मोव सावळे कडेन वेगळोच भाव आसा: रंग: # c2a872; मजकूर-सावळी: १. -7px 5px 0 # बी100ई, 2019। 0 -5px 10px # 546c6f;
अतिरिक्त खोलाय जोडपाक आनी चड मनोरंजक परिणाम तयार करपाक, हांव जायत्यो सावळी थरोवंक शकता. “Let’s Duck Out” खातीर, हांव चार सावळी एकठांय करतां: पयली घट्ट सावळी आनी ताचे भोंवतणी मजकूर उखलपाक नकारात्मक आडव्या ऑफसेट, उपरांत ताचे भोंवतणी धूसरपण तयार करपाक क्रमीक मोव सावळी: रंग: # 6F4D80; मजकूर-सावळी: १. -5px हें नांव5px 0 # 260e1e, /* सावली 1 */ 0 0 15px # e9ce96, /* सावळी 2 */ 0 0 30px # e9ce96, /* सावळी 3 */ 0 0 30px # e9ce96 हें नांव; /* सावली 4 */
हे सावळे दाखयतात की मजकूर-सावळी वापरप म्हणल्यार फकत प्रकाश प्रभाव तयार करप न्हय, कारण तीं सजावटीचीय आसूं येतात आनी व्यक्तीमत्व जोडूंक शकतात. मजकूर स्ट्रोक जायत्या कार्टून शीर्षक कार्डांनी मोटव्या बाह्यरेखा आशिल्लीं अक्षरां आसतात, जाका लागून तीं फाटल्यान वेगळीं दिसतात. हांव मजकूर-स्ट्रोक वापरून हो प्रभाव परतून तयार करूंक शकता. बरोच तेंप, ही गुणधर्म फकत -webkit- उपसर्ग वरवीं उपलब्ध आशिल्ली, पूण ताचोय अर्थ आतां आधुनीक ब्राउझरांनी ताका समर्थीत आसा.
text-stroke हो दोन गुणधर्मांचो आशुलिपी. पयलो मजकूर-स्ट्रोक-रुंदाय, वैयक्तीक अक्षरां भोंवतणी एक समोच्च रेखांकन करता, जाल्यार दुसरो, मजकूर-स्ट्रोक-रंग, ताच्या रंगाचेर नियंत्रण दवरता. “Whatever Goes Pup” खातीर, हांवें हळडुव्या मजकूरांत 4px निळो स्ट्रोक जोडला: रंग: # eff0cd; -वेबकिट-मजकूर-स्ट्रोक: 4px # 7890b5; मजकूर-स्ट्रोक: 4px # 7890b5;
स्ट्रोक खास करून उपेगी पडूं येतात जेन्ना ते सावळे वांगडा जोडटात, देखून “वाडपी, वाडपी, गेले” खातीर, हांवें हो तीन आयामी मजकूर परिणाम तयार करपाक कश्ट करून धूसर जाल्ल्या 1px सावळेक पातळ 3px स्ट्रोक जोडला: रंग: # fbb999; मजकूर-सावळी: 3px 5px 1px # 5160b1; -वेबकिट-मजकूर-स्ट्रोक: 3px # 984336; मजकूर-स्ट्रोक: 3px # 984336;
पेंट ऑर्डर मजकूर-स्ट्रोक वापरल्यार सदांच अपेक्षीत परिणाम मेळना, खास करून पातळ अक्षरां आनी दाट स्ट्रोक, कारण पूर्वनिर्धारीतपणान ब्राउझर भरपाचेर स्ट्रोक काडटा. दुख्खाची गजाल म्हळ्यार, CSS अजूनय म्हाका स्केचांत चड करून करता तशें स्ट्रोक प्लेसमेंट समायोजीत करपाक परवानगी दिना. पूण पेंट-ऑर्डर प्रॉपर्टींत अशीं मोलां आसात, जाका लागून म्हाका स्ट्रोक भरपा मुखार दवरचे परस फाटल्यान दवरपाक मेळटा.
paint-order: स्ट्रोक पयलीं स्ट्रोक रंगयता, मागीर भरप, जाल्यार पेंट-ऑर्डर: भरप हाचे उरफाटें करता: रंग: # fbb999; रंग-क्रम: भरप; मजकूर-सावळी: 3px 5px 1px # 5160b1; मजकूर-स्ट्रोक-रंग: # 984336; मजकूर-स्ट्रोक-रुंदी: 3px;
एक प्रभावी स्ट्रोक अक्षरां वाचपाक योग्य दवरता, वजन जोडटा आनी — सावळी आनी रंग क्रम हांचे वांगडा जोडल्यार — सपाट मजकूर खरी उपस्थिती दिता. मजकूर भितर पार्श्वभूंय जायते कार्टून शीर्षक कार्ड अक्षरांनी पोत, ग्रेडियेंट वा सचित्र तपशील घालून सपाट रंगा परस फुडें वतात. केन्ना केन्ना तें पोत, हेर वेळार सूक्ष्म स्वर शिफ्ट आशिल्लो ग्रेडियेंट आसूं येता. वेबचेर, मजकूरा फाटल्यान पार्श्वभूंय प्रतिमा वा ग्रेडियेंट वापरून, आनी मागीर अक्षरांच्या आकाराक क्लिप करून हो प्रभाव परतून तयार करूंक शकता. हे एकठांय काम करपी दोन गुणधर्मांचेर आदारीत आसा: background-clip: text आनी text-fill-color: पारदर्शक.
पयलीं मजकूर फाटल्यान फाटभूंय लागू करतां. ही बिटमॅप वा सदिश प्रतिमा वा CSS ग्रेडियेंट आसूं येता. “बाबा बेट” ह्या क्विक ड्रॉ मॅकग्रा एपिसोडांतल्या ह्या उदाहरणा खातीर, शीर्षक मजकूरांत काळखांतल्यान उजवाडाक सूक्ष्म वयर–सकयल ग्रेडियेंट आसपावीत केला: पार्श्वभूंय: रेखीव-ढाल (0deg, # 667b6a, # 1d271a);
फुडें, हांव ती पार्श्वभूंय ग्लिफांचेर क्लिप करतां आनी मजकूर पारदर्शक करतां म्हणजे पार्श्वभूंय ह्या माध्यमांतल्यान दाखयता: -वेबकिट-पार्श्वभूंय-क्लिप: मजकूर; -वेबकिट-मजकूर-भर-रंग: पारदर्शक;
फकत त्या दोन ओळीं कडेन आतां मजकूर फाटल्यान पार्श्वभूंय रंगयल्ली ना; ताचे बदला ताचे भितर रंगयला. हें तंत्र खास करून स्ट्रोक आनी सावळे वांगडा जोडल्यार बरें काम करता. क्लिप केल्लो ग्रेडियेंट अक्षरांक रंग आनी पोत दिता, स्ट्रोक ताचीं कांठां तीक्ष्ण दवरता आनी सावळी फाटल्यान वयर काडटा. एकठांय, ते हातान रंगयल्ल्या शीर्षक कार्डांचो थरयल्लो देखावो थोडो CSS सोडून हेर कितेंच वापरून परतून तयार करतात. सदां भशेन, क्लिप केल्लो मजकूर काळजीपूर्वक चांचणी करात, कारण ब्राउझर quirks केन्ना केन्नाय सावळे आनी रेंडरिंगाचेर परिणाम करूंक शकतात. मजकूर वैयक्तीक अक्षरांनी विभागप केन्ना केन्ना म्हाका पुराय उतर वा शीर्षक स्टायल करपाची इत्सा नासता. म्हाका वैयक्तीक अक्षरांक स्टायल करपाक जाय — एका पात्राक जाग्यार धुकलपाक, एका ग्लिफाक अतिरिक्त वजन दिवपाक वा कांय अक्षरांक स्वतंत्रपणान एनिमेट करपाक. साद्या HTML आनी CSS त, तें करपाचो एकूच विस्वासपात्र मार्ग आसा: दरेक वर्ण ताच्या स्वताच्या स्पॅन घटकांत गुठलावप. हांवें तें हाताळणीन करूंक शकतालें, पूण तें नाजूक आसतलें, सांबाळप कठीण आसतलें आनी प्रत बदलल्यार रोखडेंच पडटलें. ताचे बदला, जेन्ना म्हाका दर-अक्षर नियंत्रणाची गरज आसता, तेन्ना हांव splt.js सारकी मजकूर-विभाजन लायब्ररी वापरतां (जरी हेर उपाय उपलब्ध आसले तरी). हाका लागून मजकूर नोड घेता आनी आपोआप उतरां वा अक्षरां गुठलायता, म्हज्या मार्कअपाक गडबड करिनासतना एनिमेट करपाक आनी स्टायल करपाक अतिरिक्त हुक दिता. तो एक पद्दत जो म्हज्या एचटीएमएल वाचपाक योग्य आनी अर्थपूर्ण दवरता, तेच बरोबर म्हाका तुमकां क्लासिक कार्टून शीर्षक कार्डांत दिसपी असमान, चरित्रात्मक टायपोग्राफी परतून तयार करपाक म्हाका जाय आशिल्लें बारीक दाणेदार नियंत्रण दिता. पूण ही पद्दत येतासुलभताय सावधानताय, कारण चडशे स्क्रीन रीडर मजकूर नोड्स क्रमवारीन वाचतात. तर हें:
हम गोड हम
...तुमी अपेक्षा करतात तशें वाचता: हम गोड हम
पूण हें: १.
हें नांव ह हें नांव उ हें नांव m हें नांव
अशें म्हण्टात...ब्राउझर आनी स्क्रीन रीडराचेर आदारून वेगवेगळे अर्थ लावंक मेळटात. कांय जाण अक्षरां जोडटले आनी उतरां बरोबर वाचतले. हेर अक्षरां मदीं थांबूं येतात, जें वायट परिस्थितींत अशें दिसूं येता: “ह...” “उ...” “म...”
दुख्खाची गजाल म्हळ्यार, कांय विभाजन उपाय सदांच सुलभ परिणाम दिना, देखून हांवें म्हजो स्वताचो मजकूर विभाजक, splinter.js बरयला, जो सध्या बीटांत आसा. वैयक्तीक पत्रांचें रुपांतर करप म्हजो Toon Text Splitter सक्रिय करपाक, म्हाका विभाजीत करपाक जाय आशिल्ल्या घटकाक हांव डेटा- गुणधर्म जोडटां:
हम गोड हम
पयली, म्हजी लिपी दरेक शब्द वैयक्तीक अक्षरांनी वेगळो करता आनी वर्ग आनी एआरआयए गुणधर्म लागू केल्ल्या स्पॅन घटकांत गुठलायता:
उपरांत स्क्रिप्ट विभाजीत घटकाची सुरवातीची आशय घेता आनी सुलभताय सांबाळपाक मदत करपाक एरिया गुणधर्म म्हणून जोडटा:
अशें म्हण्टात
त्या वर्ग गुणधर्म लागू केल्यार, मागीर हांवें निवडिल्ले प्रमाण वैयक्तीक अक्षरांक स्टायल करूंक शकता.
देखीक, “हम गोड हम” खातीर, ताचीं अक्षरां मुळाव्या रेशे पासून कशीं पयस वतात हाची प्रतिकृती करपाक सोदतां. म्हजो Toon Text Splitter वापरल्या उपरांत, हांवें अर्द-रॅंडम लुक तयार करपाक जायते :nth-child निवडपी वापरून चार वेगवेगळीं अणकार मोलां लागू केलीं: /* 4 वी, 8 वी, 12 वी... */ .toon-char: nth-child (4n) { अणकारप: 0 -8px; } . /* 1 वी, 5 वी, 9 वी... */ .toon-char: nth-child (4n + 1) { अणकारप: 0 -4px; } . /* 2 वी, 6 वी, 10 वी... */ .toon-char: nth-child (4n + 2) { अणकारप: 0 4px; } . /* 3 वी, 7 वी, 11 वी... */ .toon-char: nth-child (4n + 3) { अणकारप: 0 8px; } .
पूण translate हो फकत एक गुणधर्म म्हज्या टून मजकूराचें रुपांतर करपाक वापरूं येता.
तशेंच त्या वैयक्तीक पात्रांक आनीकय अराजक देखाव्या खातीर घुंवडावंक मेळटालें: /* 4 वी, 8 वी, 12 वी... */ .toon-line .toon-char: nth-child (4n) { घुंवडावप: -4deg; } . /* 1 वी, 5 वी, 9 वी... */ .toon-char: nth-child (4n + 1) { घुंवडावप: -8deg; } . /* 2 वी, 6 वी, 10 वी... */ .toon-char: nth-child (4n + 2) { घुंवडावप: 4deg; } . /* 3 वी, 7 वी, 11 वी... */ .toon-char: nth-child (4n + 3) { घुंवडावप: 8deg; } .
पूण translate हो फकत एक गुणधर्म म्हज्या टून मजकूराचें रुपांतर करपाक वापरूं येता. तशेंच त्या वैयक्तीक पात्रांक आनीकय अराजक देखाव्या खातीर घुंवडावंक मेळटालें: /* 4 वी, 8 वी, 12 वी... */ .toon-line .toon-char:nth-child (4n) { . घुंवडावप: -4deg; } .
/* 1 वी, 5 वी, 9 वी... */ .toon-char:nth-child (4n+1) { घुंवडावप: -8deg; } .
/* 2 वी, 6 वी, 10 वी... */ .टून-चार: nth-child (4n + 2) { घुंवडावप: 4deg; } .
/* 3 वी, 7 वी, 11 वी... */ .toon-char:nth-child (4n+3) { घुंवडावप: 8deg; } .
आनी अर्थांतच, त्या पात्रांक जिगलिंग करपाक आनी म्हज्या टून मजकूर शैलीच्या शीर्षकांक जिवीत हाडपाक हांव एनिमेशन जोडूंक शकतालो. पयलीं, हांवें एक कीफ्रेम एनिमेशन तयार केलां जें पात्रांक घुंवडायता:
@कीफ्रेम जिगल { 0%, 100% { रुपांतर: घुंवडावप (var (--बेस-घुमावप, 0deg)); } . 25% { रुपांतर: घुंवडावप (calc (var (--बेस-घूर्णन, 0deg) + 3deg)); } . 50% { रुपांतर: घुंवडावप (calc (var (--बेस-घूर्णन, 0deg) - 2deg)); } . 75% { रुपांतर: घुंवडावप (calc (var (--बेस-घुमावप, 0deg) + 1deg)); } . } .
म्हज्या Toon Text Splitter कडल्यान तयार केल्ल्या span घटकांक लागू करचे पयलीं: .टून-चार { 1 . एनिमेशन: जिगल 3s अनंत सोयी-इन-आउट; रुपांतर-उत्पत्ती: केंद्र तळ; } .
आनी निमाणें, दरेक पात्र जिगलिंग सुरू करचे पयलीं घुंवपाची रक्कम आनी विलंब सेट करप: .toon-char: nth-child (4n) { --बेस-घुमावप: -2deg; } . .toon-char: nth-child (4n + 1) { --बेस-घूर्णन: -4deg; } . .toon-char: nth-child (4n + 2) { --बेस-घुमावप: 2deg; } . .toon-char: nth-child (4n + 3) { --बेस-घुमावप: 4deg; } .
.toon-char:nth-child (4n) { एनिमेशन-विलंब: 0.1s; } . .toon-char: nth-child (4n + 1) { एनिमेशन-विलंब: 0.3s; } . .toon-char: nth-child (4n + 2) { एनिमेशन-विलंब: 0.5s; } . .toon-char: nth-child (4n + 3) { एनिमेशन-विलंब: 0.7s; } .
एक फ्रेम एक छाप करपाक कार्टून शीर्षक कलाकारांक छाप काडपाक एक फ्रेम आसताली आनी तांणी रंगयल्ल्या कलाकृती इतलेंच तांची मुद्रणकला म्हत्वाची आशिल्ली. वेबचेरय तशेंच. बऱ्यान तयार केल्लो शीर्षक वा नायकक्षेत्राक स्पश्टताय, चरित्र आनी आत्मविस्वास जाय — फकत फीकी पडल्ली पुराय रुंदायेची पार्श्वभूंय प्रतिमा न्हय. कांय काळजीपूर्वक वेंचून काडिल्ल्या CSS गुणधर्मां वरवीं — सावळी, स्ट्रोक, क्लिप केल्लीं पार्श्वभूंय, आनी कांय संयमी एनिमेशन — आमी तोच परिणाम परतून तयार करूंक शकतात. म्हाका टून मजकूर आवडटा हांव नॉस्टॅल्जिक आशिल्ल्यान न्हय, पूण ताची डिझायन हेतून आशिल्ल्यान. मुद्दाम निवड करात, आनी थोडें टून मजकूर टाइपोग्राफी तुमच्या डिझायनांत पंच जोडूंक दिवचें.
