CSS आणि SVG ॲनिमेशनबद्दल मला जे काही शिकता येईल ते सर्व शिकण्याची गरज असलेला प्रोजेक्ट पूर्ण केल्यानंतर, मी स्मॅशिंग ॲनिमेशन आणि "क्लासिक कार्टून आधुनिक सीएसएसला कशा प्रकारे प्रेरणा देतात" याबद्दल ही मालिका लिहायला सुरुवात केली. हे वर्ष पूर्ण करण्यासाठी, मी तुम्हाला दाखवू इच्छितो की आधुनिक CSS ते घटक तयार करण्यासाठी कसे वापरावे जे Toon Titles ला इतके प्रभावी बनवते: त्यांची टायपोग्राफी. शीर्षक आर्टवर्क डिझाइन 1920 च्या मूक युगात आणि 30 च्या दशकाच्या सुरुवातीच्या काळात, चित्रपटाच्या शीर्षक कार्डाच्या टायपोग्राफीने मूड तयार केला, दृश्य सेट केले आणि प्रेक्षकांना त्यांनी कोणत्या प्रकारचा चित्रपट पाहण्यासाठी पैसे दिले याची आठवण करून दिली.
कार्टून शीर्षक कार्ड देखील ब्रँडिंग, मूड आणि सीन-सेटिंग होते, सर्व एकामध्ये आणले गेले. सुरुवातीच्या काळात, जेव्हा मुख्य स्टुडिओचे बजेट मोठे होते, तेव्हा ही शीर्षक कार्डे अनेकदा स्पष्टीकरणात्मक आणि चित्रमय असायची.
पण जेव्हा 1950 च्या दशकात टेलिव्हिजनची भरभराट झाली, तेव्हा बजेट कमी झाले आणि लॉरेन्स “आर्ट” गोबल सारख्या कलाकारांनी डिझाइन केलेल्या कार्डांनी एक नवीन व्हिज्युअल भाषा स्वीकारली, जी अधिक ग्राफिक, शैलीबद्ध आणि कमी गुंतागुंतीची बनली. टीप: लॉरेन्स "आर्ट" गोबल हा मध्य शतकातील अमेरिकन ॲनिमेशनच्या अनेकदा दुर्लक्षित केलेल्या नायकांपैकी एक आहे. 1950 आणि 1960 च्या दशकातील सर्वात प्रभावशाली वर्षांमध्ये त्यांनी प्रामुख्याने हॅना-बार्बेरा साठी काम केले. गोबल हा कॅरेक्टर ॲनिमेटर नव्हता. त्याची भूमिका वातावरण निर्माण करण्याची होती, म्हणून त्याने फ्लिंटस्टोन्स, हकलबेरी हाउंड, क्विक ड्रॉ मॅकग्रॉ आणि योगी बेअर, तसेच टोन सेट करणाऱ्या सुरुवातीच्या शीर्षक कार्डांसाठी वातावरण तयार केले. लोगो आच्छादित असलेली पेंटिंग्ज असलेले त्याचे शीर्षक कार्ड, हॅना-बार्बेराचे प्रतिष्ठित रूप परिभाषित करण्यात मदत करतात. Quick Draw McGraw आणि Yogi Bear सारख्या पात्रांसाठी गोबलची कलाकृती छोट्या टीव्ही स्क्रीनवर प्रभावी होती. व्यंगचित्रातून स्थिरचित्र पुनरुत्पादित करण्याऐवजी, त्याने एक एकल, मजबूत कल्पना सादर करण्यावर लक्ष केंद्रित केले — अनेकदा सिल्हूटमध्ये — ज्याने त्याचे सार पकडले. "The Buzzin' Bear" मध्ये, योगी हेलिकॉप्टरमधून आवाज करत आहेत. "Bear on a Picnic" मध्ये, हातात पिक-ए-निक बास्केट घेऊन, आणि त्याच्या "प्राईझ फाईट फ्राइट" साठी, योगी शीर्षकाचा मजकूर बॉक्स करतो.
विसंबून राहण्यासाठी कमी किंवा कोणतीही हालचाल नसताना, गोबलच्या सिंगल फ्रेम्सना मूड तयार करणे, दृश्य सेट करणे आणि कथेचे वर्णन करणे आवश्यक होते. त्यांनी हे सपाट रंग, ग्राफिक आकार आणि टायपोग्राफी वापरून केले जे आर्टवर्कमध्ये वारंवार एकत्रित केले गेले.
वेबवर काम करणारे डिझायनर म्हणून, टून शीर्षके आम्हाला ब्रँडचे व्यक्तिमत्त्व कसे व्यक्त करायचे, पहिली छाप कशी निर्माण करायची आणि उत्पादन किंवा वेबसाइट वापरून एखाद्याच्या अनुभवासाठी अपेक्षा कशी ठेवायची याबद्दल बरेच काही शिकवू शकतात. प्रभावी बॅनर, लँडिंग-पेज हेडर आणि अगदी चांगल्या शैलीचे स्प्लॅश स्क्रीन तयार करण्यासाठी आम्ही कलाकारांच्या तंत्रांमधून शिकू शकतो. तून शीर्षक टायपोग्राफी कार्टून शीर्षक कार्ड इमेजरीसह विलीनीकरणाचा प्रकार हेडर किंवा नायकाला आवश्यक असलेला पंच कसा वितरीत करतो हे दर्शविते. मूठभर टेक्स्ट-शॅडो, टेक्स्ट-स्ट्रोक आणि ट्रान्सफॉर्म ट्रिक्ससह, आधुनिक CSS तुम्हाला त्याच उर्जेवर टॅप करू देते.
टून मजकूर शीर्षक जनरेटर हा लेख लिहिताना, मला जाणवले की मला खूप आवडते कार्टून शीर्षकांप्रमाणे मजकूर तयार करण्यासाठी एक साधन असणे उपयुक्त ठरेल. म्हणून मी एक बनवले. माय टून टेक्स्ट टायटल जनरेटर तुम्हाला रंग, स्ट्रोक आणि एकाधिक टेक्स्ट शॅडोसह प्रयोग करू देतो. तुम्ही पेंट ऑर्डर समायोजित करू शकता, अक्षरांमधील अंतर लागू करू शकता, नमुना फॉन्टच्या निवडीमध्ये तुमच्या मजकुराचे पूर्वावलोकन करू शकता आणि नंतर प्रोजेक्टमध्ये वापरण्यासाठी तयार केलेले CSS थेट तुमच्या क्लिपबोर्डवर कॉपी करू शकता. तून शीर्षक CSS टून टेक्स्ट टायटल जनरेटर तुम्हाला पुरवतो तो सीएसएस तुम्ही फक्त कॉपी-पेस्ट करू शकता. पण ते काय करते ते जवळून पाहूया. मजकूर सावली Augie Doggie च्या एपिसोड "Yuk-Yuk Duck" मधील या शीर्षकातील प्रकार पहा, त्याच्या फिकट पिवळ्या अक्षरांसह आणि गडद, कठोर, ऑफसेट सावली जे त्यास पार्श्वभूमीपासून दूर करते आणि खोलीचा भ्रम निर्माण करते.
तुम्हाला कदाचित आधीच माहित असेल की मजकूर-छाया चार मूल्ये स्वीकारते: (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; /* सावली ४ */
या सावल्या दर्शवतात की मजकूर-सावली वापरणे केवळ प्रकाश प्रभाव निर्माण करणे नाही, कारण ते सजावटीचे देखील असू शकतात आणि व्यक्तिमत्व जोडू शकतात. मजकूर स्ट्रोक अनेक कार्टून शीर्षक कार्डांमध्ये ठळक बाह्यरेखा असलेली अक्षरे असतात ज्यामुळे ते पार्श्वभूमीतून वेगळे दिसतात. मी टेक्स्ट स्ट्रोक वापरून हा प्रभाव पुन्हा तयार करू शकतो. बऱ्याच काळापासून, ही मालमत्ता केवळ -वेबकिट- उपसर्गाद्वारे उपलब्ध होती, परंतु याचा अर्थ असा आहे की आता आधुनिक ब्राउझरवर समर्थित आहे.
मजकूर-स्ट्रोक हा दोन गुणधर्मांसाठी लघुलेख आहे. पहिला, मजकूर-स्ट्रोक-रुंदी, वैयक्तिक अक्षरांभोवती एक समोच्च काढतो, तर दुसरा, मजकूर-स्ट्रोक-रंग, त्याचा रंग नियंत्रित करतो. “Whatever Goes Pup” साठी मी पिवळ्या मजकुरात 4px निळा स्ट्रोक जोडला: रंग: #eff0cd; -वेबकिट-टेक्स्ट-स्ट्रोक: 4px #7890b5; मजकूर-स्ट्रोक: 4px #7890b5;
स्ट्रोक विशेषतः उपयोगी असू शकतात जेव्हा ते सावल्यांसोबत एकत्र केले जातात, म्हणून "वाढते, वाढणे, गेले" साठी, हा त्रिमितीय मजकूर प्रभाव तयार करण्यासाठी मी केवळ अस्पष्ट 1px सावलीत एक पातळ 3px स्ट्रोक जोडला: रंग: #fbb999; मजकूर-छाया: 3px 5px 1px #5160b1; -वेबकिट-टेक्स्ट-स्ट्रोक: 3px #984336; मजकूर-स्ट्रोक: 3px #984336;
पेंट ऑर्डर मजकूर-स्ट्रोक वापरल्याने नेहमीच अपेक्षित परिणाम मिळत नाही, विशेषत: पातळ अक्षरे आणि जाड स्ट्रोकसह, कारण डीफॉल्टनुसार ब्राउझर फिलवर स्ट्रोक काढतो. दुर्दैवाने, CSS अजूनही मला स्ट्रोक प्लेसमेंट समायोजित करण्याची परवानगी देत नाही जसे मी अनेकदा स्केचमध्ये करतो. तथापि, पेंट-ऑर्डर मालमत्तेची मूल्ये आहेत जी मला स्ट्रोकला फिलच्या पुढे न ठेवता मागे ठेवण्याची परवानगी देतात.
पेंट-ऑर्डर: स्ट्रोक आधी स्ट्रोक रंगवतो, नंतर फिल, तर पेंट-ऑर्डर: फिल उलट करतो: रंग: #fbb999; पेंट-ऑर्डर: भरा; मजकूर-छाया: 3px 5px 1px #5160b1; मजकूर-स्ट्रोक-रंग:#984336; मजकूर-स्ट्रोक-रुंदी: 3px;
प्रभावी स्ट्रोक अक्षरे वाचण्यायोग्य ठेवते, वजन वाढवते आणि — जेव्हा सावल्या आणि पेंट ऑर्डर एकत्र केले जाते — तेव्हा सपाट मजकूर वास्तविक उपस्थिती देते. मजकुराच्या आतील पार्श्वभूमी अनेक कार्टून शीर्षक कार्डे अक्षरांमध्ये पोत, ग्रेडियंट किंवा सचित्र तपशील जोडून सपाट रंगाच्या पलीकडे जातात. कधीकधी ते एक पोत असते, इतर वेळी ते सूक्ष्म टोनल शिफ्टसह ग्रेडियंट असू शकते. वेबवर, मी मजकुराच्या मागे पार्श्वभूमी प्रतिमा किंवा ग्रेडियंट वापरून आणि नंतर त्यास अक्षरांच्या आकारात क्लिप करून हा प्रभाव पुन्हा तयार करू शकतो. हे एकत्र काम करणाऱ्या दोन गुणधर्मांवर अवलंबून आहे: पार्श्वभूमी-क्लिप: मजकूर आणि मजकूर-फिल-रंग: पारदर्शक.
प्रथम, मी मजकुराच्या मागे पार्श्वभूमी लागू करतो. हे बिटमॅप किंवा वेक्टर प्रतिमा किंवा CSS ग्रेडियंट असू शकते. क्विक ड्रॉ मॅकग्रा भाग "बाबा बाईट" मधील या उदाहरणासाठी, शीर्षक मजकूरात गडद ते प्रकाशापर्यंत सूक्ष्म शीर्ष-तळाशी ग्रेडियंट समाविष्ट आहे: पार्श्वभूमी: रेखीय-ग्रेडियंट(0deg, #667b6a, #1d271a);
पुढे, मी ती पार्श्वभूमी ग्लिफ्सवर क्लिप करतो आणि मजकूर पारदर्शक बनवतो जेणेकरून पार्श्वभूमी याद्वारे दर्शवेल: -वेबकिट-पार्श्वभूमी-क्लिप: मजकूर; -वेबकिट-टेक्स्ट-फिल-रंग: पारदर्शक;
फक्त त्या दोन ओळींनी, मजकुराच्या मागे पार्श्वभूमी रंगत नाही; त्याऐवजी, ते त्यात रंगवलेले आहे. स्ट्रोक आणि सावल्या एकत्र केल्यावर हे तंत्र विशेषतः चांगले कार्य करते. एक क्लिप केलेला ग्रेडियंट अक्षरांना रंग आणि पोत प्रदान करतो, स्ट्रोक त्याच्या कडा तीक्ष्ण ठेवतो आणि सावली पार्श्वभूमीपासून उंच करते. एकत्रितपणे, ते थोडेसे CSS वापरून हाताने पेंट केलेल्या शीर्षक कार्डांचे स्तरित स्वरूप पुन्हा तयार करतात. नेहमीप्रमाणेच, क्लीप केलेला मजकूर काळजीपूर्वक तपासा, कारण ब्राउझरच्या क्वर्क काही वेळा सावल्या आणि प्रस्तुतीकरणावर परिणाम करू शकतात. वैयक्तिक वर्णांमध्ये मजकूर विभाजित करणे कधीकधी मला संपूर्ण शब्द किंवा शीर्षक स्टाईल करायचे नसते. मला वैयक्तिक अक्षरे स्टाईल करायची आहेत — एखादे अक्षर जागेवर ढकलण्यासाठी, एक ग्लिफ अतिरिक्त वजन द्या किंवा काही अक्षरे स्वतंत्रपणे ॲनिमेट करा. साध्या HTML आणि CSS मध्ये, ते करण्याचा एकच विश्वासार्ह मार्ग आहे: प्रत्येक वर्ण त्याच्या स्वतःच्या स्पॅन घटकामध्ये गुंडाळा. मी ते व्यक्तिचलितपणे करू शकतो, परंतु ते नाजूक, देखरेखीसाठी कठीण असेल आणि कॉपी बदलल्यावर त्वरीत खाली पडेल. त्याऐवजी, जेव्हा मला प्रति-अक्षर नियंत्रणाची आवश्यकता असते, तेव्हा मी splt.js सारखी मजकूर-विभाजन लायब्ररी वापरतो (जरी इतर उपाय उपलब्ध आहेत). हे एक मजकूर नोड घेते आणि शब्द किंवा वर्ण स्वयंचलितपणे गुंडाळते, माझ्या मार्कअपमध्ये गोंधळ न घालता मला ॲनिमेट आणि शैलीसाठी अतिरिक्त हुक देते. हा एक दृष्टीकोन आहे जो माझा HTML वाचनीय आणि अर्थपूर्ण ठेवतो, मला उत्कृष्ट कार्टून शीर्षक कार्ड्समध्ये दिसणारी असमान, वैशिष्ट्यपूर्ण टायपोग्राफी पुन्हा तयार करण्याची आवश्यकता असलेले बारीक नियंत्रण देताना. तथापि, हा दृष्टिकोन येतोप्रवेशयोग्यता चेतावणी, कारण बहुतेक स्क्रीन वाचक क्रमाने मजकूर नोड्स वाचतात. तर हे:
हम गोड हम
…तुमच्या अपेक्षेप्रमाणे वाचतो: हम गोड हम
पण हे:
H यू m
…ब्राउझर आणि स्क्रीन रीडरवर अवलंबून वेगळ्या पद्धतीने अर्थ लावला जाऊ शकतो. काही अक्षरे एकत्र करतील आणि शब्द बरोबर वाचतील. इतर अक्षरे दरम्यान विराम देऊ शकतात, जे सर्वात वाईट परिस्थितीत असे वाटू शकते: “H…” “U…” “M…”
दुर्दैवाने, काही स्प्लिटिंग सोल्यूशन्स नेहमी प्रवेश करण्यायोग्य परिणाम देत नाहीत, म्हणून मी माझे स्वतःचे मजकूर स्प्लिटर, splinter.js लिहिले आहे, जे सध्या बीटामध्ये आहे. वैयक्तिक अक्षरे बदलणे माझे टून टेक्स्ट स्प्लिटर सक्रिय करण्यासाठी, मी विभाजन करू इच्छित घटकामध्ये डेटा-विशेषता जोडतो:
हम स्वीट हम
प्रथम, माझी स्क्रिप्ट प्रत्येक शब्दाला स्वतंत्र अक्षरांमध्ये विभक्त करते आणि वर्ग आणि ARIA विशेषता लागू केलेल्या स्पॅन घटकामध्ये गुंडाळते:
स्क्रिप्ट नंतर स्प्लिट घटकाची प्रारंभिक सामग्री घेते आणि प्रवेशयोग्यता राखण्यात मदत करण्यासाठी ते aria विशेषता म्हणून जोडते:
त्या वर्ग विशेषता लागू करून, मी निवडल्याप्रमाणे वैयक्तिक वर्णांची शैली करू शकतो.
उदाहरणार्थ, "हम स्वीट हम" साठी, मला त्याची अक्षरे बेसलाइनपासून कशी दूर जातात याची प्रतिकृती बनवायची आहे. माझे टून टेक्स्ट स्प्लिटर वापरल्यानंतर, मी अर्ध-यादृच्छिक स्वरूप तयार करण्यासाठी अनेक :nth-चाइल्ड सिलेक्टर वापरून चार भिन्न भाषांतर मूल्ये लागू केली: /* 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वा... */ .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; }
परंतु भाषांतर हा फक्त एक गुणधर्म आहे ज्याचा वापर मी माझ्या टून मजकूराचे रूपांतर करण्यासाठी करू शकतो. आणखी गोंधळलेल्या स्वरूपासाठी मी ती वैयक्तिक वर्ण देखील फिरवू शकतो: /* 4था, 8वा, 12वा... */ .toon-line .toon-char:nth-child(4n) { फिरवा: -4 डिग्री; }
/* 1ली, 5वी, 9वी... */ .toon-char:nth-child(4n+1) { फिरवा: -8 डिग्री; }
/* 2रा, 6वा, 10वा... */ .toon-char:nth-child(4n+2) { फिरवा: 4deg; }
/* 3रा, 7वा, 11वा... */ .toon-char:nth-child(4n+3) { फिरवा: 8deg; }
आणि, अर्थातच, मी त्या पात्रांना हलका करण्यासाठी ॲनिमेशन जोडू शकतो आणि माझ्या टून टेक्स्ट शैलीतील शीर्षकांना जिवंत करू शकतो. प्रथम, मी एक कीफ्रेम ॲनिमेशन तयार केले जे वर्ण फिरवते:
@keyframes हिजडा { 0%, 100% { परिवर्तन: रोटेट(var(--बेस-रोटेट, 0deg)); } 25% { परिवर्तन: फिरवा(calc(var(-base-rotate, 0deg) + 3deg)); } 50% { रूपांतर: फिरवा(calc(var(-base-rotate, 0deg) - 2deg)); } 75% { परिवर्तन: फिरवा(calc(var(--base-rotate, 0deg) + 1deg)); } }
माझ्या टून टेक्स्ट स्प्लिटरने तयार केलेल्या स्पॅन घटकांवर ते लागू करण्यापूर्वी: .तून-चार { ॲनिमेशन: जिगल 3s अनंत सहज-इन-आउट; transform-origin: केंद्र तळाशी; }
आणि शेवटी, रोटेशनची रक्कम सेट करणे आणि प्रत्येक वर्ण हलका होण्यास सुरुवात होण्यापूर्वी विलंब: .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) { ॲनिमेशन-विलंब: 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 गुणधर्मांसह — छाया, स्ट्रोक, क्लिप केलेल्या पार्श्वभूमी आणि काही प्रतिबंधित ॲनिमेशन — आम्ही तोच प्रभाव पुन्हा तयार करू शकतो. मला टून मजकूर आवडतो कारण मी नॉस्टॅल्जिक आहे, पण त्याची रचना हेतुपुरस्सर आहे म्हणून. जाणूनबुजून निवड करा, आणि थोडेसे टून टेक्स्ट टायपोग्राफी तुमच्या डिझाइन्समध्ये पंच जोडू द्या.
