इक प्रोजेक्ट खत्म करने दे बाद जिस च मिगी सीएसएस ते एसवीजी एनीमेशन दे बारे च सब किश जानने दी लोड़ ही, मैं इस श्रृंखला गी स्मैशिंग एनीमेशन ते "क्लासिक कार्टून आधुनिक सीएसएस गी किस चाल्ली प्रेरित करदे न" दे बारे च लिखना शुरू कीता। इस साल गी गोल करने आस्तै, मैं तुसेंगी दस्सना चांह् दा ऐ जे किस चाल्ली आधुनिक सीएसएस दा इस्तेमाल उस तत्व गी बनाने आस्तै कीता जंदा ऐ जेह् ड़ा टून टाइटल गी इन्ना प्रभावशाली बनांदा ऐ: उंदी टाइपोग्राफी। शीर्षक कलाकृति डिजाइन 1920 दे दशक ते ’30 दे दहाके दे शुरू च इक फिल्म दे टाइटल कार्ड दी टाइपोग्राफी ने इक मिजाज पैदा कीता, दृश्य सेट कीता, ते इक दर्शक गी उस किस्म दी फिल्म दी याद दिलांदी ही जिसगी उ’नें दिक्खने लेई पैसे दित्ते हे।
कार्टून दे टाइटल कार्ड वी ब्रांडिंग, मूड, अते सीन-सेटिंग सन, सारे हिक विच लुढ़क गिन। शुरूआती सालें च जदूं बड्डे स्टूडियो दे बजट बड्डे होंदे हे तां एह् टाइटल कार्ड अक्सर सचित्र ते चित्रकारी होंदे हे।
पर जदूं 1950 दे दहाके विच टेलीविजन दी तेजी आई तां बजट घट गिआ, ते लॉरेंस “आर्ट” गोबल जनेह् कलाकारें आसेआ डिजाइन कीते गेदे कार्डें ने इक नमीं दृश्य भाशा अपनाई, जेह्ड़ी होर ग्राफिक, स्टाइलिश ते कम जटिल होई गेई। नोट: लॉरेंस “आर्ट” गोबल मध्य सदी दे अमेरिकी एनीमेशन दे अक्सर अनदेखा नायकें च शामल न। उने मुक्ख तौर उप्पर हन्ना-बारबेरा आस्तै 1950 ते 1960 दे दशक दे उंदे सारें शा प्रभावशाली ब'रें च कम्म कीता हा। गोबल कोई किरदार एनिमेटर नेईं हा। उंदी भूमिका माहौल पैदा करना ही, इस करी उने द फ्लिंटस्टोन्स, हकलबेरी हाउंड, क्विक ड्रॉ मैकग्रा, ते योगी बियर आस्तै माहौल डिजाइन कीते, ते कन्नै गै शुरुआती टाइटल कार्ड बी डिजाइन कीते जेह्ड़े टोन सेट करदे हे। उंदे टाइटल कार्ड, जिंदे च लोगो ओवरलेड कन्नै पेंटिंग दिक्खी गेई ही, ने हन्ना-बारबेरा दे प्रतिष्ठित रूप गी परिभाषित करने च मदद कीती। क्विक ड्रॉ मैकग्रा ते योगी बियर जनेह् पात्रें आस्तै गोबल दी कलाकृति छोटे-छोटे टीवी स्क्रीन पर असरदार ही। कार्टून थमां इक स्टिल गी दोबारा पेश करने दे बजाए उ'नें इक गै, मजबूत विचार पेश करने पर ध्यान दित्ता - अक्सर सिल्हूट च - जेह्ड़ा इसदे सार गी कैप्चर करदा हा। “द बज़िन’ बियर” च योगी हेलीकाप्टर च गुंजाइश करदा ऐ। ओह् हत्थ च पिक-ए-निक टोकरी, "बियर ऑन ए पिकनिक" च उछालदा ऐ, ते अपने "प्राइज फाइट फ्राइट" आस्तै, योगी टाइटल टेक्स्ट गी बॉक्स च पांदा ऐ।
भरोसा करने आस्तै मती गति कन्नै जां कोई गति नेईं होने करी गोबले दे इकल फ्रेम गी इक मिजाज पैदा करना पौंदा हा, नजारा सेट करना पौंदा हा ते इक कहानी दा वर्णन करना पौंदा हा। उने एह् कम्म समतल रंगें, ग्राफिक आकृतियें, ते टाइपोग्राफी दा इस्तेमाल करियै कीता जेह्ड़ी अक्सर कलाकृति च शामल कीती जंदी ही।
वेब पर कम्म करने आह् ले डिजाइनर दे तौर पर, टून टाइटल असेंगी इस बारे च मता किश सिखा सकदे न जे किस चाल्ली इक ब्रांड दी शख्सियत गी संप्रेषित कीता जा, पैह् ली छाप बनाई जा, ते कुसै उत्पाद जां वेबसाइट दा इस्तेमाल करदे होई कुसै दे अनुभव आस्तै उम्मीदें गी सेट कीता जा। अस कलाकारें दी तकनीकें थमां सिक्खी सकने आं जे प्रभावी बैनर, लैंडिंग-पेज हेडर, ते इत्थूं तगर जे अच्छे ओल’ फैशन दी स्पलैश स्क्रीन बी बनाई सकने आं। टून टाइटल टाइपोग्राफी कार्टून टाइटल कार्ड दस्सदे न जे किस चाल्ली टाइप गी इमेजरी कन्नै मर्ज करना इक हेडर जां हीरो गी लोड़चदे मुक्का गी डिलीवर करदा ऐ। मुट्ठी भर टेक्स्ट-शैडो, टेक्स्ट-स्ट्रोक, ते ट्रांसफॉर्म ट्रिक कन्नै, आधुनिक सीएसएस तुसेंगी उस्सै ऊर्जा च टैप करने दी अनुमति दिंदा ऐ।
द टून टेक्स्ट टाइटल जनरेटर इस लेख गी लिखने दे अद्धे रस्ते च मिगी एहसास होई गेआ जे एह् फायदेमंद होग जे कार्टून दे टाइटल जि'नेंगी मैं बड़ा पसंद करना, उ'नेंगी शैली दे पाठ पैदा करने आस्तै इक औजार होऐ। तो मैं इक बनाया। मेरा टून पाठ शीर्षक जनरेटर तुसेंगी रंगें, स्ट्रोक, ते मते सारे पाठ छायाएं कन्नै प्रयोग करने दी अनुमति दिंदा ऐ। तुस पेंट क्रम समायोजित करी सकदे ओ, अक्षरें दी स्पेसिंग लागू करी सकदे ओ, नमूने फॉन्टें दे चयन च अपने पाठ दा पूर्वावलोकन करी सकदे ओ, ते फ्ही पैदा कीते गेदे CSS गी सीधे अपने क्लिपबोर्ड पर कॉपी करी सकदे ओ तां जे तुस कुसै प्रोजेक्ट च इस्तेमाल करी सकदे ओ. टून टाइटल सीएसएस तुस बस उस CSS गी कापी-पेस्ट करी सकदे ओ जेह् ड़ा टून टेक्स्ट टाइटल जनरेटर तुसेंगी उपलब्ध करोआंदा ऐ। पर आओ इस गल्लै गी होर नेड़में कन्नै दिक्खने आं जे एह् केह् करदा ऐ। पाठ छाया औगी डोगी दे एपिसोड “युक-युक डक” थमां इस शीर्षक च टाइप दिक्खो, जिसदे हल्के पीले अक्षर ते गहरे, कठोर, ऑफसेट छाया कन्नै जेह्ड़ा इसगी पृष्ठभूमि थमां उप्पर चुक्की लैंदा ऐ ते गहराई दा भ्रम पैदा करदा ऐ।
तुस शायद पैह् ले थमां गै जानदे ओ जे पाठ-छाया चार मूल्यें गी स्वीकार करदा ऐ: (1) क्षैतिज ते (2) ऊर्ध्वाधर ऑफसेट, (3) धब्बा, ते (4) इक रंग जेह् ड़ा ठोस जां अर्ध-पारदर्शी होई सकदा ऐ। ओह् ऑफसेट मूल्य सकारात्मक जां नकारात्मक होई सकदे न, इसलेई मैं इक कठोर छाया दा इस्तेमाल करियै "युक-युक बतख" दी नकल करी सकना ऐ जेह् ड़ी थल्ले ते दाएं पास्से खींची गेदी ऐ: रंग: # f7f76d ऐ; पाठ-छाया: 5px 5px 0 # 1e1904 ऐ;
दूई बक्खी, इस “पिंट जाइंट” टाइटल च अपनी नकारात्मक अर्ध-नरम छाया कन्नै इक बक्खरा एहसास ऐ: रंग: # सी 2 ए 872; पाठ-छाया: -7px 5px 0 # बी100ई, ऐ। 0 -5px 10px # 546c6f ऐ;
अतिरिक्त गहराई जोड़ने ते होर दिलचस्प प्रभाव बनाने लेई, मैं मते सारे छायाएं गी परत करी सकना ऐ। “लेट’स डक आउट” आस्तै, मैं चार छायाएं गी इकट्ठा करना: पैह् ली इक ठोस छाया जिसदे कन्नै पाठ गी पृष्ठभूमि थमां उप्पर चुक्की लैता जा, जिसदे बाद इसदे चारों-पार इक धब्बा पैदा करने आस्तै प्रगतिशील रूप कन्नै नरम छायाएं कन्नै: रंग: # 6 एफ 4 डी 80; पाठ-छाया: -5px ऐ5px 0 # 260e1e, /* छाया 1 */ ऐ। 0 0 15px # e9ce96, /* छाया 2 */ ऐ। 0 0 30px # e9ce96, /* छाया 3 */ ऐ। 0 0 30px # ई 9 सी 96 ऐ; /* छाया 4 */ ऐ।
एह् छाया दस्सदे न जे पाठ-छाया दा इस्तेमाल सिर्फ प्रकाश प्रभाव पैदा करने दा गै नेईं ऐ, कीजे एह् सजावटी बी होई सकदे न ते व्यक्तित्व बी जोड़ी सकदे न। पाठ स्ट्रोक कई कार्टून टाइटल कार्डें च बोल्ड रूपरेखा आह् ले अक्षरें दी पेशकश कीती जंदी ऐ जेह् ड़ी उनेंगी पृष्ठभूमि थमां बक्खरा बनांदी ऐ। मैं इस प्रभाव गी टेक्स्ट-स्ट्रोक दा इस्तेमाल करियै दुबारा बनाई सकना ऐ। लंबे समें थमां, एह् संपत्ति सिर्फ -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;
इक प्रभावी स्ट्रोक अक्षरें गी पठनीय बनांदा ऐ, वजन जोड़दा ऐ, ते — जदूं छाया ते पेंट क्रम कन्नै जोड़ेआ जंदा ऐ तां — सपाट पाठ असली मौजूदगी दिंदा ऐ। पाठ दे अंदर पृष्ठभूमि कई कार्टून टाइटल कार्ड लेटरिंग च बनावट, ढाल, जां सचित्र विस्तार जोड़ियै फ्लैट रंग कोला परे जांदे न। कदें-कदें एह् बनावट ऐ, दूई बारी एह् सूक्ष्म तान शिफ्ट कन्नै ढाल बी होई सकदा ऐ। वेब पर, मैं इस प्रभाव गी पाठ दे पिच्छें इक पृष्ठभूमि छवि जां ढाल दा इस्तेमाल करियै, ते फिर इसगी अक्षरें दे आकार च क्लिप करियै दुबारा बनाई सकना ऐ। एह् दो गुणें पर निर्भर करदा ऐ जेह् ड़े इकट्ठे कम्म करदे न : बैकग्राउंड-क्लिप: पाठ ते पाठ-भरण-रंग: पारदर्शी.
पैह्ले मैं पाठ दे पिच्छें इक बैकग्राउंड लागू करदा हां। एह् बिटमैप जां वेक्टर छवि जां सीएसएस ढाल बी होई सकदा ऐ। क्विक ड्रॉ मैकग्रा एपिसोड "बाबा चारा" थमां इस उदाहरन आस्तै, शीर्षक पाठ च न्हेरे थमां रोशनी च इक सूक्ष्म ऊपर-नीचे ढाल शामल ऐ: पृष्ठभूमि: रैखिक-ढाल (0 डिग्री, # 667b6a, # 1d271a);
अगले, मैं उस बैकग्राउंड गी ग्लिफें च क्लिप करदा हां ते पाठ गी पारदर्शी बनांदा हां तां जे बैकग्राउंड दे माध्यम कन्नै दस्सेआ जा: -वेबकिट-पृष्ठभूमि-क्लिप: पाठ; -वेबकिट-पाठ-भरण-रंग: पारदर्शी;
सिर्फ उहनां दो लाइनां नाल ही पाठ दे पिच्छे पृष्ठभूमि नहीं रंगी जांदी; बल्कि इसदे अंदर गै रंगे दा ऐ। एह् तकनीक खासतौर उप्पर उसलै ठीक कम्म करदी ऐ जिसलै एह् स्ट्रोक ते शैडो कन्नै जुड़ी दी होंदी ऐ । क्लिप कीता गेदा ढाल अक्षरें गी रंग ते बनावट प्रदान करदा ऐ, इक स्ट्रोक अपने किनारे गी तेज रखदा ऐ, ते इक छाया इसगी पृष्ठभूमि थमां उंचाई दिंदा ऐ। एह् इकट्ठे होईये हत्थें कन्नै रंगे दे टाइटल कार्ड दे परतदार रूप गी फिरी बनांदे न जेह् ड़ा थोह् ड़ी-मती सीएसएस थमां मता किश नेईं इस्तेमाल करदे न। हमेशा दी तर्ज पर, क्लिप कीते गेदे पाठ गी ध्यान कन्नै परीक्षण करो, कीजे ब्राउज़र दी quirks कदें-कदें छाया ते रेंडरिंग गी प्रभावित करी सकदे न. पाठ गी व्यक्तिगत अक्षरें च बंडना कदें-कदें मैं इक पूरे शब्द जां हेडिंग गी स्टाइल नेईं करना चांह् दा। मैं व्यक्तिगत अक्षरें गी स्टाइल करना चांह् दा ऐ — इक पात्र गी जगह च धकेलना, इक ग्लिफ गी अतिरिक्त वजन देना, जां किश अक्षरें गी स्वतंत्र रूप कन्नै एनिमेट करना। सादे HTML ते CSS च, ऐसा करने दा इक गै भरोसेमंद तरीका ऐ: हर इक वर्ण गी अपने स्पैन तत्व च लपेटना। मैं एह् मैन्युअल रूप कन्नै करी सकदा हा, पर एह् नाजुक होग, बनाए रखना मुश्कल होग, ते कापी बदलने पर जल्दी गै टूटी जंदा हा। इसदे बजाय, जदूं मिगी प्रति-अक्षर नियंत्रण दी लोड़ होंदी ऐ, तां मैं splt.js जनेह् पाठ-विभाजन लाइब्रेरी दा इस्तेमाल करदा ऐ (हालांके होर समाधान उपलब्ध न)। एह् इक टेक्स्ट नोड लैंदा ऐ ते स्वतः शब्दें जां वर्णें गी लपेटदा ऐ, जिस कन्नै मिगी अपने मार्कअप गी गंदगी कीते बगैर एनिमेट ते स्टाइल करने लेई अतिरिक्त हुक मिलदे न। एह् इक ऐसा तरीका ऐ जेह् ड़ा मेरे एचटीएमएल गी पठनीय ते अर्थपूर्ण बनांदा ऐ, जिसलै के मिगी ठीक-ठाक नियंत्रण दिंदा ऐ जेह् ड़ा मिगी उस असमान, चरित्र-चित्रण आह् ली टाइपोग्राफी गी दुबारा बनाने दी लोड़ ऐ जेह् ड़ी तुस क्लासिक कार्टून टाइटल कार्डें च दिक्खदे ओ। हालांकि, एह् दृष्टिकोण कन्नै गै औंदा ऐसुलभता चेतावनी, की जे मते सारे स्क्रीन रीडर पाठ नोड्स गी क्रमबद्ध तरीके कन्नै पढ़दे न। तो ए:
हम मीठा हम
...जिस चाल्ली तुस उम्मीद करदे ओ, पढ़दा ऐ: हम मीठा हम
पर एह्: <ज 2> <स्पैन>एच <स्पैन>उ <स्पैन>म दा
...ब्राउजर ते स्क्रीन रीडर दे आधार उप्पर बक्ख-बक्ख व्याख्या कीती जाई सकदी ऐ। कुसै गी अक्षरें गी जोड़ियै शब्दें गी ठीक ढंगै कन्नै पढ़ना पौग। दूए अक्षरें दे बिच्च रुकी सकदे न, जेह् ड़े बुरे हालात च इस चाल्ली लगदे न: “ह...” “यू...” “म...”
दुख दी गल्ल एह् ऐ जे किश बंड समाधान हमेशा सुलभ नतीजा नेईं दिंदे न, इसलेई मैं अपना खुद दा पाठ विभाजक, splinter.js लिखेआ ऐ, जेह् ड़ा इसलै बीटा च ऐ. व्यक्तिगत पत्रें गी बदलना अपने टून टेक्स्ट स्प्लिटर्स गी सक्रिय करने लेई, मैं उस तत्व च इक डेटा- एट्रिब्यूट जोड़ना जेह् ड़ा मैं स्प्लिट करना चांह् दा ऐ:
हम मीठा हम
पैह् ले, मेरी स्क्रिप्ट हर शब्द गी व्यक्तिगत अक्षरें च बक्ख करदी ऐ ते उनेंगी क्लास ते एआरआईए गुणें कन्नै लागू कीते गेदे स्पैन तत्व च लपेटदी ऐ: ऐ यू एम
इसदे बाद स्क्रिप्ट बंड तत्व दी शुरूआती सामग्री गी लैंदी ऐ ते इसगी एरिया विशेषता दे रूप च जोड़दी ऐ तां जे सुलभता गी बनाए रखने च मदद मिलै:
ऐ यू एम
दाउनें क्लास एट्रिब्यूटें गी लागू करने कन्नै, मैं उसदे बाद व्यक्तिगत वर्णें गी जि'यां चुनना ऐ, उ'यां गै स्टाइल करी सकना ऐ।
मसलन, “हम स्वीट हम” आस्तै मैं एह् नकल करना चांह् दा ऐ जे इसदे अक्षर आधार रेखा थमां कि’यां दूर हटी जंदे न। अपने टून टेक्स्ट स्प्लिटर्स दा इस्तेमाल करने दे बाद, मैं अर्ध-रैंडम लुक बनाने लेई केईं :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; } ऐ
पर अनुवाद करना सिर्फ इक गुण ऐ जिसदा इस्तेमाल मैं अपने टून पाठ गी बदलने लेई करी सकना ऐ।
मैं उनें व्यक्तिगत पात्रें गी होर बी अराजक रूप आस्तै बी घुमा सकदा हा: /* 4 वी, 8 वी, 12 वी... */ .टून-लाइन .टून-चार: nth-बच्चा (4 एन) { घुमाओ: -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; } ऐ
पर अनुवाद करना सिर्फ इक गुण ऐ जिसदा इस्तेमाल मैं अपने टून पाठ गी बदलने लेई करी सकना ऐ। मैं उनें व्यक्तिगत पात्रें गी होर बी अराजक रूप आस्तै बी घुमा सकदा हा: /* 4 वी, 8 वी, 12 वी... */ .टून-लाइन .टून-चर: एन वीं-बच्चा (4 एन) { घुमाना: -4deg; } ऐ
/* 1 वी, 5 वी, 9 वी... */ .टून-चर: एन वीं-बच्चा (4 एन + 1) { घुमाना: -8deg; } ऐ
/* 2 वी, 6 वी, 10 वी... */ .टून-चर: एन वीं-बच्चा (4 एन + 2) { घुमाना: 4deg ऐ; } ऐ
/* 3 वी, 7 वी, 11 वी... */ .टून-चर: एन वीं-बच्चा (4 एन + 3) { घुमाना: 8deg ऐ; } ऐ
ते, ज़ाहिर ऐ, मैं उनें पात्रें गी जिगल करने ते अपने टून टेक्स्ट स्टाइल दे टाइटलें गी जिंदा करने आस्तै एनीमेशन जोड़ सकदा हा। पैह् ले, मैं इक कीफ्रेम एनीमेशन बनाया जेह् ड़ा पात्रें गी घुमांदा ऐ:
@ कीफ्रेम्स जिगल { 0%, 100% { रूपांतरण: घुमाना (var (-- आधार-घूर्णन, 0deg)); } ऐ 25% { रूपांतरण: घुमाओ (calc (var (--बेस-घूर्णन, 0deg) + 3deg)); } ऐ 50% { रूपांतरण: घुमाओ (calc (var (--बेस-घूर्णन, 0deg) - 2deg)); } ऐ 75% { रूपांतरण: घुमाओ (calc (var (--बेस-घूर्णन, 0deg) + 1deg)); } ऐ } ऐ
मेरे टून टेक्स्ट स्प्लिटर्स द्वारा बनाई गेदी स्पैन तत्वें पर इसगी लागू करने थमां पैह् ले: .टून-चर { एनीमेशन: जिगल 3 एस अनंत आसानी-इन-आउट; रूपांतरण-मूल: केंद्र तल; } ऐ
ते अंत च, हर पात्र गी जिगलिंग शुरू करने थमां पैह् ले घुमाव दी रकम ते इक देरी सेट करना: .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 गुणें कन्नै — छाया, स्ट्रोक, क्लिप कीते गेदे बैकग्राउंड, ते किश संयमित एनीमेशन — अस उस्सै प्रभाव गी दुबारा बनाई सकने आं। मैं टून टेक्स्ट कन्नै इस आस्तै नेईं प्यार करना जे मैं नॉस्टैल्जिक ऐं, बल्के इस आस्तै जे इसदा डिजाइन इरादे कन्नै कीता गेदा ऐ। जानबूझकर चयन करो, ते थोड़ी टून टेक्स्ट टाइपोग्राफी गी अपने डिजाइनें च पंच जोड़ने देओ।
