След като завърших проект, който изискваше да науча всичко възможно за CSS и SVG анимациите, започнах да пиша тази поредица за Smashing Animations и „Как класическите анимационни филми вдъхновяват модерния CSS“. За да завърша тази година, искам да ви покажа как да използвате модерния CSS, за да създадете този елемент, който прави Toon Titles толкова въздействащи: тяхната типография. Заглавие Дизайн на произведения на изкуството В ерата на мълчанието през 20-те и началото на 30-те години типографията на заглавната карта на филма създаваше настроение, задаваше сцената и напомняше на публиката за типа филм, който са платили, за да гледат.
Заглавните картички на анимационните филми също бяха брандиране, настроение и сцена, събрани в едно. В първите години, когато бюджетите на големите студия бяха по-големи, тези заглавни картички често бяха илюстративни и живописни.
Но когато телевизията процъфтява през 50-те години, бюджетите спадат и картичките, проектирани от художници като Лорънс „Арт“ Гобъл, възприемат нов визуален език, ставайки по-графични, стилизирани и по-малко сложни. Забележка: Лорънс „Арт“ Гобъл е един от често пренебрегваните герои на американската анимация от средата на века. Той е работил предимно за Хана-Барбера през най-влиятелните години на 50-те и 60-те години на миналия век. Гобъл не беше аниматор на герои. Неговата роля беше да създава атмосфера, така че той проектира среда за The Flintstones, Huckleberry Hound, Quick Draw McGraw и Yogi Bear, както и началните заглавни карти, които задават тона. Неговите заглавни картички, включващи картини с насложено лого, помогнаха да се определи емблематичният външен вид на Хана-Барбера. Произведенията на Goble за герои като Quick Draw McGraw и Yogi Bear бяха ефективни на по-малки телевизионни екрани. Вместо да възпроизвежда кадър от анимационния филм, той се фокусира върху представянето на една единствена, силна идея - често в силует - която улавя същността му. В „The Buzzin’ Bear“ Йоги бръмчи с хеликоптер. Той отскача, с кошница за снимки в ръка, в „Мечка на пикник“, а за своя „Страх от битка за награда“ Йоги поставя текста на заглавието в кутия.
С малко или никакво движение, на което да разчитате, единичните кадри на Гобъл трябваше да създадат настроение, да настроят сцената и да опишат история. Те направиха това, използвайки плоски цветове, графични форми и типография, която често беше интегрирана в произведението.
Като дизайнери, които работят в мрежата, заглавията на анимационните филми могат да ни научат много за това как да предадем личността на марката, да направим първо впечатление и да зададем очаквания за нечие изживяване при използване на продукт или уебсайт. Можем да се поучим от техниките на художниците за създаване на ефективни банери, заглавки на целеви страници и дори добри стари начални екрани. Типография на заглавието на Toon Заглавните карти с анимационни филми показват как сливането на текст с изображения осигурява ефекта, от който се нуждае заглавието или героят. С шепа трикове за засенчване на текст, щрих на текст и трансформиране, модерният CSS ви позволява да се докоснете до същата енергия.
Генераторът на заглавия на текст Toon По време на писането на тази статия разбрах, че би било полезно да имам инструмент за генериране на текст, оформен като заглавията на анимационни филми, които толкова много обичам. Така че направих един. My Toon Text Title Generator ви позволява да експериментирате с цветове, щрихи и множество текстови сенки. Можете да коригирате реда на рисуване, да приложите разстояние между буквите, да прегледате текста си в селекция от примерни шрифтове и след това да копирате генерирания CSS направо в клипборда, за да го използвате в проект. Toon Заглавие CSS Можете просто да копирате и поставите CSS, който ви предоставя генераторът на текстови заглавия на Toon. Но нека да разгледаме по-отблизо какво прави. Текстова сянка Погледнете шрифта в това заглавие от епизода на Augie Doggie „Yuk-Yuk Duck“ с неговите бледожълти букви и тъмна, твърда, изместена сянка, която го повдига от фона и създава илюзията за дълбочина.
Вероятно вече знаете, че text-shadow приема четири стойности: (1) хоризонтални и (2) вертикални отмествания, (3) размазване и (4) цвят, който може да бъде плътен или полупрозрачен. Тези стойности на отместване могат да бъдат положителни или отрицателни, така че мога да репликирам „Yuk-Yuk Duck“, като използвам твърда сянка, изтеглена надолу и вдясно: цвят: #f7f76d; текстова сянка: 5px 5px 0 #1e1904;
От друга страна, това заглавие „Pint Giant“ има различно усещане с отрицателната си полумека сянка: цвят: #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; /* Сянка 4 */
Тези сенки показват, че използването на текстова сянка не означава само създаване на светлинни ефекти, тъй като те могат да бъдат и декоративни и да добавят индивидуалност. Щрих на текста Много заглавни картички с анимационни филми съдържат букви с удебелен контур, който ги отличава от фона. Мога да пресъздам този ефект с помощта на текст. Дълго време това свойство беше достъпно само чрез префикс -webkit-, но това също означава, че вече се поддържа в съвременните браузъри.
text-stroke е съкращение за две свойства. Първият, text-stroke-width, рисува контур около отделни букви, докато вторият, text-stroke-color, контролира неговия цвят. За „Whatever Goes Pup“ добавих 4px син щрих към жълтия текст: цвят: #eff0cd; -webkit-text-stroke: 4px #7890b5; текст-щрих: 4px #7890b5;
Щрихите могат да бъдат особено полезни, когато са комбинирани със сенки, така че за „Growing, Growing, Gone“ добавих тънък щрих от 3px към едва замъглена сянка от 1px, за да създам този триизмерен текстов ефект: цвят: #fbb999; текстова сянка: 3px 5px 1px #5160b1; -webkit-text-stroke: 3px #984336; текст-щрих: 3px #984336;
Поръчка за боядисване Използването на текстов щрих не винаги дава очаквания резултат, особено при по-тънки букви и по-дебели щрихи, тъй като по подразбиране браузърът рисува щрих върху запълването. За съжаление, CSS все още не ми позволява да коригирам разположението на чертите, както често правя в Sketch. Въпреки това, свойството paint-order има стойности, които ми позволяват да поставя щриха зад, а не пред запълването.
paint-order: stroke рисува първо щриха, след това запълването, докато paint-order: fill прави обратното: цвят: #fbb999; поръчка на боя: запълване; текстова сянка: 3px 5px 1px #5160b1; text-stroke-color:#984336; text-stroke-width: 3px;
Ефектният щрих поддържа буквите четливи, добавя тежест и — когато се комбинира със сенки и ред на рисуване — придава реално присъствие на плоския текст. Фонове в текста Много заглавни карти с анимационни филми надхвърлят плоския цвят, като добавят текстура, градиенти или илюстрирани детайли към надписа. Понякога това е текстура, друг път може да е градиент с фина тонална промяна. В мрежата мога да пресъздам този ефект, като използвам фоново изображение или градиент зад текста и след това го изрязвам във формата на буквите. Това разчита на две свойства, работещи заедно: background-clip: текст и 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 четим и семантичен, като същевременно ми дава финия контрол, от който се нуждая, за да пресъздам неравномерната характерна типография, която виждате в заглавните карти на класическите анимационни филми. Този подход обаче идва спредупреждения за достъпност, тъй като повечето екранни четци четат текстови възли в ред. Така че това:
Хъм, сладко хъм
... се чете както бихте очаквали: Хъм Сладко бръмчене
Но това:
З u м
...може да се тълкува по различен начин в зависимост от браузъра и екранния четец. Някои ще свържат буквите и ще прочетат думите правилно. Други могат да правят пауза между буквите, което в най-лошия случай може да звучи като: „H…“ „U…“ „M…“
За съжаление, някои решения за разделяне не предоставят винаги достъпен резултат, така че написах свой собствен разделител на текст, 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 е само едно свойство, което мога да използвам, за да трансформирам моя toon текст.
Бих могъл също да завъртя тези отделни знаци за още по-хаотичен вид: /* 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; }
Но translate е само едно свойство, което мога да използвам, за да трансформирам моя toon текст. Бих могъл също да завъртя тези отделни знаци за още по-хаотичен вид: /* 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% { трансформиране: завъртане (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 безкрайно леко влизане-навън; 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 - сенки, щрихи, изрязани фонове и малко сдържана анимация - можем да пресъздадем същото въздействие. Обичам анимирания текст не защото изпитвам носталгия, а защото дизайнът му е умишлен. Направете съзнателни избори и оставете малка типография на туон текст да придаде ефект на вашите дизайни.
