پس از اتمام پروژهای که من را ملزم میکرد هر آنچه را که میتوانم درباره انیمیشنهای CSS و SVG یاد بگیرم، شروع به نوشتن این مجموعه در مورد انیمیشنهای Smashing و «چگونه کارتونهای کلاسیک CSS مدرن را الهام میدهند» کردم. برای پایان دادن به امسال، میخواهم به شما نشان دهم که چگونه از CSS مدرن برای ایجاد عنصری که عناوین Toon را بسیار تأثیرگذار میکند، استفاده کنید: تایپوگرافی آنها. عنوان طراحی آثار هنری در دوران صامت دهه 1920 و اوایل دهه 30، تایپوگرافی کارت عنوان یک فیلم حال و هوای ایجاد می کرد، صحنه را ایجاد می کرد و به مخاطبان نوع فیلمی را که برای دیدن آن پول پرداخت کرده بودند، یادآوری می کرد.
کارتهای عنوان کارتون همچنین دارای علامت تجاری، خلق و خو و صحنهسازی بودند که همگی در یکی قرار گرفتند. در سالهای اولیه، زمانی که بودجه استودیوهای بزرگ بیشتر بود، این کارتهای عنوان اغلب گویا و نقاشی بودند.
اما زمانی که تلویزیون در دهه 1950 رونق گرفت، بودجه ها کاهش یافت و کارت های طراحی شده توسط هنرمندانی مانند لارنس "هنر" گوبل زبان بصری جدیدی را اتخاذ کردند، گرافیکی تر، سبک تر و کمتر پیچیده تر شدند. توجه: لارنس "هنر" گوبل یکی از قهرمانان انیمیشن اواسط قرن آمریکایی است که اغلب نادیده گرفته می شود. او عمدتاً برای Hanna-Barbera در تأثیرگذارترین سال های دهه 1950 و 1960 کار می کرد. گوبل یک انیماتور شخصیت نبود. نقش او ایجاد اتمسفر بود، بنابراین محیطهایی را برای The Flintstones، Huckleberry Hound، Quick Draw McGraw و Yogi Bear طراحی کرد و همچنین کارتهای عنوان افتتاحیه را طراحی کرد. کارتهای عنوان او، شامل نقاشیهایی با لوگوی پوشیده شده، به تعریف ظاهر نمادین هانا-باربرا کمک کرد. آثار هنری گوبل برای شخصیتهایی مانند Quick Draw McGraw و Yogi Bear روی صفحههای تلویزیون کوچکتر مؤثر بود. او به جای بازتولید یک عکس از کارتون، بر ارائه یک ایده واحد و قوی - اغلب به صورت شبح - تمرکز کرد که جوهر آن را تسخیر می کرد. در "خرس Buzzin"، یوگی در هلیکوپتر وزوز می کند. او در «خرس در یک پیک نیک» در حالی که سبد پیک نیک در دست دارد می پرد و یوگی متن عنوان را برای «ترس با جایزه مبارزه کنید».
تک فریمهای گوبل با حرکت کم یا بدون تکیه، باید حالتی ایجاد میکرد، صحنه را تنظیم میکرد و داستانی را توصیف میکرد. آنها این کار را با استفاده از رنگهای مسطح، اشکال گرافیکی و تایپوگرافی که اغلب در آثار هنری ادغام میشد، انجام دادند.
به عنوان طراحانی که روی وب کار میکنند، عناوین toon میتوانند به ما در مورد نحوه انتقال شخصیت یک برند، تأثیر اولیه و تعیین انتظارات برای تجربه شخصی در استفاده از یک محصول یا وبسایت به ما بیاموزند. ما میتوانیم از تکنیکهای هنرمندان برای ایجاد بنرهای مؤثر، هدرهای صفحه فرود، و حتی صفحهنمایشهای زیبای قدیمی یاد بگیریم. تایپوگرافی عنوان تون کارتهای عنوان کارتونی نشان میدهند که چگونه ادغام نوع با تصاویر، ضربهای را که یک هدر یا قهرمان نیاز دارد، ارائه میکند. CSS مدرن با تعداد انگشت شماری از ترفندهای text-shadow، text-stroke و transform به شما امکان می دهد از همان انرژی استفاده کنید.
مولد عنوان متن Toon در طول نوشتن این مقاله، متوجه شدم که داشتن ابزاری برای تولید متن به سبک عناوین کارتونی که من بسیار دوست دارم مفید خواهد بود. پس یکی درست کردم My Toon Text Title Generator به شما امکان می دهد رنگ ها، ضربه ها و چندین سایه متن را آزمایش کنید. میتوانید ترتیب رنگ را تنظیم کنید، فاصله حروف را اعمال کنید، متن خود را در مجموعهای از فونتهای نمونه پیشنمایش کنید و سپس CSS تولید شده را مستقیماً در کلیپبورد خود برای استفاده در پروژه کپی کنید. Toon Title CSS شما به سادگی می توانید CSS را که Toon Text Title Generator در اختیار شما قرار می دهد کپی پیست کنید. اما بیایید از نزدیک به آنچه انجام می دهد نگاه کنیم. سایه متن به نوع این عنوان از قسمت «Yuk-Yuk Duck» اثر Augie Doggie نگاه کنید، با حروف زرد کم رنگ و سایه تیره، سخت و افست آن که آن را از پسزمینه بلند میکند و توهم عمق ایجاد میکند.
احتمالاً می دانید که text-shadow چهار مقدار را می پذیرد: (1) افقی و (2) افست های عمودی، (3) تاری، و (4) رنگی که می تواند یکدست یا نیمه شفاف باشد. این مقادیر آفست می توانند مثبت یا منفی باشند، بنابراین می توانم "Yuk-Yuk Duck" را با استفاده از یک سایه سخت که به سمت راست و پایین کشیده شده است، تکرار کنم: رنگ: #f7f76d; text-shadow: 5px 5px 0 #1e1904;
از سوی دیگر، این عنوان “Pint Giant” با سایه نیمه نرم منفی خود حس متفاوتی دارد: رنگ: #c2a872; text-shadow: -7px 5px 0 #b100e، 0 -5px 10px #546c6f;
برای افزودن عمق بیشتر و ایجاد جلوه های جالب تر، می توانم چندین سایه را لایه بندی کنم. برای «Let’s Duck Out»، من چهار سایه را با هم ترکیب میکنم: اولی یک سایه ثابت با یک افست منفی افقی برای برداشتن متن از پسزمینه، و سپس سایههای به تدریج ملایمتر برای ایجاد تاری در اطراف آن: رنگ: #6F4D80; text-shadow: -5 پیکسل5px 0 #260e1e، /* Shadow 1 */ 0 0 15px #e9ce96، /* Shadow 2 */ 0 0 30px #e9ce96, /* Shadow 3 */ 0 0 30px #e9ce96; /* سایه 4 */
این سایهها نشان میدهند که استفاده از سایههای متنی فقط برای ایجاد جلوههای روشنایی نیست، زیرا میتوانند تزئینی باشند و به شخصیت اضافه کنند. متن سکته مغزی بسیاری از کارتهای عنوان کارتونی دارای حروف با طرح برجسته هستند که آنها را از پسزمینه متمایز میکند. من می توانم این افکت را با استفاده از text-stroke بازسازی کنم. برای مدت طولانی، این ویژگی فقط از طریق یک پیشوند -webkit- در دسترس بود، اما این بدان معناست که اکنون در مرورگرهای مدرن پشتیبانی میشود.
text-stroke مخفف دو ویژگی است. اولی، متن-سکته-عرض، یک کانتور در اطراف حروف جداگانه ترسیم می کند، در حالی که دومی، متن-stroke-color، رنگ آن را کنترل می کند. برای "Whatever Goes Pup"، یک خط آبی 4 پیکسلی به متن زرد اضافه کردم: رنگ: #eff0cd; -webkit-text-stroke: 4px #7890b5; text-stroke: 4px #7890b5;
Strokes زمانی که با سایهها ترکیب میشود میتواند مفید باشد، بنابراین برای "Growing, Growing, Gone" یک ضربه نازک 3 پیکسلی را به یک سایه 1 پیکسلی که به سختی تار شده بود اضافه کردم تا این افکت متن سه بعدی ایجاد شود: رنگ: #fbb999; text-shadow: 3px 5px 1px #5160b1; -webkit-text-stroke: 3px #984336; text-stroke: 3px #984336;
سفارش رنگ استفاده از text-stroke همیشه نتیجه مورد انتظار را ایجاد نمی کند، به خصوص با حروف نازک تر و ضربات ضخیم تر، زیرا به طور پیش فرض مرورگر یک ضربه را روی قسمت پر می کشد. متأسفانه، CSS هنوز هم به من اجازه نمی دهد که قرار دادن stroke را همانطور که اغلب در Sketch انجام می دهم، تنظیم کنم. با این حال، ویژگی paint-order مقادیری دارد که به من اجازه میدهد تا stroke را در پشت، به جای جلوی، fill قرار دهم.
paint-order: stroke ابتدا stroke و سپس fill را رنگ می کند، در حالی که paint-order: fill برعکس عمل می کند: رنگ: #fbb999; paint-order: fill; text-shadow: 3px 5px 1px #5160b1; text-stroke-color:#984336; text-stroke-width: 3px;
یک ضربه موثر حروف را خوانا نگه میدارد، وزن اضافه میکند و - وقتی با سایهها و ترتیب رنگ ترکیب میشود - به متن مسطح حضور واقعی میدهد. پس زمینه داخل متن بسیاری از کارتهای عنوان کارتونی با افزودن بافت، شیب یا جزئیات مصور به حروف، فراتر از رنگ مسطح هستند. گاهی اوقات این یک بافت است، گاهی اوقات ممکن است یک گرادیان با یک تغییر رنگ ظریف باشد. در وب، میتوانم این افکت را با استفاده از یک تصویر پسزمینه یا گرادیان پشت متن، و سپس برش دادن آن به شکل حروف، بازسازی کنم. این متکی به دو ویژگی است که با هم کار می کنند: پس زمینه-کلیپ: متن و متن-پر-رنگ: شفاف.
ابتدا یک پس زمینه پشت متن اعمال می کنم. این می تواند یک بیت مپ یا تصویر برداری یا یک گرادیان CSS باشد. برای این مثال از قسمت Quick Draw McGraw "Baba Bait"، متن عنوان شامل یک شیب ظریف از بالا به پایین از تاریکی به روشن است: پس زمینه: خطی- گرادیان (0 درجه، #667b6a، #1d271a)؛
سپس، آن پسزمینه را روی علامتها گیره میدهم و متن را شفاف میکنم تا پسزمینه از طریق: -webkit-background-clip: text; -webkit-text-fill-color: transparent;
فقط با آن دو خط، پس زمینه دیگر پشت متن نقاشی نمی شود. در عوض، درون آن نقاشی شده است. این تکنیک به ویژه هنگامی که با سکته مغزی و سایه ترکیب می شود به خوبی کار می کند. یک گرادیان بریده شده حروف را با رنگ و بافت فراهم می کند، یک سکته مغزی لبه های آن را تیز نگه می دارد و یک سایه آن را از پس زمینه بالاتر می برد. آنها با هم ظاهر لایه ای کارت های عنوان نقاشی شده با دست را با استفاده از چیزی بیشتر از یک CSS بازسازی می کنند. مثل همیشه، متن بریده شده را با دقت آزمایش کنید، زیرا گاهی اوقات تغییرات عجیب و غریب مرورگر می تواند سایه ها و رندر را تحت تاثیر قرار دهد. تقسیم متن به شخصیت های فردی گاهی اوقات من نمی خواهم یک کلمه یا عنوان کامل را سبک کنم. من میخواهم به حروف تکی استایل بدهم - برای به حرکت درآوردن یک کاراکتر در جای خود، دادن وزن اضافی به یک علامت یا متحرک کردن چند حرف به طور مستقل. در HTML و CSS ساده، تنها یک راه قابل اعتماد برای انجام این کار وجود دارد: هر کاراکتر را در عنصر span خود بپیچید. من میتوانم این کار را بهصورت دستی انجام دهم، اما شکننده است، نگهداری آن سخت است و با تغییر کپی به سرعت از بین میرود. در عوض، زمانی که به کنترل هر حرف نیاز دارم، از یک کتابخانه تقسیم متن مانند splt.js استفاده می کنم (اگرچه راه حل های دیگری در دسترس هستند). این یک گره متنی را می گیرد و به طور خودکار کلمات یا کاراکترها را جمع می کند و به من قلاب های اضافی برای متحرک سازی و استایل بدون به هم زدن نشانه گذاری من می دهد. این رویکردی است که HTML من را خوانا و معنایی نگه میدارد، در حالی که به من کنترل دقیقی را میدهد که برای بازسازی تایپوگرافی ناهموار و شخصیتی که در کارتهای عنوان کارتونی کلاسیک میبینید، نیاز دارم. با این حال، این رویکرد همراه استاخطارهای دسترسی، زیرا اکثر صفحهخوانها گرههای متن را به ترتیب میخوانند. پس این:
هوم شیرین هوم
... همانطور که انتظار دارید می خواند: هوم هوم شیرین
اما این:
H u m
… بسته به مرورگر و صفحهخوان میتواند متفاوت تفسیر شود. برخی حروف را به هم متصل می کنند و کلمات را به درستی می خوانند. برخی دیگر ممکن است بین حروف مکث کنند، که در بدترین حالت ممکن است به نظر برسد: «H…» «U…» «M…»
متأسفانه، برخی از راهحلهای تقسیم نتیجه همیشه در دسترس را ارائه نمیدهند، بنابراین من تقسیمکننده متن خودم، splinter.js را نوشتهام که در حال حاضر در نسخه بتا است. تبدیل حروف فردی برای فعال کردن Toon Text Splitter، یک ویژگی داده را به عنصری که میخواهم تقسیم کنم اضافه میکنم:
هوم شیرین هوم
ابتدا، اسکریپت من هر کلمه را به حروف جداگانه جدا می کند و آنها را در یک عنصر span با ویژگی های class و ARIA اعمال می کند:
سپس اسکریپت محتوای اولیه عنصر تقسیم را می گیرد و آن را به عنوان یک ویژگی aria اضافه می کند تا به حفظ دسترسی کمک کند:
با اعمال این ویژگیهای کلاس، میتوانم به دلخواه شخصیتهای فردی را استایل بدهم.
به عنوان مثال، برای "Hum Sweet Hum"، میخواهم نحوه دور شدن حروف آن از خط پایه را تکرار کنم. پس از استفاده از Toon Text Splitter، چهار مقدار مختلف ترجمه را با استفاده از چندین انتخابگر :nth-child اعمال کردم تا ظاهری نیمه تصادفی ایجاد کنم: /* چهارم، هشتم، دوازدهم... */ .toon-char:nth-child(4n) { translate: 0 -8px; } /* اول، پنجم، نهم... */ .toon-char:nth-child(4n+1) { translate: 0 -4px; } /* دوم، ششم، دهم... */ .toon-char:nth-child(4n+2) { translate: 0 4px; } /* سوم، هفتم، یازدهم... */ .toon-char:nth-child(4n+3) { translate: 0 8px; }
اما translate تنها یکی از ویژگیهایی است که میتوانم از آن برای تبدیل متن toon خود استفاده کنم.
همچنین میتوانم آن شخصیتها را بچرخانم تا ظاهری بینظمتر داشته باشم: /* چهارم، هشتم، دوازدهم... */ .toon-line .toon-char:nth-child(4n) { rotate: -4deg; } /* اول، پنجم، نهم... */ .toon-char:nth-child(4n+1) { rotate: -8deg; } /* دوم، ششم، دهم... */ .toon-char:nth-child(4n+2) { rotate: 4deg; } /* سوم، هفتم، یازدهم... */ .toon-char:nth-child(4n+3) { rotate: 8deg; }
اما translate تنها یکی از ویژگیهایی است که میتوانم از آن برای تبدیل متن toon خود استفاده کنم. همچنین میتوانم آن شخصیتها را بچرخانم تا ظاهری بینظمتر داشته باشم: /* چهارم، هشتم، دوازدهم... */ .toon-line .toon-char:nth-child(4n) { چرخش: -4 درجه؛ }
/* اول، پنجم، نهم... */ .toon-char:nth-child(4n+1) { چرخش: -8 درجه؛ }
/* دوم، ششم، دهم... */ .toon-char:nth-child(4n+2) { چرخش: 4 درجه؛ }
/* سوم، هفتم، یازدهم... */ .toon-char:nth-child(4n+3) { چرخش: 8 درجه؛ }
و البته، میتوانم انیمیشنهایی اضافه کنم تا آن شخصیتها را تکان بدهم و عناوین سبک متن خود را زنده کنم. ابتدا یک انیمیشن فریم کلیدی ایجاد کردم که کاراکترها را می چرخاند:
@keyframes jiggle { 0%, 100% { transform: rotate(var(--base-rotate, 0deg)); } 25% {transform: rotate(calc(var(--base-rotate, 0deg) + 3deg)); } 50% { transform: rotate(calc(var(--base-rotate, 0deg) - 2deg)); } 75% { transform: rotate(calc(var(--base-rotate, 0deg) + 1deg)); } }
قبل از اعمال آن بر روی عناصر span ایجاد شده توسط Toon Text Splitter من: Toon-char { انیمیشن: جیگل 3s infinite ease-in-out; 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) { animation-delay: 0.1s; } .toon-char:nth-child(4n+1) { animation-delay: 0.3s; } .toon-char:nth-child(4n+2) { animation-delay: 0.5s; } .toon-char:nth-child(4n+3) { animation-delay: 0.7s; }
یک قاب برای ایجاد یک تاثیر هنرمندان عنوان کارتون یک قاب برای تأثیرگذاری داشتند و تایپوگرافی آنها به اندازه آثار هنری که نقاشی می کردند مهم بود. در وب هم همینطور است. هدر یا قهرمانی که به خوبی طراحی شده استمنطقه به وضوح، شخصیت و اعتماد به نفس نیاز دارد - نه صرفاً یک تصویر پسزمینه با عرض کامل. با چند ویژگی CSS که با دقت انتخاب شدهاند - سایهها، ضربهها، پسزمینههای بریدهشده و برخی انیمیشنهای محدود شده - میتوانیم همان تأثیر را دوباره ایجاد کنیم. من متن تون را دوست دارم نه به این دلیل که نوستالژیک هستم، بلکه به این دلیل که طراحی آن عمدی است. انتخاب های عمدی داشته باشید و اجازه دهید تایپوگرافی متنی کمی به طرح های شما کمک کند.
