Після завершення проекту, який вимагав від мене навчитися всього про анімацію CSS і SVG, я почав писати цю серію про Smashing Animations і «Як класичні мультфільми надихають сучасний CSS». Завершуючи цей рік, я хочу показати вам, як використовувати сучасний CSS, щоб створити той елемент, який робить Toon Titles такими вражаючими: їхню типографіку. Назва Художнє оформлення В епоху німого кіно 1920-х і початку 30-х типографіка титульної картки фільму створювала настрій, створювала сцену та нагадувала глядачам про тип фільму, за перегляд якого вони заплатили.
Титульні картки мультфільму також містили брендинг, настрій і сцену — усе це об’єднано в одне ціле. У перші роки, коли бюджети великих студій були більшими, ці титульні картки часто були ілюстративними та живописними.
Але коли телебачення процвітало в 1950-х роках, бюджети впали, а листівки, розроблені такими художниками, як Лоуренс «Арт» Ґобл, засвоїли нову візуальну мову, ставши більш графічними, стилізованими та менш складними. Примітка: Лоуренс «Арт» Ґобл — один із часто забутих героїв американської анімації середини століття. В першу чергу він працював на Hanna-Barbera в найвпливовіші роки 1950-х і 1960-х років. Гобл не був аніматором персонажів. Його роль полягала у створенні атмосфери, тому він розробив середовище для «Флінстоунів», «Гекльберрі Хаунд», «Квік Дро Макгроу» та «Ведмідь Йогі», а також перші картки, які задають тон. Його титульні картки, на яких зображені картини з накладеним логотипом, допомогли визначити культовий вигляд Ханни-Барбера. Ілюстрації Гобла для таких персонажів, як Квік Дро Макгроу та Ведмідь Йогі, були ефективними на менших екранах телевізорів. Замість того, щоб відтворювати кадр із мультфільму, він зосередився на представленні однієї сильної ідеї — часто у вигляді силуету — яка передавала б його суть. У «The Buzzin’ Bear» Йогі пролітає повз у вертольоті. Він відскакує з кошиком для пікніка в руці у «Ведмеді на пікніку», а для свого «Переляку від бійки за приз» Йогі вкладає текст заголовка.
Маючи незначний рух або зовсім без нього, окремі кадри Гобла мали створювати настрій, створювати сцену та описувати історію. Вони зробили це, використовуючи плоскі кольори, графічні форми та типографіку, яка часто інтегрувалася в ілюстрацію.
Як дизайнерів, які працюють в Інтернеті, назви мультфільмів можуть багато чому навчити нас про те, як передати індивідуальність бренду, справити перше враження та визначити очікування щодо користування продуктом або веб-сайтом. Ми можемо навчитися в техніці художників створювати ефективні банери, заголовки цільових сторінок і навіть старі добрі заставки. Типографіка заголовка Toon Заголовки мультфільмів показують, як поєднання тексту з зображеннями надає ефекту, необхідного заголовку чи герою. Сучасний CSS дає змогу використати ту саму енергію за допомогою декількох трюків із затіненням тексту, обведенням тексту та трансформацією.
Генератор заголовків тексту Toon Під час написання цієї статті я зрозумів, що було б корисно мати інструмент для створення тексту, стилізованого як назви мультфільмів, які я так люблю. Тож я зробив один. My Toon Text Title Generator дозволяє експериментувати з кольорами, штрихами та кількома тінями тексту. Ви можете налаштувати порядок малювання, застосувати інтервали між літерами, переглянути свій текст у вибірці зразків шрифтів, а потім скопіювати згенерований CSS прямо в буфер обміну для використання в проекті. Toon Title CSS Ви можете просто скопіювати та вставити CSS, який надає вам Toon Text Title Generator. Але давайте ближче розглянемо, що він робить. Тінь тексту Подивіться на шрифт у цьому заголовку з епізоду Augie Doggie «Yuk-Yuk Duck» з його блідо-жовтими літерами та темною, жорсткою, зміщеною тінню, яка піднімає його над фоном і створює ілюзію глибини.
Ви, мабуть, уже знаєте, що 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, /* Тінь 1 */ 0 0 15px #e9ce96, /* Тінь 2 */ 0 0 30px #e9ce96, /* Тінь 3 */ 0 0 30px #e9ce96; /* Тінь 4 */
Ці тіні показують, що використання text-shadow — це не лише створення ефектів освітлення, оскільки вони також можуть бути декоративними та додавати індивідуальності. Обведення тексту Багато титульних карток із мультфільмами містять літери з жирним контуром, що виділяє їх на тлі. Я можу відтворити цей ефект за допомогою обведення тексту. Довгий час ця властивість була доступна лише через префікс -webkit-, але це також означає, що тепер вона підтримується в усіх сучасних браузерах.
text-stroke — це скорочення двох властивостей. Перший, text-stroke-width, малює контур навколо окремих літер, а другий, text-stroke-color, контролює його колір. Для «Whatever Goes Pup» я додав до жовтого тексту синю лінію розміром 4 пікселя: колір: #eff0cd; -webkit-text-stroke: 4px #7890b5; text-stroke: 4px #7890b5;
Штрихи можуть бути особливо корисними, коли вони поєднуються з тінями, тому для «Growing, Growing, Gone» я додав тонку 3-піксельну обведення до ледь розмитої тіні 1 пікс, щоб створити ефект тривимірного тексту: колір: #fbb999; text-shadow: 3px 5px 1px #5160b1; -webkit-text-stroke: 3px #984336; text-stroke: 3px #984336;
Замовлення фарби Використання обведення тексту не завжди дає очікуваний результат, особливо з тоншими літерами та товстішими штрихами, оскільки за замовчуванням браузер малює штрих поверх заливки. На жаль, CSS все ще не дозволяє мені коригувати розташування обведення, як я часто роблю в Sketch. Однак властивість paint-order має значення, які дозволяють розмістити обведення позаду, а не перед заливкою.
paint-order: stroke малює спочатку штрих, а потім заливку, тоді як paint-order: fill робить навпаки: колір: #fbb999; розфарбовування: заливка; text-shadow: 3px 5px 1px #5160b1; text-stroke-color:#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-код читабельним і семантичним, водночас дає мені детальний контроль, потрібний для відтворення нерівномірної характерної типографіки, яку ви бачите в класичних заголовках мультфільмів. Однак цей підхід йде ззастереження щодо доступності, оскільки більшість програм зчитування з екрана читають текстові вузли по порядку. Отже, це:
Хам, солодкий гул
… читається так, як ви очікували: Hum Sweet Hum
Але це:
H ви м
…може інтерпретуватися по-різному залежно від браузера та програми зчитування з екрана. Дехто з’єднає літери і правильно прочитає слова. Інші можуть робити паузи між літерами, які в гіршому випадку можуть звучати так: «Н…» «У…» «М…»
На жаль, деякі рішення для розділення не забезпечують завжди доступний результат, тому я написав власний текстовий роздільник, splinter.js, який зараз знаходиться в бета-версії. Перетворення окремих літер Щоб активувати мій Toon Text Splitter, я додаю атрибут data- до елемента, який хочу розділити:
Гунь, солодкий гул
По-перше, мій сценарій розділяє кожне слово на окремі літери та загортає їх у елемент span із застосуванням атрибутів class і ARIA:
Потім сценарій бере початковий вміст розділеного елемента та додає його як атрибут aria, щоб підтримувати доступність:
Застосувавши ці атрибути класу, я можу потім стилізувати окремі символи на свій розсуд.
Наприклад, для «Hum Sweet Hum» я хочу відтворити, як його літери зміщуються від базової лінії. Після використання Toon Text Splitter я застосував чотири різні значення перекладу за допомогою кількох селекторів :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; }
Але translate — це лише одна властивість, яку я можу використати для перетворення свого мультяшного тексту.
Я також міг би повернути ці окремі символи для ще більш хаотичного вигляду: /* 4-й, 8-й, 12-й... */ .toon-line .toon-char:nth-child(4n) { rotate: -4deg; } /* 1-й, 5-й, 9-й... */ .toon-char:nth-child(4n+1) { rotate: -8deg; } /* 2-й, 6-й, 10-й... */ .toon-char:nth-child(4n+2) { повернути: 4deg; } /* 3-й, 7-й, 11-й... */ .toon-char:nth-child(4n+3) { поворот: 8deg; }
Але translate — це лише одна властивість, яку я можу використати для перетворення свого мультяшного тексту. Я також міг би повернути ці окремі символи для ще більш хаотичного вигляду: /* 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) { поворот: 4 град.; }
/* 3-й, 7-й, 11-й... */ .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 { анімація: jiggle 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) { затримка анімації: 0,1 с; } .toon-char:nth-child(4n+1) { затримка анімації: 0,3 с; } .toon-char:nth-child(4n+2) { затримка анімації: 0,5 с; } .toon-char:nth-child(4n+3) { затримка анімації: 0,7 с; }
Один кадр, щоб справити враження Художники мультфільмів мали один кадр, щоб справити враження, а їх типографіка була такою ж важливою, як і твір, який вони малювали. Те ж саме і в Інтернеті. Добре продуманий заголовок або геройобласті потрібна чіткість, характер і впевненість, а не просто вицвіле фонове зображення на всю ширину. За допомогою кількох ретельно підібраних властивостей CSS — тіней, штрихів, обрізаного фону та деякої стриманої анімації — ми можемо відтворити той самий ефект. Мені подобається мультяшний текст не тому, що я ностальгію, а тому, що його дизайн навмисний. Зробіть обдуманий вибір і дозвольте невеликій типографіці мультяшного тексту додати ефектності вашим дизайнам.
