एक परियोजना को पूरा करने के बाद जिसके लिए मुझे सीएसएस और एसवीजी एनिमेशन के बारे में सब कुछ सीखना पड़ा, मैंने स्मैशिंग एनिमेशन और "कैसे क्लासिक कार्टून आधुनिक सीएसएस को प्रेरित करते हैं" के बारे में यह श्रृंखला लिखना शुरू कर दिया। इस वर्ष को समाप्त करने के लिए, मैं आपको दिखाना चाहता हूं कि आधुनिक सीएसएस का उपयोग करके उस तत्व को कैसे बनाया जाए जो टून टाइटल को इतना प्रभावशाली बनाता है: उनकी टाइपोग्राफी। शीर्षक कलाकृति डिज़ाइन 1920 और 30 के दशक के मूक युग में, फिल्म के शीर्षक कार्ड की टाइपोग्राफ़ी ने एक मूड बनाया, दृश्य सेट किया, और दर्शकों को उस प्रकार की फिल्म की याद दिलायी जिसे देखने के लिए उन्होंने भुगतान किया था।
कार्टून शीर्षक कार्ड में ब्रांडिंग, मूड और दृश्य-सेटिंग भी शामिल थी, सभी एक में समाहित थे। शुरुआती वर्षों में, जब प्रमुख स्टूडियो बजट बड़े होते थे, ये शीर्षक कार्ड अक्सर उदाहरणात्मक और चित्रात्मक होते थे।
लेकिन जब 1950 के दशक के दौरान टेलीविजन में तेजी आई, तो बजट में गिरावट आई और लॉरेंस "आर्ट" गोबल जैसे कलाकारों द्वारा डिजाइन किए गए कार्डों ने एक नई दृश्य भाषा अपनाई, जो अधिक ग्राफिक, शैलीबद्ध और कम जटिल हो गई। नोट: लॉरेंस "आर्ट" गोबल मध्य-शताब्दी के अमेरिकी एनीमेशन के अक्सर नजरअंदाज किए गए नायकों में से एक है। उन्होंने मुख्य रूप से 1950 और 1960 के दशक के सबसे प्रभावशाली वर्षों के दौरान हन्ना-बारबेरा के लिए काम किया। गोबल एक चरित्र एनिमेटर नहीं था। उनकी भूमिका माहौल बनाने की थी, इसलिए उन्होंने द फ्लिंटस्टोन्स, हकलबेरी हाउंड, क्विक ड्रॉ मैकग्रा और योगी बियर के लिए वातावरण तैयार किया, साथ ही शुरुआती शीर्षक कार्ड भी तैयार किए, जिन्होंने माहौल तैयार किया। उनके शीर्षक कार्ड, जिसमें लोगो के साथ पेंटिंग शामिल हैं, ने हन्ना-बारबेरा के प्रतिष्ठित रूप को परिभाषित करने में मदद की। क्विक ड्रॉ मैकग्रा और योगी बियर जैसे पात्रों के लिए गोबल की कलाकृति छोटे टीवी स्क्रीन पर प्रभावी थी। कार्टून से अभी भी पुन: प्रस्तुत करने के बजाय, उन्होंने एक एकल, मजबूत विचार प्रस्तुत करने पर ध्यान केंद्रित किया - अक्सर सिल्हूट में - जो इसके सार को पकड़ लेता है। "द बज़िन बियर" में, योगी एक हेलीकॉप्टर में घूमते हैं। वह हाथ में पिक-ए-निक टोकरी लेकर उछलता है, "बेयर ऑन अ पिकनिक" में, और अपने "प्राइज़ फाइट फ़्रेट" के लिए, योगी शीर्षक पाठ को बॉक्स में रखता है।
भरोसा करने के लिए बहुत कम या कोई गति नहीं होने के कारण, गोबल के एकल फ़्रेमों को एक मूड बनाना था, दृश्य सेट करना था और एक कहानी का वर्णन करना था। उन्होंने सपाट रंगों, ग्राफिक आकृतियों और टाइपोग्राफी का उपयोग करके ऐसा किया, जिसे अक्सर कलाकृति में एकीकृत किया गया था।
वेब पर काम करने वाले डिजाइनरों के रूप में, टून शीर्षक हमें किसी ब्रांड के व्यक्तित्व को व्यक्त करने, पहली छाप बनाने और किसी उत्पाद या वेबसाइट का उपयोग करके किसी के अनुभव के लिए अपेक्षाएं निर्धारित करने के बारे में बहुत कुछ सिखा सकते हैं। हम प्रभावी बैनर, लैंडिंग-पेज हेडर और यहां तक कि अच्छे पुराने जमाने की स्प्लैश स्क्रीन बनाने के लिए कलाकारों की तकनीकों से सीख सकते हैं। तून शीर्षक टाइपोग्राफी कार्टून शीर्षक कार्ड दिखाते हैं कि कैसे इमेजरी के साथ विलय प्रकार एक हेडर या नायक के लिए आवश्यक पंच प्रदान करता है। मुट्ठी भर टेक्स्ट-शैडो, टेक्स्ट-स्ट्रोक और ट्रांसफ़ॉर्म ट्रिक्स के साथ, आधुनिक सीएसएस आपको उसी ऊर्जा का उपयोग करने देता है।
तून पाठ शीर्षक जेनरेटर इस लेख को लिखने के दौरान, मुझे एहसास हुआ कि जिन कार्टून शीर्षकों को मैं बहुत पसंद करता हूँ, उनकी शैली में पाठ तैयार करने के लिए एक उपकरण होना उपयोगी होगा। तो मैंने एक बनाया. माई टून टेक्स्ट टाइटल जेनरेटर आपको रंगों, स्ट्रोक्स और एकाधिक टेक्स्ट छायाओं के साथ प्रयोग करने देता है। आप पेंट ऑर्डर को समायोजित कर सकते हैं, अक्षर रिक्ति लागू कर सकते हैं, नमूना फ़ॉन्ट के चयन में अपने टेक्स्ट का पूर्वावलोकन कर सकते हैं, और फिर किसी प्रोजेक्ट में उपयोग करने के लिए जेनरेट किए गए सीएसएस को सीधे अपने क्लिपबोर्ड पर कॉपी कर सकते हैं। तून शीर्षक सीएसएस आप बस उस सीएसएस को कॉपी-पेस्ट कर सकते हैं जो टून टेक्स्ट टाइटल जेनरेटर आपको प्रदान करता है। लेकिन आइए करीब से देखें कि यह क्या करता है। पाठ छाया ऑगी डॉगी के एपिसोड "युक-युक डक" के इस शीर्षक के प्रकार को देखें, इसके हल्के पीले अक्षरों और गहरे, कठोर, ऑफसेट छाया के साथ जो इसे पृष्ठभूमि से उठाता है और गहराई का भ्रम पैदा करता है।
आप शायद पहले से ही जानते हैं कि टेक्स्ट-शैडो चार मान स्वीकार करता है: (1) क्षैतिज और (2) लंबवत ऑफसेट, (3) धुंधला, और (4) एक रंग जो ठोस या अर्ध-पारदर्शी हो सकता है। वे ऑफसेट मान सकारात्मक या नकारात्मक हो सकते हैं, इसलिए मैं नीचे और दाईं ओर खींची गई एक कठोर छाया का उपयोग करके "युक-युक डक" को दोहरा सकता हूं: रंग: #f7f76d; पाठ-छाया: 5px 5px 0 #1e1904;
दूसरी ओर, इस "पिंट जाइंट" शीर्षक में इसकी नकारात्मक अर्ध-नरम छाया के साथ एक अलग एहसास है: रंग: #c2a872; पाठ-छाया: -7पीएक्स 5पीएक्स 0 #बी100ई, 0 -5px 10px #546c6f;
अतिरिक्त गहराई जोड़ने और अधिक दिलचस्प प्रभाव बनाने के लिए, मैं कई छायाएँ परत कर सकता हूँ। "लेट्स डक आउट" के लिए, मैं चार छायाओं को जोड़ता हूं: पहली पृष्ठभूमि से पाठ को उठाने के लिए एक नकारात्मक क्षैतिज ऑफसेट के साथ एक ठोस छाया, इसके बाद इसके चारों ओर एक धुंधलापन बनाने के लिए उत्तरोत्तर नरम छायाएं: रंग: #6F4D80; पाठ-छाया: -5px5px 0 #260e1e, /* छाया 1 */ 0 0 15px #e9ce96, /* छाया 2 */ 0 0 30px #e9ce96, /* छाया 3 */ 0 0 30px #e9ce96; /*छाया 4*/
ये छायाएँ दर्शाती हैं कि टेक्स्ट-शैडो का उपयोग केवल प्रकाश प्रभाव पैदा करने के बारे में नहीं है, क्योंकि वे सजावटी भी हो सकते हैं और व्यक्तित्व जोड़ सकते हैं। टेक्स्ट स्ट्रोक कई कार्टून शीर्षक कार्डों में बोल्ड आउटलाइन वाले अक्षर होते हैं जो उन्हें पृष्ठभूमि से अलग दिखाते हैं। मैं टेक्स्ट-स्ट्रोक का उपयोग करके इस प्रभाव को फिर से बना सकता हूं। लंबे समय तक, यह संपत्ति केवल -वेबकिट- उपसर्ग के माध्यम से उपलब्ध थी, लेकिन इसका मतलब यह भी है कि यह अब आधुनिक ब्राउज़रों में समर्थित है।
टेक्स्ट-स्ट्रोक दो गुणों का आशुलिपि है। पहला, टेक्स्ट-स्ट्रोक-चौड़ाई, अलग-अलग अक्षरों के चारों ओर एक रूपरेखा बनाता है, जबकि दूसरा, टेक्स्ट-स्ट्रोक-रंग, उसके रंग को नियंत्रित करता है। "व्हाटरिंग गोज़ पप" के लिए, मैंने पीले टेक्स्ट में 4px नीला स्ट्रोक जोड़ा: रंग: #eff0cd; -वेबकिट-टेक्स्ट-स्ट्रोक: 4पीएक्स #7890बी5; टेक्स्ट-स्ट्रोक: 4px #7890b5;
स्ट्रोक विशेष रूप से उपयोगी हो सकते हैं जब उन्हें छाया के साथ जोड़ा जाता है, इसलिए "ग्रोइंग, ग्रोइंग, गॉन" के लिए, मैंने इस त्रि-आयामी पाठ प्रभाव को बनाने के लिए बमुश्किल धुंधली 1px छाया में एक पतला 3px स्ट्रोक जोड़ा: रंग: #fbb999; टेक्स्ट-छाया: 3px 5px 1px #5160b1; -वेबकिट-टेक्स्ट-स्ट्रोक: 3पीएक्स #984336; टेक्स्ट-स्ट्रोक: 3पीएक्स #984336;
पेंट ऑर्डर टेक्स्ट-स्ट्रोक का उपयोग हमेशा अपेक्षित परिणाम नहीं देता है, विशेष रूप से पतले अक्षरों और मोटे स्ट्रोक के साथ, क्योंकि डिफ़ॉल्ट रूप से ब्राउज़र भरण पर एक स्ट्रोक खींचता है। अफसोस की बात है कि सीएसएस अभी भी मुझे स्ट्रोक प्लेसमेंट को समायोजित करने की अनुमति नहीं देता है जैसा कि मैं अक्सर स्केच में करता हूं। हालाँकि, पेंट-ऑर्डर प्रॉपर्टी में ऐसे मान हैं जो मुझे स्ट्रोक को फिल के सामने रखने के बजाय पीछे रखने की अनुमति देते हैं।
पेंट-ऑर्डर: स्ट्रोक पहले स्ट्रोक को पेंट करता है, फिर फिल को, जबकि पेंट-ऑर्डर: फिल इसके विपरीत करता है: रंग: #fbb999; पेंट-ऑर्डर: भरें; टेक्स्ट-छाया: 3px 5px 1px #5160b1; टेक्स्ट-स्ट्रोक-रंग:#984336; टेक्स्ट-स्ट्रोक-चौड़ाई: 3px;
एक प्रभावी स्ट्रोक अक्षरों को पढ़ने योग्य रखता है, वजन बढ़ाता है, और - छाया और पेंट क्रम के साथ संयुक्त होने पर - सपाट पाठ को वास्तविक उपस्थिति देता है। पाठ के अंदर पृष्ठभूमि कई कार्टून शीर्षक कार्ड अक्षरों में बनावट, ग्रेडिएंट या सचित्र विवरण जोड़कर सपाट रंग से आगे निकल जाते हैं। कभी-कभी यह एक बनावट होती है, कभी-कभी यह सूक्ष्म स्वर परिवर्तन के साथ एक ढाल हो सकती है। वेब पर, मैं टेक्स्ट के पीछे पृष्ठभूमि छवि या ग्रेडिएंट का उपयोग करके और फिर इसे अक्षरों के आकार में क्लिप करके इस प्रभाव को फिर से बना सकता हूं। यह एक साथ काम करने वाले दो गुणों पर निर्भर करता है: बैकग्राउंड-क्लिप: टेक्स्ट और टेक्स्ट-फिल-कलर: पारदर्शी।
सबसे पहले, मैं पाठ के पीछे एक पृष्ठभूमि लागू करता हूँ। यह एक बिटमैप या वेक्टर छवि या सीएसएस ग्रेडिएंट हो सकता है। क्विक ड्रा मैकग्रा एपिसोड "बाबा बैट" के इस उदाहरण के लिए, शीर्षक पाठ में अंधेरे से प्रकाश तक एक सूक्ष्म शीर्ष-नीचे ढाल शामिल है: पृष्ठभूमि: रैखिक-ढाल(0डिग्री, #667बी6ए, #1डी271ए);
इसके बाद, मैं उस पृष्ठभूमि को ग्लिफ़ पर क्लिप करता हूं और टेक्स्ट को पारदर्शी बनाता हूं ताकि पृष्ठभूमि दिखाई दे: -वेबकिट-बैकग्राउंड-क्लिप: टेक्स्ट; -वेबकिट-पाठ-भरण-रंग: पारदर्शी;
केवल उन दो पंक्तियों के साथ, पृष्ठभूमि अब पाठ के पीछे चित्रित नहीं होती है; इसके बजाय, यह इसके भीतर चित्रित है। स्ट्रोक और छाया के साथ संयुक्त होने पर यह तकनीक विशेष रूप से अच्छी तरह से काम करती है। एक क्लिप्ड ग्रेडिएंट अक्षरों को रंग और बनावट प्रदान करता है, एक स्ट्रोक इसके किनारों को तेज रखता है, और एक छाया इसे पृष्ठभूमि से ऊपर उठाती है। साथ में, वे थोड़े से सीएसएस के अलावा और कुछ नहीं का उपयोग करके हाथ से पेंट किए गए शीर्षक कार्डों के स्तरित स्वरूप को फिर से बनाते हैं। हमेशा की तरह, क्लिप किए गए टेक्स्ट का सावधानीपूर्वक परीक्षण करें, क्योंकि ब्राउज़र की विचित्रताएं कभी-कभी छाया और रेंडरिंग को प्रभावित कर सकती हैं। पाठ को अलग-अलग वर्णों में विभाजित करना कभी-कभी मैं पूरे शब्द या शीर्षक को स्टाइल नहीं करना चाहता। मैं अलग-अलग अक्षरों को स्टाइल करना चाहता हूं - किसी अक्षर को उसकी जगह पर धकेलना, एक ग्लिफ़ को अतिरिक्त वजन देना, या कुछ अक्षरों को स्वतंत्र रूप से एनिमेट करना। सादे HTML और CSS में, ऐसा करने का केवल एक ही विश्वसनीय तरीका है: प्रत्येक वर्ण को उसके स्वयं के स्पैन तत्व में लपेटें। मैं इसे मैन्युअल रूप से कर सकता था, लेकिन यह नाजुक होगा, इसे बनाए रखना कठिन होगा, और कॉपी बदलने पर जल्दी ही टूट जाएगा। इसके बजाय, जब मुझे प्रति-अक्षर नियंत्रण की आवश्यकता होती है, तो मैं splt.js जैसी टेक्स्ट-स्प्लिटिंग लाइब्रेरी का उपयोग करता हूं (हालांकि अन्य समाधान उपलब्ध हैं)। यह एक टेक्स्ट नोड लेता है और स्वचालित रूप से शब्दों या वर्णों को लपेटता है, जिससे मुझे अपने मार्कअप को खराब किए बिना एनिमेट और स्टाइल करने के लिए अतिरिक्त हुक मिलते हैं। यह एक ऐसा दृष्टिकोण है जो मेरे HTML को पठनीय और अर्थपूर्ण रखता है, जबकि मुझे क्लासिक कार्टून शीर्षक कार्डों में दिखाई देने वाली असमान, चरित्रपूर्ण टाइपोग्राफी को फिर से बनाने के लिए आवश्यक सूक्ष्म नियंत्रण प्रदान करता है। हालाँकि, यह दृष्टिकोण साथ आता हैपहुंच संबंधी चेतावनियां, क्योंकि अधिकांश स्क्रीन रीडर टेक्स्ट नोड्स को क्रम में पढ़ते हैं। तो यह:
हम मीठे हम
...जैसा आप उम्मीद करेंगे वैसा ही पढ़ें: हम मधुर हम
लेकिन यह:
H यू म
...ब्राउज़र और स्क्रीन रीडर के आधार पर इसकी अलग-अलग व्याख्या की जा सकती है। कुछ लोग अक्षरों को जोड़ देंगे और शब्दों को सही ढंग से पढ़ेंगे। अन्य लोग अक्षरों के बीच रुक सकते हैं, जो सबसे खराब स्थिति में ऐसा लग सकता है: "ह..." "उ..." "म..."
अफसोस की बात है कि कुछ विभाजन समाधान हमेशा सुलभ परिणाम नहीं देते हैं, इसलिए मैंने अपना स्वयं का टेक्स्ट स्प्लिटर, स्प्लिंटर.जेएस लिखा है, जो वर्तमान में बीटा में है। व्यक्तिगत पत्रों को रूपांतरित करना अपने टून टेक्स्ट स्प्लिटर को सक्रिय करने के लिए, मैं उस तत्व में एक डेटा-विशेषता जोड़ता हूं जिसे मैं विभाजित करना चाहता हूं:
हम स्वीट हम
सबसे पहले, मेरी स्क्रिप्ट प्रत्येक शब्द को अलग-अलग अक्षरों में अलग करती है और उन्हें वर्ग और ARIA विशेषताओं के साथ एक स्पैन तत्व में लपेटती है:
स्क्रिप्ट तब विभाजित तत्व की प्रारंभिक सामग्री लेती है और पहुंच बनाए रखने में सहायता के लिए इसे एरिया विशेषता के रूप में जोड़ती है:
उन वर्ग विशेषताओं को लागू करने के बाद, मैं अपनी पसंद के अनुसार अलग-अलग पात्रों को स्टाइल कर सकता हूं।
उदाहरण के लिए, "हम स्वीट हम" के लिए, मैं यह दोहराना चाहता हूं कि कैसे इसके अक्षर आधार रेखा से दूर चले जाते हैं। अपने टून टेक्स्ट स्प्लिटर का उपयोग करने के बाद, मैंने सेमी-रैंडम लुक बनाने के लिए कई :nth-child चयनकर्ताओं का उपयोग करके चार अलग-अलग अनुवाद मान लागू किए: /*चौथी, आठवीं, बारहवीं...*/ .toon-char:nth-child(4n) { अनुवाद: 0 -8px; } /* पहला, 5वां, 9वां... */ .toon-char:nth-child(4n+1) { अनुवाद: 0 -4px; } /* 2रा, 6ठा, 10वाँ... */ .toon-char:nth-child(4n+2) { अनुवाद: 0 4px; } /* तीसरा, 7वां, 11वां... */ .toon-char:nth-child(4n+3) { अनुवाद: 0 8px; }
लेकिन अनुवाद केवल एक संपत्ति है जिसका उपयोग मैं अपने टून टेक्स्ट को बदलने के लिए कर सकता हूं।
मैं और अधिक अराजक रूप के लिए उन व्यक्तिगत पात्रों को घुमा भी सकता हूँ: /*चौथी, आठवीं, बारहवीं...*/ .टून-लाइन .टून-चार:एनथ-चाइल्ड(4एन) { रोटेट: -4डिग्री; } /* पहला, 5वां, 9वां... */ .toon-char:nth-child(4n+1) { घुमाएँ: -8deg; } /* 2रा, 6ठा, 10वाँ... */ .toon-char:nth-child(4n+2) { घुमाएँ: 4deg; } /* तीसरा, 7वां, 11वां... */ .toon-char:nth-child(4n+3) { घुमाएँ: 8deg; }
लेकिन अनुवाद केवल एक संपत्ति है जिसका उपयोग मैं अपने टून टेक्स्ट को बदलने के लिए कर सकता हूं। मैं और अधिक अराजक रूप के लिए उन व्यक्तिगत पात्रों को घुमा भी सकता हूँ: /*चौथी, आठवीं, बारहवीं...*/ .टून-लाइन .टून-चार:एनथ-चाइल्ड(4एन) { घुमाएँ: -4डिग्री; }
/* पहला, 5वां, 9वां... */ .toon-char:nth-child(4n+1) { घुमाएँ: -8डिग्री; }
/* 2रा, 6ठा, 10वाँ... */ .toon-char:nth-child(4n+2) { घुमाएँ: 4डिग्री; }
/* तीसरा, 7वां, 11वां... */ .toon-char:nth-child(4n+3) { घुमाएँ: 8डिग्री; }
और, निःसंदेह, मैं उन पात्रों को हिलाने के लिए एनिमेशन जोड़ सकता हूं और अपने टून टेक्स्ट स्टाइल शीर्षकों को जीवंत बना सकता हूं। सबसे पहले, मैंने एक कीफ़्रेम एनीमेशन बनाया जो पात्रों को घुमाता है:
@कीफ़्रेम्स जिगल { 0%, 100% { ट्रांसफॉर्म: रोटेट(var(--बेस-रोटेट, 0डिग्री)); } 25% {परिवर्तन: रोटेट(कैल्क(var(--बेस-रोटेट, 0डिग्री) + 3डिग्री)); } 50% {परिवर्तन: रोटेट(कैल्क(var(--बेस-रोटेट, 0डिग्री) - 2डिग्री)); } 75% {परिवर्तन: रोटेट(कैल्क(var(--बेस-रोटेट, 0डिग्री) + 1डिग्री)); } }
मेरे टून टेक्स्ट स्प्लिटर द्वारा बनाए गए स्पैन तत्वों पर इसे लागू करने से पहले: .टून-चार { एनीमेशन: जिगल 3एस अनंत आसानी से अंदर-बाहर; परिवर्तन-उत्पत्ति: केंद्र तल; }
और अंत में, प्रत्येक वर्ण के हिलने-डुलने से पहले रोटेशन की मात्रा और विलंब निर्धारित करना: .टून-चार:एनवां-चाइल्ड(4एन) { --बेस-रोटेट: -2डिग्री; } .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; }
प्रभाव डालने के लिए एक फ्रेम कार्टून शीर्षक कलाकारों के पास प्रभाव डालने के लिए एक फ्रेम था, और उनकी टाइपोग्राफी उनके द्वारा चित्रित कलाकृति जितनी ही महत्वपूर्ण थी। वेब पर भी यही सच है. एक अच्छी तरह से डिज़ाइन किया गया हेडर या हीरोक्षेत्र को स्पष्टता, चरित्र और आत्मविश्वास की आवश्यकता है - न कि केवल एक फीकी पूर्ण-चौड़ाई वाली पृष्ठभूमि छवि की। कुछ सावधानी से चुने गए सीएसएस गुणों - छाया, स्ट्रोक, क्लिप की गई पृष्ठभूमि और कुछ संयमित एनीमेशन के साथ - हम उसी प्रभाव को फिर से बना सकते हैं। मुझे टून टेक्स्ट पसंद है इसलिए नहीं कि मैं उदासीन हूं, बल्कि इसलिए कि इसका डिज़ाइन जानबूझकर किया गया है। सोच-समझकर चुनाव करें और थोड़ी सी टून टेक्स्ट टाइपोग्राफी को अपने डिजाइनों में नयापन लाने दें।
