एकटा एहन प्रोजेक्ट पूरा केलाक बाद जाहि मे हमरा सीएसएस आ एसवीजी एनीमेशन के बारे मे सब किछु जानय पड़ैत छल, हम ई श्रृंखला स्मेशिंग एनीमेशन आ “हाउ क्लासिक कार्टून मॉडर्न सीएसएस के कोना प्रेरित करैत अछि” के बारे मे लिखय लगलहुं. एहि साल के गोल करय लेल हम अहां सभ के ई देखाबय चाहय छी जे आधुनिक सीएसएस के उपयोग कोना कएल जाए ओहि तत्व के बनाबय लेल जे टून टाइटल के एतेक प्रभावशाली बनाबैत अछि: ओकर टाइपोग्राफी. शीर्षक कलाकृति डिजाइन 1920 के दशक आ ’30 के दशक के शुरुआत के मौन युग में फिल्म के टाइटल कार्ड के टाइपोग्राफी एकटा मूड पैदा करैत छल, दृश्य के सेट करैत छल, आ एकटा दर्शक के याद दिलाबैत छल जे ओ कोन तरहक फिल्म देखय लेल पैसा देने छल.
कार्टून टाइटल कार्ड सेहो ब्रांडिंग, मूड, आ सीन-सेटिंग छल, सबटा एक मे गुड़कि गेल छल. शुरुआती साल में जखन पैघ स्टूडियो के बजट पैघ होइत छल तखन ई टाइटल कार्ड प्रायः सचित्र आ चित्रकारी छल ।
लेकिन 1950 के दशक में जखन टेलीविजन के तेजी आयल त बजट में गिरावट आयल आ लॉरेंस “आर्ट” गोबल सन कलाकार द्वारा डिजाइन कयल गेल कार्ड एकटा नव दृश्य भाषा अपना लेलक, जे बेसी ग्राफिक, स्टाइलिश, आ कम जटिल भ गेल. नोट : लॉरेंस “आर्ट” गोबल मध्य शताब्दीक अमेरिकी एनीमेशनक प्रायः अनदेखी कयल जायवला नायक मे सँ एक छथि | हुनी मुख्य रूप स॑ हान्ना-बारबेरा केरऽ सबसें प्रभावशाली साल १९५० आरू १९६० के दशक म॑ काम करलकै । गोबल कोनो चरित्र एनिमेटर नहि छलाह. हुनकऽ भूमिका वातावरण पैदा करना छेलै, ई लेली हुनी द फ्लिंटस्टोन्स, हकलबेरी हाउंड, क्विक ड्रॉ मैकग्रा, आरू योगी बियर लेली वातावरण के डिजाइन के साथ-साथ शुरुआती टाइटल कार्ड भी डिजाइन करलकै जे टोन सेट करै छेलै । हुनकऽ टाइटल कार्ड, जेकरा म॑ लोगो ओवरलेड वाला पेंटिंग छेलै, हान्ना-बारबेरा केरऽ प्रतिष्ठित लुक क॑ परिभाषित करै म॑ मदद करलकै । क्विक ड्रॉ मैकग्रा आरू योगी बियर जैसनऽ पात्र लेली गोबल केरऽ कलाकृति छोटऽ टीवी स्क्रीन प॑ प्रभावी छेलै । कार्टून केरऽ स्टिल केरऽ पुनरुत्पादन करै के बजाय, वू एकल, मजबूत विचार प्रस्तुत करै प॑ ध्यान केंद्रित करलकै — अक्सर सिल्हूट म॑ — जे एकरऽ सार क॑ कैप्चर करी क॑ रखै छेलै । “द बज़िन’ बियर” मे योगी हेलीकॉप्टर मे गुंजायमान भ’ जाइत छथि । हाथ में पिक-ए-निक टोकरी, “बियर ऑन ए पिकनिक” में उछलि जाय छै, आरो अपनऽ “प्राइज फाइट फ्राइट” के लेलऽ योगी शीर्षक पाठ के बॉक्स में डाल॑ छै ।
भरोसा करबाक लेल कम वा कोनो गति नहि रहला पर गोबल’क एकल फ्रेम मे एकटा मिजाज बनेबाक छल, दृश्य सेट करय पड़ैत छल, आ कोनो कथाक वर्णन करय पड़ैत छल. ई काम ई सब सपाट रंग, ग्राफिक आकृति, आरू टाइपोग्राफी के उपयोग करी क॑ करलकै जेकरा अक्सर कलाकृति म॑ समाहित करलऽ जाय छेलै ।
वेब पर काज करय वाला डिजाइनर के रूप में टून टाइटल हमरा सब के बहुत किछु सिखा सकैत अछि जे कोना कोनो ब्रांड के व्यक्तित्व के संप्रेषित कयल जाय, पहिल छाप बनाओल जाय, आ कोनो उत्पाद या वेबसाइट के उपयोग क’ क’ ककरो अनुभव के लेल अपेक्षा निर्धारित कयल जाय. हम कलाकार सब के तकनीक स सीख सकैत छी जे प्रभावी बैनर, लैंडिंग-पेज हेडर, आ एतय तक कि नीक ओल’ फैशन के स्पलैश स्क्रीन सेहो बना सकैत छी. टून शीर्षक टाइपोग्राफी कार्टून टाइटल कार्ड ई दर्शाबै छै कि टाइप क॑ इमेजरी के साथ मर्ज करला स॑ कोना हेडर या हीरो क॑ जरूरत के मुक्का मिलै छै । मुट्ठी भर टेक्स्ट-शैडो, टेक्स्ट-स्ट्रोक, आरू ट्रांसफॉर्म ट्रिक के साथ, आधुनिक सीएसएस आहाँ क॑ वू ही ऊर्जा म॑ टैप करै के सुविधा दै छै ।
टून पाठ शीर्षक जनरेटर ई लेख लिखै के आधा रास्ता में हमरा बुझायल जे हमरा बहुत पसंद के कार्टून टाइटल जेकाँ टेक्स्ट स्टाइल के टेक्स्ट जेनरेट के लेल एकटा टूल होयत त उपयोगी होयत। तेँ हम एकटा बनौलहुँ। हमर टून टेक्स्ट टाइटल जेनरेटर अहां कें रंग, स्ट्रोक, आ कईटा टेक्स्ट शैडो कें साथ प्रयोग करय कें सुविधा देयत छै. अहां पेंट के क्रम समायोजित क सकय छी, अक्षर के अंतराल लागू क सकय छी, नमूना फॉन्ट के चयन में अपन पाठ के पूर्वावलोकन क सकय छी, आओर फेर जेनरेट कएल गेल सीएसएस के सीधा अपन क्लिपबोर्ड पर कॉपी क सकय छी जे कोनो प्रोजेक्ट में उपयोग क सकय छी. टून शीर्षक सीएसएस अहां बस ओहि CSS कें कॉपी-पेस्ट कयर सकय छी जे टून टेक्स्ट टाइटल जेनरेटर अहां कें उपलब्ध करबैत छै. मुदा ई की करैत अछि, एहि पर गौर स’ देखल जाय। पाठ छाया औगी डॉगी केरऽ एपिसोड “युक-युक डक” केरऽ ई शीर्षक म॑ टाइप देखऽ, जेकरऽ पीला पीला अक्षर आरू गहरे, कठोर, ऑफसेट छाया छै जे एकरा पृष्ठभूमि स॑ उठाबै छै आरू गहराई के भ्रम पैदा करै छै ।
अहाँ सब के शायद पहिने स पता अछि जे टेक्स्ट-शैडो चारि मान स्वीकार करैत अछि : (1) क्षैतिज आ (2) ऊर्ध्वाधर ऑफसेट, (3) धब्बा, आ (4) एकटा एहन रंग जे ठोस या अर्ध-पारदर्शी भ सकैत अछि | ओ ऑफसेट मान सकारात्मक वा नकारात्मक भ’ सकैत अछि, तेँ हम नीचाँ आ दाहिना दिस खींचल कठोर छायाक उपयोग कए “युक-युक बतख” केँ नकल क’ सकैत छी: रंग: # f7f76d; पाठ-छाया: 5px 5px 0 # 1e1904;
दोसर दिस एहि “पिंट जाइंट” शीर्षक मे अपन नकारात्मक अर्ध-नरम छायाक संग एकटा अलगे एहसास अछि : रंग: # c2a872; पाठ-छाया: 1। -7px 5px 0 # b100e, 2019। 0 -5px 10px # 546c6f;
अतिरिक्त गहराई जोड़बाक लेल आ बेसी रोचक प्रभाव बनेबाक लेल हम एक सँ बेसी छाया लेयर क' सकैत छी । “लेट’स डक आउट” के लेल हम चारि टा छाया के संयोजन करैत छी: पहिल एकटा ठोस छाया के संग एकटा नकारात्मक क्षैतिज ऑफसेट के संग पाठ के पृष्ठभूमि स उठाबय लेल, ओकर बाद प्रगतिशील रूप स नरम छाया के संग ओकर चारू कात धब्बा बनेबाक लेल: रंग: # 6F4D80; पाठ-छाया: 1। -5px5px 0 # 260e1e, /* छाया 1 */ 1। 0 0 15px # e9ce96, /* छाया 2 */ 1। 0 0 30px # e9ce96, /* छाया 3 */ 1। 0 0 30px # e9ce96; /* छाया 4 */ 1।
ई छाया सब ई दर्शाबै छै कि टेक्स्ट-शैडो के प्रयोग खाली लाइटिंग इफेक्ट बनाबै के बात नै छै, कैन्हेंकि ई सजावटी भी होय सकै छै आरू व्यक्तित्व जोड़ै छै । पाठ स्ट्रोक बहुत सारा कार्टून टाइटल कार्डऽ म॑ बोल्ड रूपरेखा वाला अक्षर के प्रयोग करलऽ जाय छै जेकरा स॑ ई पृष्ठभूमि स॑ अलग होय जाय छै । हम टेक्स्ट-स्ट्रोक क उपयोग कए एहि प्रभाव कए पुनः बना सकैत छी । बहुत दिन स’ ई गुण केवल -webkit- उपसर्ग के माध्यम स’ उपलब्ध छल, मुदा एकर मतलब इहो अछि जे आब ई आधुनिक ब्राउजर मे समर्थित अछि.
text-stroke दू टा गुणक आशुलिपि अछि। पहिल, टेक्स्ट-स्ट्रोक-चौड़ाई, अलग-अलग अक्षर के चारू कात समोच्च खींचै छै, जबकि दोसर, टेक्स्ट-स्ट्रोक-रंग, ओकरऽ रंग के नियंत्रित करै छै । “Whatever Goes Pup” के लेल, हम पीला पाठ में 4px नील रंग के स्ट्रोक जोड़लहुं: रंग: # eff0cd; -वेबकिट-पाठ-स्ट्रोक: 4px # 7890b5; पाठ-स्ट्रोक: 4px # 7890b5;
स्ट्रोक विशेष रूप स’ उपयोगी भ’ सकैत अछि जखन ओकरा छायाक संग जोड़ल जाइत अछि, तेँ “बढ़ैत, बढ़ैत, गेल” लेल, हम ई तीन आयामी पाठ प्रभाव बनेबाक लेल मुश्किल सँ धुंधला 1px छाया मे एकटा पतला 3px स्ट्रोक जोड़लहुँ: रंग: # fbb999; पाठ-छाया: 3px 5px 1px # 5160b1; -वेबकिट-पाठ-स्ट्रोक: 3px # 984336; पाठ-स्ट्रोक: 3px # 984336;
पेंट ऑर्डर टेक्स्ट-स्ट्रोक के प्रयोग स॑ हमेशा अपेक्षित परिणाम नै मिलै छै, खास करी क॑ पतला अक्षर आरू मोटऽ स्ट्रोक के साथ, कैन्हेंकि डिफ़ॉल्ट रूप स॑ ब्राउज़र भरना के ऊपर स्ट्रोक खींचै छै । दुखक बात ई जे सीएसएस एखनो हमरा स्ट्रोक प्लेसमेंट एडजस्ट करबाक अनुमति नहि दैत अछि जेना हम प्रायः स्केच मे करैत छी । मुदा, पेंट-ऑर्डर प्रॉपर्टी में एहन मूल्य होइत छैक जे हमरा स्ट्रोक के फिल के आगू नहिं, पाछू राखि सकैत छी.
paint-order: स्ट्रोक पहिने स्ट्रोक के पेंट करैत अछि, फेर भरब, जखन कि पेंट-ऑर्डर: भरब एकर उल्टा करैत अछि: रंग: # fbb999; पेंट-ऑर्डर: भरना; पाठ-छाया: 3px 5px 1px # 5160b1; पाठ-स्ट्रोक-रंग: # 984336; पाठ-स्ट्रोक-चौड़ाई: 3px;
एक प्रभावी स्ट्रोक अक्षर क॑ पठनीय रखै छै, वजन जोड़ै छै, आरू — जब॑ छाया आरू रंग के क्रम के साथ जोड़लऽ जाय छै — त॑ सपाट पाठ क॑ वास्तविक उपस्थिति दै छै । पाठ के अंदर पृष्ठभूमि बहुत सारा कार्टून टाइटल कार्ड लेटरिंग म॑ बनावट, ढाल या सचित्र विस्तार जोड़ क॑ फ्लैट रंग स॑ आगू बढ़ी जाय छै । कखनो ओ बनावट त’ कखनो सूक्ष्म तान परिवर्तनक संग ढाल भ’ सकैत अछि । वेब पर, हम पाठ के पाछु बैकग्राउंड इमेज या ढाल के उपयोग क, आ फेर ओकरा अक्षर के आकार में क्लिप क क एहि प्रभाव के पुनः बना सकैत छी. ई दू टा गुण एक संग काज करय पर निर्भर करैत अछि: बैकग्राउंड-क्लिप: टेक्स्ट आओर टेक्स्ट-फिल-रंग: पारदर्शी.
पहिने हम पाठक पाछू एकटा पृष्ठभूमि लागू करैत छी। ई बिटमैप या वेक्टर छवि या CSS ढाल भ सकै छै. क्विक ड्रॉ मैकग्रा एपिसोड “बाबा बैट” केरऽ ई उदाहरण लेली, शीर्षक पाठ म॑ अन्हार स॑ प्रकाश म॑ एक सूक्ष्म ऊपर–नीचा ढाल शामिल छै: पृष्ठभूमि: रैखिक-ढाल (0deg, # 667b6a, # 1d271a);
आगू, हम ओहि बैकग्राउंड केँ ग्लिफ मे क्लिप करैत छी आ पाठ केँ पारदर्शी बना दैत छी जाहि सँ बैकग्राउंड एहि माध्यम सँ देखाइत अछि: -वेबकिट-पृष्ठभूमि-क्लिप: पाठ; -वेबकिट-पाठ-भरण-रंग: पारदर्शी;
बस ओहि दुनू पाँतिक संग आब पाठक पाछू पृष्ठभूमि नहि रंगल जाइत अछि; बल्कि, एकर भीतर रंगल अछि। ई तकनीक खास करी क॑ स्ट्रोक आरू छाया के साथ मिलाय क॑ अच्छा काम करै छै । क्लिप करलऽ गेलऽ ढाल लेटरिंग क॑ रंग आरू बनावट प्रदान करै छै, स्ट्रोक ओकरऽ किनारे क॑ तेज रखै छै, आरू छाया ओकरा पृष्ठभूमि स॑ ऊपर उठाबै छै । ई सब मिल क॑ हाथऽ स॑ चित्रित टाइटल कार्ड केरऽ लेयर वाला लुक क॑ कनी सीएसएस स॑ बेसी कुछ नै के उपयोग करी क॑ पुनः बनाबै छै । हमेशा के तरह, क्लिप करलऽ गेलऽ पाठ क॑ ध्यान स॑ परीक्षण करलऽ जाय, कैन्हेंकि ब्राउज़र केरऽ विचित्रता कखनी-कखनी छाया आरू रेंडरिंग क॑ प्रभावित करी सकै छै । पाठ के व्यक्तिगत वर्ण में विभाजन कखनो काल कोनो पूरा शब्द वा हेडिंग के स्टाइल नहि कर’ चाहैत छी. हम व्यक्तिगत अक्षर के स्टाइल करय चाहैत छी — कोनो पात्र के जगह पर धकेलब, एकटा ग्लिफ के अतिरिक्त वजन देब, या किछु अक्षर के स्वतंत्र रूप स एनिमेट करब। सादा एचटीएमएल आ सीएसएस मे, एकरा करबाक एकटा विश्वसनीय तरीका अछि: प्रत्येक वर्ण केँ ओकर अपन स्पैन तत्व मे लपेटब. हम से मैन्युअल रूपेँ क' सकैत छलहुँ, मुदा से नाजुक होयत, रखरखाव करब कठिन होयत, आ कॉपी बदलला पर जल्दीए टूटि जायत. एकर बजाय, जखन हमरा प्रति-अक्षर नियंत्रणक आवश्यकता होइत अछि, तखन हम splt.js सन पाठ-विभाजन लाइब्रेरीक उपयोग करैत छी (हालांकि अन्य समाधान उपलब्ध अछि) । ई एकटा टेक्स्ट नोड लैत अछि आ स्वचालित रूप सँ शब्द वा पात्र केँ लपेटि लैत अछि, जाहि सँ हमरा अपन मार्कअप मे कोनो गड़बड़ी केने बिना एनिमेट आ स्टाइल करबाक अतिरिक्त हुक भेटैत अछि । ई एकटा एहन तरीका अछि जे हमर एचटीएमएल पठनीय आ शब्दार्थ रखैत अछि, जखन कि हमरा ओ महीन दानादार नियंत्रण दैत अछि जे हमरा ओहि असमान, चरित्रात्मक टाइपोग्राफी केँ पुनः सृजन करबाक चाही जे अहाँ क्लासिक कार्टून टाइटल कार्ड मे देखैत छी. ओना ई दृष्टिकोण सेहो अबैत अछिसुलभता चेतावनी, कियाकि अधिकांश स्क्रीन रीडर पाठ नोड्स कें क्रम मे पढ़एयत छै. त ई:
हम मीठ हम
...जेना अहाँ अपेक्षा करब तेना पढ़ैत अछि: हम मीठ हम
मुदा ई : १.
ह उ m
क अछि...ब्राउजर आ स्क्रीन रीडर के आधार पर अलग-अलग व्याख्या कएल जा सकैत अछि. किछु गोटे अक्षर सभकेँ जोड़ि कऽ शब्द सभकेँ सही पढ़ि लेताह। दोसर लोकनि अक्षरक बीच रुकि सकैत छथि, जे खराब स्थिति मे एहन लागि सकैत अछि: “ह...” “उ...” “म...”
दुखक बात ई जे किछु विभाजन समाधान सदिखन सुलभ परिणाम नहि दैत अछि, तें हम अपन टेक्स्ट स्प्लिटर्स, splinter.js लिखने छी, जे एखन बीटा मे अछि. व्यक्तिगत पत्र के रूपांतरण अपनऽ टून टेक्स्ट स्प्लिटर्स क॑ सक्रिय करै लेली, हम्में वू तत्व म॑ एगो डाटा- एट्रिब्यूट जोड़ै छियै जेकरा हम स्प्लिट करना चाहै छियै:
हम मीठ हम
पहिने हमर स्क्रिप्ट प्रत्येक शब्द के अलग-अलग अक्षर में अलग करैत अछि आ ओकरा एकटा स्पैन तत्व में लपेटैत अछि जाहि में क्लास आ एआरआईए विशेषता लागू होइत अछि: म
तखन स्क्रिप्ट विभाजित तत्व कें प्रारंभिक सामग्री लैत छै आ ओकरा एरिया विशेषता कें रूप मे जोड़यत छै जे सुलभता कें बनाए रखय मे मदद करय छै:
म
क अछिओहि क्लास एट्रिब्यूट के लागू क' हम तखन अलग-अलग वर्ण के अपन पसंद के अनुसार स्टाइल क' सकैत छी.
जेना “हम स्वीट हम” लेल हम ई दोहराबय चाहैत छी जे एकर अक्षर आधार रेखा सँ कोना हटि जाइत अछि । अपन टून टेक्स्ट स्प्लिटर के उपयोग के बाद, हम एकटा सेमी-रैंडम लुक बनेबाक लेल कईटा :nth-child चयनकर्ता के उपयोग क चारि अलग-अलग ट्रांसलेट वैल्यू लागू केलहुं: /* चतुर्थ, ८, १२... */ .toon-char: nth-child (4n) { अनुवाद: 0 -8px; } . /* प्रथम, ५, ९... */ .toon-char: nth-child (4n + 1) { अनुवाद: 0 -4px; } . /* द्वितीय, 6, 10... */ .toon-char: nth-child (4n + 2) { अनुवाद: 0 4px; } . /* तृतीय, 7, 11... */ .toon-char: nth-child (4n + 3) { अनुवाद: 0 8px; } .
मुदा अनुवाद मात्र एकटा गुण अछि जकर उपयोग हम अपन टून पाठ के रूपांतरित करय लेल क सकैत छी ।
हम ओहि व्यक्तिगत पात्र सभ केँ आओर बेसी अराजक रूप लेल घुमा सकैत छलहुँ: /* चतुर्थ, ८, १२... */ .toon-लाइन .toon-char: nth-child (4n) { घुमाओ: -4deg; } . /* प्रथम, ५, ९... */ .toon-char: nth-child (4n + 1) { घुमाओ: -8deg; } . /* द्वितीय, 6, 10... */ .toon-char: nth-child (4n + 2) { घुमाओ: 4deg; } . /* तृतीय, 7, 11... */ .toon-char: nth-child (4n + 3) { घुमाओ: 8deg; } .
मुदा अनुवाद मात्र एकटा गुण अछि जकर उपयोग हम अपन टून पाठ के रूपांतरित करय लेल क सकैत छी । हम ओहि व्यक्तिगत पात्र सभ केँ आओर बेसी अराजक रूप लेल घुमा सकैत छलहुँ: /* चतुर्थ, ८, १२... */ .टून-लाइन .टून-चर: nth-child (4n) { घुमाउ: -4deg; } .
/* प्रथम, ५, ९... */ .टून-चर: nth-बच्चा (4n + 1) { घुमाउ: -8deg; } .
/* द्वितीय, 6, 10... */ .टून-चर: nth-बच्चा (4n + 2) { घुमाउ: 4deg; } .
/* तृतीय, 7, 11... */ .टून-चर: nth-बच्चा (4n + 3) { घुमाउ: 8deg; } .
आ, अवश्य, हम एनीमेशन जोड़ि सकैत छलहुं जे ओहि पात्र सभ कें जिगल क' सकैत छलहुं आ अपन टून टेक्स्ट स्टाइल टाइटल कें जीवंत क' सकैत छलहुं. पहिने हम एकटा कीफ्रेम एनीमेशन बनेलहुं जे पात्र कए घुमाबैत अछि:
@ कीफ्रेम जिगल { 0%, 100% { रूपांतरण: घुमाओ (var (--आधार-घूर्णन, 0deg)); } . 25% { रूपांतरण: घुमाओ (calc (var (--बेस-घूर्णन, 0deg) + 3deg)); } . 50% { रूपांतरण: घुमाओ (calc (var (--बेस-घूर्णन, 0deg) - 2deg)); } . 75% { रूपांतरण: घुमाओ (calc (var (--बेस-घूर्णन, 0deg) + 1deg)); } . } .
एकरा हमर टून टेक्स्ट स्प्लिटर्स द्वारा बनाओल गेल स्पैन तत्व पर लागू करबासँ पहिने: .टून-चर { एनीमेशन: जिगल 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 गुणऽ के साथ — छाया, स्ट्रोक, क्लिप करलऽ गेलऽ बैकग्राउंड, आरू कुछ संयमित एनीमेशन — हम्मं॑ वू ही प्रभाव क॑ पुनः बनाबै सकै छियै । हमरा टून टेक्स्ट एहि लेल नहि जे हम नॉस्टेलजिक छी, बल्कि एहि लेल जे एकर डिजाइन इरादापूर्वक अछि. जानि-बुझि क' चुनाव करू, आ कनि टून टेक्स्ट टाइपोग्राफी केँ अपन डिजाइन मे पंच जोड़य दियौक.
