Након што сам завршио пројекат који је захтевао да научим све што сам могао о ЦСС и СВГ анимацијама, почео сам да пишем ову серију о разбијајућим анимацијама и „Како класични цртани филмови инспиришу модерни ЦСС“. Да заокружим ову годину, желим да вам покажем како да користите модерни ЦСС да бисте креирали елемент који Тоон Титлес чини тако упечатљивим: њихову типографију. Наслов Артворк Десигн У тихој ери 1920-их и раних 30-их, типографија насловне карте филма стварала је расположење, постављала сцену и подсећала публику на врсту филма који су платили да погледа.
Насловне картице цртаног филма су такође биле брендирање, расположење и сцена, све то спојено у једно. У раним годинама, када су буџети великих студија били већи, ове насловне карте су често биле илустративне и сликарске.
Али када је телевизија процветала током 1950-их, буџети су пали, а картице које су дизајнирали уметници попут Лоренса „Арт“ Гобла усвојили су нови визуелни језик, постајући више графички, стилизовани и мање замршени. Напомена: Лоренс „Арт“ Гобл је један од често занемарених хероја америчке анимације из средине века. Он је првенствено радио за Ханна-Барбера током њених најутицајнијих година 1950-их и 1960-их. Гобле није био аниматор карактера. Његова улога је била да створи атмосферу, па је дизајнирао окружења за Тхе Флинтстонес, Хуцклеберри Хоунд, Куицк Драв МцГрав и Иоги Беар, као и уводне насловне карте које су дале тон. Његове насловне карте, са сликама са прекривеним логом, помогле су да се дефинише иконски изглед Хане-Барбере. Гоблеова уметничка дела за ликове као што су Куицк Драв МцГрав и Иоги Беар била су ефикасна на мањим ТВ екранима. Уместо да репродукује кадар из цртаног филма, он се фокусирао на представљање једне, снажне идеје - често у силуети - која је ухватила његову суштину. У „Тхе Буззин’ Беар“ Јоги пролази у хеликоптеру. Он одскаче, са корпом за пик-а-ник у руци, у „Медведу на пикнику“, а за свој „Страх над наградном борбом“ Јоги ставља у кутије текст наслова.
Са мало или нимало покрета на које се може ослонити, Гоблеови појединачни кадрови морали су да створе расположење, поставе сцену и опишу причу. То су урадили користећи равне боје, графичке облике и типографију која је често била интегрисана у уметничко дело.
Као дизајнери који раде на вебу, тоон наслови нас могу научити много о томе како да пренесемо личност бренда, оставимо први утисак и поставимо очекивања за нечије искуство коришћења производа или веб локације. Можемо да учимо од техника уметника да креирамо ефикасне банере, заглавља одредишне странице, па чак и добре старе почетне екране. Тоон Типографија наслова Насловне картице цртаног филма показују како спајање типа са сликама даје ударац који је потребан заглављу или јунаку. Уз прегршт трикова сенке текста, потеза текста и трансформације, савремени ЦСС вам омогућава да искористите ту исту енергију.
Тхе Тоон Тект Титле Генератор Током писања овог чланка, схватио сам да би било корисно имати алат за генерисање текста стилизованог као наслови цртаних филмова које толико волим. Па сам направио један. Ми Тоон Тект Титле Генератор вам омогућава да експериментишете са бојама, потезима и вишеструким сенкама текста. Можете да прилагодите редослед бојења, примените размак између слова, прегледате свој текст у избору примера фонтова, а затим копирате генерисани ЦСС директно у међуспремник да бисте га користили у пројекту. Тоон Титле ЦСС Можете једноставно копирати и залепити ЦСС који вам пружа Тоон Тект Титле Генератор. Али погледајмо ближе шта ради. Сенка текста Погледајте тип у овом наслову из епизоде Оги Догија „Јук-Јук патка“, са својим бледожутим словима и тамном, тврдом, помереном сенком која га подиже са позадине и ствара илузију дубине.
Вероватно већ знате да сенка текста прихвата четири вредности: (1) хоризонтална и (2) вертикална померања, (3) замућење и (4) боју која може бити чврста или полупровидна. Те вредности помака могу бити позитивне или негативне, тако да могу да поновим „Јук-Јук патка“ користећи тврду сенку повучену надоле и удесно: боја: #ф7ф76д; тект-схадов: 5пк 5пк 0 #1е1904;
С друге стране, овај наслов „Пинт Гиант“ има другачији осећај са негативном полумеком сенком: боја: #ц2а872; сенка текста: -7пк 5пк 0 #б100е, 0 -5пк 10пк #546ц6ф;
Да бих додао додатну дубину и створио занимљивије ефекте, могу да слојем више сенки. За „Лет’с Дуцк Оут“, комбинујем четири сенке: прву чврсту сенку са негативним хоризонталним помаком да подигнем текст са позадине, а затим прогресивно мекше сенке да створи замућење око њега: боја: #6Ф4Д80; сенка текста: -5пк5пк 0 #260е1е, /* Сенка 1 */ 0 0 15пк #е9це96, /* Схадов 2 */ 0 0 30пк #е9це96, /* Схадов 3 */ 0 0 30пк #е9це96; /* Схадов 4 */
Ове сенке показују да коришћење сенке текста није само стварање светлосних ефеката, јер могу бити и декоративне и додати личност. Тект Строке Многе насловне картице цртаног филма садрже слова са подебљаним обрисима који их издвајају из позадине. Могу поново да креирам овај ефекат помоћу потеза текста. Дуго времена је ово својство било доступно само преко префикса -вебкит-, али то такође значи да је сада подржано у модерним прегледачима.
тект-строке је скраћеница за два својства. Први, ширина потеза текста, исцртава контуру око појединачних слова, док други, боја текста, контролише његову боју. За „Вхатевер Гоес Пуп,“ додао сам плави потез од 4 пиксела на жути текст: боја: #ефф0цд; -вебкит-тект-строке: 4пк #7890б5; тект-строке: 4пк #7890б5;
Потези могу бити посебно корисни када се комбинују са сенкама, тако да сам за „Расте, расте, нестао“ додао танак потез од 3 пиксела на једва замућену сенку од 1 пиксела да бих направио овај тродимензионални текстуални ефекат: боја: #фбб999; тект-схадов: 3пк 5пк 1пк #5160б1; -вебкит-тект-строке: 3пк #984336; тект-строке: 3пк #984336;
Паинт Ордер Коришћење потеза текста не даје увек очекивани резултат, посебно са тањим словима и дебљим потезима, јер претраживач подразумевано црта потез преко испуне. Нажалост, ЦСС ми још увек не дозвољава да прилагодим положај потеза као што то често радим у Скетцх-у. Међутим, својство редоследа бојења има вредности које ми омогућавају да поставим потез иза, а не испред испуне.
редослед боје: потез прво слика потез, а затим испуну, док редослед боје: попуна ради супротно: боја: #фбб999; ред боје: попунити; тект-схадов: 3пк 5пк 1пк #5160б1; тект-строке-цолор:#984336; тект-строке-видтх: 3пк;
Ефикасан потез чини слова читљивима, додаје тежину и — у комбинацији са сенкама и редоследом боје — даје равном тексту стварно присуство. Позадине унутар текста Многе насловне картице цртаног филма превазилазе равну боју додавањем текстуре, прелива или илустрованих детаља у натпис. Понекад је то текстура, други пут може бити градијент са суптилним померањем тонова. На вебу могу поново да направим овај ефекат користећи позадинску слику или градијент иза текста, а затим га исечем у облик слова. Ово се ослања на два својства која раде заједно: бацкгроунд-цлип: тект и тект-филл-цолор: транспарент.
Прво, примењујем позадину иза текста. Ово може бити битмап или векторска слика или ЦСС градијент. За овај пример из Куицк Драв МцГрав епизоде „Баба Баит“, текст наслова укључује суптилан градијент од врха до дна од тамног ка светлом: бацкгроунд: линеар-градиент(0дег, #667б6а, #1д271а);
Затим, исечем ту позадину на глифове и учиним текст транспарентним тако да се позадина види кроз: -вебкит-бацкгроунд-цлип: текст; -вебкит-тект-филл-цолор: транспарентан;
Са само те две линије, позадина више није насликана иза текста; уместо тога, насликан је унутар њега. Ова техника делује посебно добро када се комбинује са потезима и сенкама. Исечени градијент даје натпису боју и текстуру, потез држи његове ивице оштрим, а сенка га издиже из позадине. Заједно, они поново стварају слојевит изглед ручно осликаних насловних картица користећи само мало ЦСС-а. Као и увек, пажљиво тестирајте исечени текст, јер недоумице прегледача понекад могу да утичу на сенке и приказивање. Подела текста на појединачне знакове Понекад не желим да стилизујем целу реч или наслов. Желим да стилизујем појединачна слова — да гурнем лик на место, дам једном знаку додатну тежину или анимирам неколико слова независно. У обичном ХТМЛ-у и ЦСС-у постоји само један поуздан начин да се то уради: умотајте сваки знак у сопствени елемент спан. Могао бих то да урадим ручно, али то би било крхко, тешко за одржавање и брзо би се распало када се копирање промени. Уместо тога, када ми је потребна контрола по слову, користим библиотеку за поделу текста као што је сплт.јс (иако су друга решења доступна). Ово узима текстуални чвор и аутоматски прелама речи или знакове, дајући ми додатне куке за анимацију и стил без забрљања ознака. То је приступ који одржава мој ХТМЛ читљивим и семантичним, док ми даје фину контролу која ми је потребна да поново направим неуједначену, карактерну типографију коју видите на насловним картицама класичних цртаних филмова. Међутим, овај приступ долази саупозорења приступачности, јер већина читача екрана чита текстуалне чворове по реду. па ово: <х2>Хум Свеет Хум
...чита како бисте очекивали: Хум Свеет Хум
али ово: <х2> <спан>Х <спан>у <спан>м
…може се тумачити различито у зависности од претраживача и читача екрана. Неки ће спојити слова и правилно прочитати речи. Други могу да паузирају између слова, што би у најгорем случају могло звучати овако: „Х…” „У…” „М…”
Нажалост, нека решења за раздвајање не дају увек доступан резултат, па сам написао свој сопствени разделник текста, сплинтер.јс, који је тренутно у бета верзији. Трансформисање појединачних слова Да бих активирао свој Тоон Тект Сплиттер, додајем атрибут података елементу који желим да поделим: <х2 дата-сплит="тоон">Хум Свеет Хум
Прво, моја скрипта раздваја сваку реч у појединачна слова и умотава их у елемент спан са примењеним атрибутима класе и АРИА: <спан цласс="тоон-цхар" ариа-хидден="труе">Х <спан цласс="тоон-цхар" ариа-хидден="труе">у <спан цласс="тоон-цхар" ариа-хидден="труе">м
Скрипта затим узима почетни садржај подељеног елемента и додаје га као атрибут арије да би помогао у одржавању приступачности:
<х2 дата-сплит="тоон" ариа-лабел="Хум Свеет Хум"> <спан цласс="тоон-цхар" ариа-хидден="труе">Х <спан цласс="тоон-цхар" ариа-хидден="труе">у <спан цласс="тоон-цхар" ариа-хидден="труе">м
Са примењеним атрибутима класе, могу да стилизујем појединачне ликове по жељи.
На пример, за „Хум Свеет Хум“, желим да поновим како се његова слова померају од основне линије. Након што сам користио свој Тоон Тект Сплиттер, применио сам четири различите вредности превођења користећи неколико селектора :нтх-цхилд да бих направио полунасумичан изглед: /* 4., 8., 12.... */ .тоон-цхар:нтх-цхилд(4н) { транслате: 0 -8пк; } /* 1., 5., 9.... */ .тоон-цхар:нтх-цхилд(4н+1) { транслате: 0 -4пк; } /* 2., 6., 10.... */ .тоон-цхар:нтх-цхилд(4н+2) { транслате: 0 4пк; } /* 3., 7., 11.... */ .тоон-цхар:нтх-цхилд(4н+3) { транслате: 0 8пк; }
Али превођење је само једно својство које могу да користим да трансформишем свој текст из филма.
Такође бих могао да ротирам те појединачне знакове за још хаотичнији изглед: /* 4., 8., 12.... */ .тоон-лине .тоон-цхар:нтх-цхилд(4н) { ротате: -4дег; } /* 1., 5., 9.... */ .тоон-цхар:нтх-цхилд(4н+1) { ротате: -8дег; } /* 2., 6., 10.... */ .тоон-цхар:нтх-цхилд(4н+2) { ротате: 4дег; } /* 3., 7., 11.... */ .тоон-цхар:нтх-цхилд(4н+3) { ротате: 8дег; }
Али превођење је само једно својство које могу да користим да трансформишем свој текст из филма. Такође бих могао да ротирам те појединачне знакове за још хаотичнији изглед: /* 4., 8., 12.... */ .тоон-лине .тоон-цхар:нтх-цхилд(4н) { ротирати: -4дег; }
/* 1., 5., 9.... */ .тоон-цхар:нтх-цхилд(4н+1) { ротирати: -8дег; }
/* 2., 6., 10.... */ .тоон-цхар:нтх-цхилд(4н+2) { ротирати: 4 степена; }
/* 3., 7., 11.... */ .тоон-цхар:нтх-цхилд(4н+3) { ротирати: 8 степени; }
И, наравно, могао бих да додам анимације да померам те ликове и да оживим своје наслове у стилу текста. Прво сам направио анимацију кључног кадра која ротира ликове:
@кеифрамес јиггле { 0%, 100% { трансформ: ротате(вар(--басе-ротате, 0дег)); } 25% { трансформ: ротате(цалц(вар(--басе-ротате, 0дег) + 3дег)); } 50% { трансформ: ротате(цалц(вар(--басе-ротате, 0дег) - 2дег)); } 75% { трансформ: ротате(цалц(вар(--басе-ротате, 0дег) + 1дег)); } }
Пре него што га примените на елементе распона које је креирао мој Тоон Тект Сплиттер: .тоон-цхар { анимација: јиггле 3с бесконачна лакоћа уласка; трансформација порекла: центар дно; }
И коначно, подешавање количине ротације и кашњења пре него што сваки знак почне да се тресе: .тоон-цхар:нтх-цхилд(4н) { --басе-ротате: -2дег; } .тоон-цхар:нтх-цхилд(4н+1) { --басе-ротате: -4дег; } .тоон-цхар:нтх-цхилд(4н+2) { --басе-ротате: 2дег; } .тоон-цхар:нтх-цхилд(4н+3) { --басе-ротате: 4дег; }
.тоон-цхар:нтх-цхилд(4н) { аниматион-делаи: 0.1с; } .тоон-цхар:нтх-цхилд(4н+1) { аниматион-делаи: 0.3с; } .тоон-цхар:нтх-цхилд(4н+2) { аниматион-делаи: 0.5с; } .тоон-цхар:нтх-цхилд(4н+3) { аниматион-делаи: 0.7с; }
Један оквир за остављање утиска Аутори наслова цртаних филмова имали су један оквир да оставе утисак, а њихова типографија је била подједнако важна као и уметничко дело које су сликали. Исто важи и за веб. Добро дизајнирано заглавље или херојподручју је потребна јасноћа, карактер и самопоуздање — а не само избледела позадинска слика пуне ширине. Са неколико пажљиво одабраних ЦСС својстава — сенки, потеза, исечених позадина и неке суздржане анимације — можемо поново створити исти утицај. Волим тоон текст не зато што сам носталгичан, већ зато што је његов дизајн намеран. Правите намерне изборе и пустите да мала типографија текста унесе у своје дизајне.
