دوای تەواوکردنی پڕۆژەیەک کە پێویستی بە فێربوونی هەموو شتێک بوو کە لە توانامدا بوو دەربارەی ئەنیمەیشنەکانی CSS و SVG، دەستم کرد بە نووسینی ئەم زنجیرەیە دەربارەی Smashing Animations و “How Classic Cartoons Inspire Modern CSS.” بۆ تەواوکردنی ئەمساڵ، دەمەوێت نیشانتان بدەم کە چۆن CSS مۆدێرن بەکاربهێنن بۆ دروستکردنی ئەو توخمەی کە Toon Titles زۆر کاریگەر دەکات: تایپۆگرافیای ئەوان. ناونیشان دیزاینی کاری هونەری لە سەردەمی بێدەنگی ساڵانی ١٩٢٠ و سەرەتای سییەکانی سەدەی ڕابردوودا، تایپۆگرافیای کارتی ناونیشانی فیلمێک مەزاجێکی دروست دەکرد و دیمەنەکەی دادەنا و بینەرانی ئەو جۆرە فیلمەی بیردەخستەوە کە پارەیان داوە بۆ بینینی.
هەروەها کارتی ناونیشانی کارتۆنەکان مارکە و مەزاج و دیمەنی دانانی بوون، هەموویان لە یەکدا کۆکرابوونەوە. لە ساڵانی سەرەتاییدا کە بودجەی سەرەکی ستۆدیۆکان گەورەتر بوو، ئەم کارتە ناونیشانانە زۆرجار وێناکردن و نیگارکێشی بوون.
بەڵام کاتێک تەلەفزیۆن لە ساڵانی ١٩٥٠دا گەشەی کرد، بودجە دابەزی و کارتەکانی دیزاینکراو لەلایەن هونەرمەندەکانی وەک لۆڕێنس "هونەر" گۆبڵ زمانێکی بینراوی نوێیان گرتەبەر، زیاتر گرافیکی و ستایل و کەمتر ئاڵۆز بوون. تێبینی: لۆڕێنس “هونەر” گۆبڵ یەکێکە لەو پاڵەوانانەی کە زۆرجار چاوپۆشی لێدەکرێت لە ئەنیمەیشنی ناوەڕاستی سەدەی ئەمریکادا. بە پلەی یەکەم لە کۆمپانیای هانا-باربێرا لە کاریگەرترین ساڵەکانی ساڵانی ١٩٥٠ و ١٩٦٠دا کاری کردووە. گۆبڵ ئەنیمەیشنی کارەکتەرەکان نەبوو. ڕۆڵی ئەو دروستکردنی کەشوهەوا بوو، بۆیە ژینگەکانی بۆ فیلمەکانی The Flintstones، Huckleberry Hound، Quick Draw McGraw و Yogi Bear دیزاین کرد، هەروەها کارتی ناونیشانی سەرەتایی کە تۆنەکەیان دانابوو. کارتە ناونیشانەکانی کە تابلۆکانی تێدابوو کە لۆگۆیەکیان لەسەر بوو، یارمەتیدەر بوون لە پێناسەکردنی دیمەنی ئایکۆنی هانا-باربێرا. کارە هونەریەکانی گۆبڵ بۆ کارەکتەرەکانی وەک Quick Draw McGraw و Yogi Bear لەسەر شاشە بچووکەکانی تەلەفزیۆن کاریگەر بوو. لەبری ئەوەی هێشتا وێنەیەکی کارتۆنەکە بەرهەمبهێنێتەوە، سەرنجی لەسەر پێشکەشکردنی تاکە بیرۆکەیەکی بەهێز بوو - زۆرجار بە شێوەی سیلۆیەت - کە جەوهەرەکەی گرتبوو. لە فیلمی “The Buzzin’ Bear”دا، یۆگی بە هێلیکۆپتەرێکەوە بە زەنگەوە تێدەپەڕێت. ئەو بە سەبەتەی وێنەگرتن لە دەستیدا، لە فیلمی "ورچ لە پیکنیک"دا، و بۆ "ترسی شەڕی خەڵات"ی خۆی، یۆگی دەقی ناونیشانەکەی بۆکس دەکات.
بە جووڵەیەکی کەم یان هیچەوە کە پشتی پێ ببەسترێت، تاکە چوارچێوەکانی گۆبڵ دەبوو مەزاجێک دروست بکەن و دیمەنەکە دابنێن و چیرۆکێک باس بکەن. ئەوان ئەم کارەیان بە بەکارهێنانی ڕەنگی تەخت و شێوەی گرافیک و تایپۆگرافی ئەنجامدا کە زۆرجار لە کارە هونەرییەکاندا یەکدەخران.
وەک دیزاینەرێک کە لەسەر وێب کاردەکەن، ناونیشانی toon دەتوانێت زۆر شتمان فێر بکات دەربارەی چۆنیەتی گەیاندنی کەسایەتی براندێک، سەرنجی یەکەم دروست بکەین، و چاوەڕوانییەکان بۆ ئەزموونی کەسێک دابنێین لە بەکارهێنانی بەرهەمێک یان ماڵپەڕێک. دەتوانین لە تەکنیکەکانی هونەرمەندان فێربین بۆ دروستکردنی بانەرێکی کاریگەر، سەردێڕی لاپەڕەی نیشتنەوە و تەنانەت شاشەی سپلاشی مۆدێلی باش. تایپۆگرافیای ناونیشانی توون کارتی ناونیشانی کارتۆن نیشان دەدات کە چۆن تێکەڵکردنی جۆر لەگەڵ وێنەکان ئەو پەنجەیە دەگەیەنێت کە سەردێڕێک یان پاڵەوانێک پێویستی پێیەتی. بە مشتێک لە فێڵەکانی سێبەری دەق، دەق-لێدان و گۆڕینی، CSS مۆدێرن ڕێگەت پێدەدات پەنجە بخەیتە سەر هەمان وزە.
مۆلیدەی ناونیشانی دەقی تون لە بەشێکی نووسینی ئەم بابەتەدا، تێگەیشتم کە بەسوود دەبێت ئامرازێک هەبێت بۆ دروستکردنی دەق کە وەک ئەو ناونیشانە کارتۆنیانەی کە زۆرم خۆشدەوێت ستایلەکەی هەبێت. بۆیە یەکێکم دروست کرد. My Toon Text Title Generator ڕێگەت پێدەدات تاقیکردنەوە لەسەر ڕەنگەکان، زەربە و چەندین سێبەری دەق بکەیت. دەتوانیت ڕێزبەندی بۆیاخ ڕێکبخەیت، دووری پیتەکان جێبەجێ بکەیت، پێشبینی دەقەکەت بکەیت لە هەڵبژاردنی فۆنتەکانی نمونەدا، و پاشان CSS دروستکراوەکە ڕاستەوخۆ کۆپی بکەیت بۆ کلیپبۆردەکەت بۆ ئەوەی لە پڕۆژەیەکدا بەکاری بهێنیت. Toon ناونیشان CSS دەتوانیت بە سادەیی ئەو CSS یە کۆپی-پەیست بکەیت کە Toon Text Title Generator بۆت دابین دەکات. بەڵام با لە نزیکەوە سەیری ئەوە بکەین کە چی دەکات. سێبەری دەق سەیری جۆری ئەم ناونیشانە بکەن لە ئەڵقەی “کۆتری یوک”ی ئۆگی دۆگی، بە پیتە زەردە کاڵەکانی و سێبەری تاریک و ڕەق و ئۆفسێت کە لە پاشبنەما هەڵیدەگرێت و وەهمی قووڵی دروست دەکات.
ڕەنگە پێشتر بزانیت کە سێبەری دەق چوار بەها وەرئەگرێت: (١) ئۆفسێتی ئاسۆیی و (٢) ئۆفسێتی ڕاست، (٣) کاڵبوونەوە، و (٤) ڕەنگێک کە دەتوانێت ڕەق یان نیمچە شەفاف بێت. ئەو بەها ئۆفسێتانە دەتوانن ئەرێنی یان نەرێنی بن، بۆیە دەتوانم “کۆتری یوک” دووبارە بکەمەوە بە بەکارهێنانی سێبەرێکی ڕەق کە کێشراوەتەوە خوارەوە و بۆ لای ڕاست: ڕەنگ: #f7f76d؛ سێبەری دەق: 5px 5px 0 #1e1904;
لە لایەکی دیکەوە ئەم ناونیشانە “پانتایی زەبەلاحە” هەستێکی جیاوازی هەیە لەگەڵ سێبەرە نیمچە نەرمە نەرێنییەکانی: ڕەنگ: #c2a872؛ دەق-سێبەر: -7px 5px 0 #b100e، 0 -5px 10px #546c6f؛
بۆ زیادکردنی قووڵی زیاتر و دروستکردنی کاریگەری سەرنجڕاکێشتر، دەتوانم چەندین سێبەر چین چین بکەم. بۆ “Let’s Duck Out”، چوار سێبەر تێکەڵ دەکەم: یەکەمیان سێبەرێکی تۆکمە لەگەڵ ئۆفسێتێکی ئاسۆیی نەرێنی بۆ بەرزکردنەوەی دەقەکە لە پاشبنەما، دواتر سێبەری بەرەوپێشچوون نەرمتر بۆ دروستکردنی کاڵبوونەوە لە دەوری: ڕەنگ: #6F4D80؛ دەق-سێبەر: -5px5px 0 #260e1e, /* سێبەر 1 */ 0 0 15px #e9ce96, /* سێبەر 2 */ 0 0 30px #e9ce96, /* سێبەر 3 */ 0 0 30px #e9ce96؛ /* سێبەری ٤ */
ئەم سێبەرانە ئەوە دەردەخەن کە بەکارهێنانی سێبەری دەق تەنها دروستکردنی کاریگەری ڕووناکی نییە، چونکە دەتوانن دیکۆراتیش بن و کەسایەتی زیاد بکەن. Text Stroke زۆرێک لە کارتە ناونیشانە کارتۆنییەکان پیتەکانیان تێدایە کە هێڵکارییەکی قەڵەمییان هەیە کە وایان لێدەکات لە پاشخانەوە جیاواز بن. دەتوانم ئەم کاریگەرییە بە بەکارهێنانی text-stroke دروست بکەمەوە. بۆ ماوەیەکی زۆر، ئەم تایبەتمەندییە تەنها لە ڕێگەی پێشگرێکی -webkit-ەوە بەردەست بوو، بەڵام ئەوەش بەو مانایەیە کە ئێستا لە سەرانسەری وێبگەڕە مۆدێرنەکاندا پشتگیری دەکرێت.
text-stroke کورتکراوەی دوو تایبەتمەندییە. یەکەمیان کە text-stroke-width ە، کۆنتورێک بە دەوری تاکەکەسی پیتەکاندا دەکێشێت، دووەمیان کە text-stroke-color ە، ڕەنگەکەی کۆنتڕۆڵ دەکات. بۆ “Whatever Goes Pup”، زەربەیەکی شینم 4px زیاد کرد بۆ دەقە زەردەکە: ڕەنگ: #eff0cd؛ -webkit-text-stroke: 4px #7890b5؛ دەق-لێدان: 4px #7890b5;
جەڵتەکان دەتوانن بە تایبەتی بەسوود بن کاتێک لەگەڵ سێبەرەکاندا تێکەڵ دەکرێن، بۆیە بۆ “گەشەکردن، گەشەکردن، ڕۆیشتن”، من جەڵتێکی تەنکم 3px زیاد کرد بۆ سێبەرێکی 1px کە بەزەحمەت کاڵ بووەتەوە بۆ دروستکردنی ئەم کاریگەرییە دەقی سێ ڕەهەندییە: ڕەنگ: #fbb999؛ سێبەری دەق: 3px 5px 1px #5160b1; -webkit-text-stroke: 3px #984336؛ دەق-لێدان: 3px #984336;
فەرمانی بۆیاخ بەکارهێنانی text-stroke هەمیشە ئەنجامی چاوەڕوانکراو بەرهەم ناهێنێت، بەتایبەتی لەگەڵ پیتە تەنکەکان و زەربە ئەستوورەکان، چونکە بە شێوازی پێشوەختە وێبگەڕەکە زەربەیەک بەسەر پڕکردنەوەکەدا دەکێشێت. بەداخەوە هێشتا CSS ڕێگەم پێنادات شوێنی جەڵتەی مێشک ڕێکبخەم وەک ئەوەی زۆرجار لە سکێچدا دەیکەم. بەڵام تایبەتمەندی داواکردنی بۆیاخ بەهایەکی هەیە کە ڕێگەم پێدەدات جەڵتەی مێشکەکە لە پشتەوە دابنێم، نەک لە پێش پڕکردنەوەکەدا.
paint-order: stroke سەرەتا جەڵتەکە ڕەنگ دەکات، پاشان پڕکردنەوەکە، لە کاتێکدا paint-order: fill پێچەوانەکەی دەکات: ڕەنگ: #fbb999؛ paint-order: پڕکردنەوە؛ سێبەری دەق: 3px 5px 1px #5160b1; ڕەنگی دەق-لێدان:#984336; text-stroke-width: 3px؛
زەربەیەکی کاریگەر پیتەکان بە خوێندنەوە دەهێڵێتەوە، کێش زیاد دەکات و - کاتێک لەگەڵ سێبەر و ڕێکخستنی بۆیاخدا تێکەڵ دەکرێت - دەقی تەخت ئامادەیی ڕاستەقینە دەدات. پاشبنەماکان لە ناو دەقدا زۆرێک لە کارتی ناونیشانی کارتۆنی لە ڕەنگی تەخت تێدەپەڕن بە زیادکردنی پێکهاتە، گرادێنت، یان وردەکاری وێناکراو بۆ پیتەکان. هەندێک جار ئەوە پێکهاتە، هەندێکی تر لەوانەیە گرادێنتێک بێت لەگەڵ گۆڕانکارییەکی وردی دەنگی. لە وێبدا دەتوانم ئەم کاریگەرییە دروست بکەمەوە بە بەکارهێنانی وێنەیەکی پاشبنەما یان گرادێنت لە پشت دەقەکەوە، و پاشان بڕینی بۆ شێوەی پیتەکان. ئەمەش پشت بە دوو تایبەتمەندی دەبەستێت کە پێکەوە کاردەکەن: background-clip: text و text-fill-color: transparent.
سەرەتا باکگراوندێک لە پشت دەقەکەوە جێبەجێ دەکەم. ئەمە دەتوانێت نەخشەی بیت یان وێنەی ڤێکتەری یان گرادێنتێکی CSS بێت. بۆ ئەم نموونەیە لە ئەڵقەی Quick Draw McGraw "Baba Bait"، دەقی ناونیشانەکە گرادێنتێکی وردی سەرەوە-خوار لە تاریکییەوە بۆ ڕووناکی لەخۆدەگرێت: پاشبنەما: هێڵی-گرادێنت (0deg، #667b6a، #1d271a);
دواتر ئەو پاشبنەمایە دەبڕم بۆ سەر گلیفەکان و دەقەکە شەفاف دەکەم بۆ ئەوەی پاشبنەماکە لە ڕێگەی: -webkit-background-clip: دەق؛ -webkit-text-fill-color: شەفاف؛
تەنها بەو دوو دێڕە، چیتر پاشخانەکە لە پشت دەقەکەوە نەخشێنراوە؛ بەڵکو لەناو خۆیدا ڕەنگ کراوە. ئەم تەکنیکە بە تایبەتی کاتێک لەگەڵ زەربە و سێبەر تێکەڵ دەکرێت، بە باشی کاردەکات. گرادێنتێکی بڕاو ڕەنگ و پێکهاتە بۆ پیتەکان دابین دەکات، زەربە لێوارەکانی بە تیژ دەهێڵێتەوە و سێبەرێک لە پاشبنەما بەرزی دەکاتەوە. پێکەوە، ئەوان دیمەنی چیندارانەی کارتی ناونیشانە دەست ڕەنگاوڕەنگەکان دروست دەکەنەوە بە بەکارهێنانی هیچی تر لە کەمێک CSS. وەک هەمیشە، دەقی بڕاو بە وردی تاقی بکەرەوە، چونکە هەندێک جار وردەکارییەکانی وێبگەڕ دەتوانێت کاریگەری لەسەر سێبەر و ڕەندەرکردن هەبێت. دابەشکردنی دەق بۆ کاراکتەرە تاکەکەسییەکان هەندێک جار نامەوێت وشەیەکی تەواو یان سەردێڕێک ستایل بکەم. من دەمەوێت تاکە پیتەکان ستایل بکەم — بۆ ئەوەی کارەکتەرێک بخەمە شوێنی خۆی، کێشی زیادە بە یەک گلیف بدەم، یان چەند پیتێک بە شێوەیەکی سەربەخۆ ئەنیمەیشن بکەم. لە HTML و CSS سادەدا، تەنها یەک ڕێگەی متمانەپێکراو هەیە بۆ ئەنجامدانی ئەوە: هەر کارەکتەرێک لە توخمە span ی خۆیدا بپێچە. دەتوانم بە دەستی ئەوە بکەم، بەڵام ئەوە ناسک دەبێت، پاراستنی قورس دەبێت و بە خێرایی لەیەک دەچێت کاتێک کۆپی دەگۆڕێت. لەبری ئەوە کاتێک پێویستم بە کۆنترۆڵی هەر پیتێکە، کتێبخانەی دابەشکردنی دەق وەک splt.js بەکاردەهێنم (هەرچەندە چارەسەری دیکە بەردەستە). ئەمەش گرێیەکی دەق وەردەگرێت و بە شێوەیەکی ئۆتۆماتیکی وشە یان کارەکتەرەکان دەپێچێتەوە، قەڵغانی زیادەم پێدەدات بۆ ئەنیمەیشن و ستایل بەبێ ئەوەی مارکاپەکەم تێکبدەم. ڕێبازێکە کە HTML ـم بە خوێنەرەوە و مانادار دەهێڵێتەوە، لە هەمان کاتدا ئەو کۆنتڕۆڵە وردە دانەوێڵەیەم پێدەدات کە پێویستە بۆ دووبارە دروستکردنەوەی ئەو تایپۆگرافیای نایەکسان و کارەکتەری کە لە کارتی ناونیشانی کارتۆنی کلاسیکدا دەیبینیت. بەڵام ئەم ڕێبازە لەگەڵ...ئاگادارکردنەوەکانی دەستڕاگەیشتن، چونکە زۆربەی خوێنەرانی شاشە گرێ دەقەکان بە ڕێکوپێکی دەخوێننەوە. کەواتە ئەمە:
هوم شیرین هام
...وەک ئەوەی چاوەڕێی دەکەیت دەخوێنێتەوە: هوم شیرین هام
بەڵام ئەمە:
H u m
...دەتوانرێت بە شێوەیەکی جیاواز لێکبدرێتەوە بەپێی وێبگەڕ و خوێنەری شاشە. هەندێکیان پیتەکان بەیەکەوە دەبەستنەوە و وشەکان بە دروستی دەخوێننەوە. ڕەنگە هەندێکی تر لە نێوان پیتەکاندا وەستان، کە لە خراپترین سیناریۆدا ڕەنگە بەم شێوەیە دەنگ بدات: “ه...” “ئۆ...” “م...”
بەداخەوە هەندێک لە چارەسەرەکانی دابەشکردن ئەنجامێکی هەمیشە دەستڕاگەیشتن نادەن، بۆیە من دابەشکەری دەقەکانی خۆمم نووسیوە، splinter.js، کە لە ئێستادا لە قۆناغی تاقیکاریدایە. گۆڕینی نامەی تاکەکەسی بۆ چالاککردنی Toon Text Splitter ـم، تایبەتمەندییەکی data- زیاد دەکەم بۆ ئەو توخمەی کە دەمەوێت دابەشی بکەم:
هوم شیرین هام
سەرەتا سکریپتەکەم هەر وشەیەک جیا دەکاتەوە بۆ پیتی تاکەکەسی و لە توخمێکی spanدا دەیانپێچێتەوە کە تایبەتمەندیەکانی class و ARIA جێبەجێ کراوە: ه u م
پاشان سکریپتەکە ناوەڕۆکی سەرەتایی توخمە دابەشکراوەکە وەردەگرێت و وەک تایبەتمەندییەکی aria زیاد دەکات بۆ یارمەتیدانی پاراستنی دەستڕاگەیشتن:
ه u م
بە جێبەجێکردنی ئەو تایبەتمەندییە پۆلانە، دواتر دەتوانم کارەکتەرە تاکەکەسییەکان بەو شێوەیەی کە خۆم هەڵیدەبژێرم ستایل بکەم.
بۆ نموونە بۆ “Hum Sweet Hum”، دەمەوێت دووبارەی بکەمەوە کە چۆن پیتەکانی لە هێڵی بنەڕەتی دوور دەکەونەوە. دوای بەکارهێنانی Toon Text Splitter ـم، چوار بەهای وەرگێڕانی جیاوازم بەکارهێنا بە بەکارهێنانی چەندین هەڵبژێرەری :nth-child بۆ دروستکردنی دیمەنێکی نیمچە هەڕەمەکی: /* 4، 8، 12... */ .toon-char:nth-child(4n) { وەرگێڕان: 0 -8px; } /* یەکەم، پێنجەم، ٩... */ .toon-char:nth-child(4n+1) { وەرگێڕان: 0 -4px; } /* دووەم، شەشەم، دەیەم... */ .toon-char:nth-child(4n+2) { وەرگێڕان: 0 4px; } /* سێیەم، ٧، ١١... */ .toon-char:nth-child(4n+3) { وەرگێڕان: 0 8px; }
بەڵام translate تەنها یەک تایبەتمەندییە کە دەتوانم بەکاری بهێنم بۆ گۆڕینی دەقی toon ـم.
هەروەها دەتوانم ئەو کارەکتەرە تاکەکەسیانە بسووڕێمەوە بۆ ئەوەی ڕوخسارێکی پشێوتر بێت: /* 4، 8، 12... */ .toon-line .toon-char:nth-child(4n) { سوڕانەوە: -4deg; } /* یەکەم، پێنجەم، ٩... */ .toon-char:nth-child(4n+1) { سوڕانەوە: -8deg; } /* دووەم، شەشەم، دەیەم... */ .toon-char:nth-child(4n+2) { سوڕانەوە: 4deg; } /* سێیەم، ٧، ١١... */ .toon-char:nth-child(4n+3) { سوڕانەوە: 8deg; }
بەڵام translate تەنها یەک تایبەتمەندییە کە دەتوانم بەکاری بهێنم بۆ گۆڕینی دەقی toon ـم. هەروەها دەتوانم ئەو کارەکتەرە تاکەکەسیانە بسووڕێمەوە بۆ ئەوەی ڕوخسارێکی پشێوتر بێت: /* 4، 8، 12... */ .تۆن-هێڵ .toon-char:nth-child(4n) { سوڕانەوە: -4deg؛ }
/* یەکەم، پێنجەم، ٩... */ .toon-char:nth-منداڵ(4n+1) { سوڕانەوە: -8deg؛ }
/* دووەم، شەشەم، دەیەم... */ .toon-char:nth-منداڵ(4n+2) { سوڕانەوە: 4deg؛ }
/* سێیەم، ٧، ١١... */ .toon-char:nth-منداڵ(4n+3) { سوڕانەوە: 8deg؛ }
وە بێگومان دەتوانم ئەنیمەیشن زیاد بکەم بۆ ئەوەی ئەو کارەکتەرانە بجوڵێنم و ناونیشانەکانی شێوازی دەقی توونەکەم بە ژیانەوە بهێنمەوە. سەرەتا ئەنیمەیشنێکی کیفڕایمم دروست کرد کە کارەکتەرەکان دەسوڕێتەوە:
@keyframes jiggle { 0%, 100% { گۆڕینی: سوڕانەوە (var (--بنەما-سوڕانەوە، 0deg)); } 25% { گۆڕینی: سوڕانەوە (calc (var (--بنەما-سوڕانەوە، 0deg) + 3deg)); } 50% { گۆڕینی: سوڕانەوە (calc (var (--بنەما-سوڕانەوە، 0deg) - 2deg)); } 75% { گۆڕینی: سوڕانەوە (calc (var (--بنەما-سوڕانەوە، 0deg) + 1deg)); } }
پێش ئەوەی بیخەمە سەر ئەو توخمانەی span کە لەلایەن Toon Text Splitter ـمەوە دروستکراون: .toon-char { ئەنیمەیشن: jiggle 3s بێکۆتایی ئاسانکاری-لە-دەرەوە؛ transform-origin: ناوەڕاستی خوارەوە؛ }
و لە کۆتاییدا، ڕێکخستنی بڕی خولانەوەی و دواکەوتن پێش ئەوەی هەر کارەکتەرێک دەست بە جووڵە بکات: .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 کە بە وردی هەڵبژێردراون — سێبەر، لێدان، پاشبنەمای بڕاو و هەندێک ئەنیمەیشنی سنووردار — دەتوانین هەمان ئەو کاریگەرییە دروست بکەینەوە. من دەقی توونم خۆشدەوێت نەک لەبەر ئەوەی نۆستالژیکم، بەڵکو لەبەر ئەوەی دیزاینەکەی بە مەبەستە. هەڵبژاردنی بە ئەنقەست بکە، و با کەمێک تایپۆگرافیای دەق توون پەنجە بۆ دیزاینەکانت زیاد بکات.
