Пасля завяршэння праекта, які патрабаваў ад мяне вывучэння ўсяго, што я мог пра анімацыю CSS і SVG, я пачаў пісаць гэтую серыю пра Smashing Animations і «Як класічныя мультфільмы натхняюць сучасны CSS». У завяршэнне гэтага года я хачу паказаць вам, як выкарыстоўваць сучасны CSS для стварэння таго элемента, які робіць Toon Titles такімі ўражлівымі: іх тыпаграфікі. Назва Дызайн мастацкага твора У нямую эпоху 1920-х і пачатку 30-х гадоў тыпаграфіка тытульнай карткі фільма стварала настрой, стварала сцэну і нагадвала гледачам пра фільм, за прагляд якога яны заплацілі.
Загаловак мультфільма таксама змяшчаў брэндынг, настрой і афармленне сцэны, усё ў адным. У першыя гады, калі бюджэты асноўных студый былі большымі, гэтыя тытулы часта былі ілюстрацыйнымі і жывапіснымі.
Але падчас буму тэлебачання ў 1950-я гады бюджэты ўпалі, і паштоўкі, распрацаваныя такімі мастакамі, як Лоўрэнс «Арт» Гобл, перанялі новую візуальную мову, стаўшы больш нагляднымі, стылізаванымі і менш складанымі. Заўвага: Лоўрэнс "Арт" Гобл - адзін з часта ігнаруемых герояў амерыканскай анімацыі сярэдзіны стагоддзя. У першую чаргу ён працаваў на Hanna-Barbera ў найбольш уплывовыя гады 1950-х і 1960-х гадоў. Гобл не быў аніматарам персанажаў. Яго роля заключалася ў стварэнні атмасферы, таму ён распрацаваў асяроддзе для The Flintstones, Huckleberry Hound, Quick Draw McGraw і Yogi Bear, а таксама ўступныя карткі, якія задаюць тон. Яго тытульныя паштоўкі з карцінамі з накладзеным лагатыпам дапамаглі вызначыць культавы выгляд Ханны-Барберы. Ілюстрацыі Гобла для такіх персанажаў, як Куік Дро Макгроу і Мядзведзь Ёгі, былі эфектыўнымі на невялікіх тэлеэкранах. Замест таго, каб прайграваць кадр з мультфільма, ён засяродзіўся на прадстаўленні адзінай моцнай ідэі — часта ў сілуэце — якая адлюстроўвала б яго сутнасць. У «The Buzzin’ Bear» Ёгі пралятае міма ў верталёце. Ён адскоквае з кошыкам для пікніка ў руцэ ў фільме «Мядзведзь на пікніку», а для свайго «Спалоху бойкі за ўзнагароды» Ёгі ўкладвае тэкст загалоўка.
Пры невялікім руху або зусім без яго, асобныя кадры Гобла павінны былі стварыць настрой, стварыць сцэну і апісаць гісторыю. Яны зрабілі гэта, выкарыстоўваючы аднатонныя колеры, графічныя формы і тыпаграфіку, якая часта інтэгравалася ў мастацкі твор.
Як дызайнераў, якія працуюць у Інтэрнэце, назвы мультфільмаў могуць шмат чаму навучыць нас аб тым, як перадаць індывідуальнасць брэнда, вырабіць першае ўражанне і задаць чаканні адносна таго, як хтосьці будзе карыстацца прадуктам або вэб-сайтам. Мы можам навучыцца метадам мастакоў ствараць эфектыўныя банеры, загалоўкі мэтавых старонак і нават старыя добрыя застаўкі. Друкарня загалоўка Toon Загалоўкі мультфільмаў паказваюць, як спалучэнне шрыфту з выявамі дае эфект, неабходны загалоўку або герою. Сучасны CSS дазваляе выкарыстоўваць тую самую энергію, дзякуючы некалькім хітрасцям зацянення тэксту, абводкі тэксту і трансфармацыі.
Генератар загалоўкаў тэксту Toon На часе напісання гэтага артыкула я зразумеў, што было б карысна мець інструмент для генерацыі тэксту, стылізаванага пад назвы мультфільмаў, якія я так люблю. Так што я зрабіў адзін. My Toon Text Title Generator дазваляе эксперыментаваць з колерамі, абводкамі і мноствам ценяў тэксту. Вы можаце наладзіць парадак малявання, прымяніць інтэрвал паміж літарамі, праглядзець свой тэкст у выбары ўзораў шрыфтоў, а затым скапіяваць згенераваны CSS прама ў буфер абмену для выкарыстання ў праекце. Toon Назва CSS Вы можаце проста скапіяваць і ўставіць CSS, які прапануе вам Toon Text Title Generator. Але давайце паглядзім бліжэй, што ён робіць. Цень тэксту Паглядзіце на шрыфт у гэтай назве з серыі Augie Doggie "Yuk-Yuk Duck" з яго бледна-жоўтымі літарамі і цёмным, цвёрдым зрушаным ценем, які адрывае яго ад фону і стварае ілюзію глыбіні.
Вы, напэўна, ужо ведаеце, што text-shadow прымае чатыры значэнні: (1) гарызантальнае і (2) вертыкальнае зрушэнне, (3) размытасць і (4) колер, які можа быць суцэльным або напаўпразрыстым. Гэтыя значэнні зрушэння могуць быць дадатнымі або адмоўнымі, таму я магу паўтарыць «Юк-Юк Дак», выкарыстоўваючы жорсткі цень, пацягнуты ўніз і направа: колер: #f7f76d; цень тэксту: 5px 5px 0 #1e1904;
З іншага боку, гэты загаловак "Пінта Гігант" адрозніваецца сваім негатыўным напаўмяккім ценем: колер: #c2a872; цень тэксту: -7px 5px 0 #b100e, 0 -5 пікселяў 10 пікселяў #546c6f;
Каб дадаць дадатковай глыбіні і стварыць больш цікавыя эфекты, я магу накласці некалькі ценяў. Для «Let's Duck Out» я аб'ядноўваю чатыры цені: першы суцэльны цень з адмоўным гарызантальным зрушэннем, каб прыбраць тэкст з фону, а затым паступова ідуць больш мяккія цені, каб стварыць вакол яго размытасць: колер: #6F4D80; цень тэксту: -5 пікселяў5px 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» я дадаў сінюю абводку памерам 4 пікселя да жоўтага тэксту: колер: #eff0cd; -webkit-text-stroke: 4px #7890b5; абводка тэксту: 4px #7890b5;
Штрыхі могуць быць асабліва карыснымі, калі яны спалучаюцца з ценямі, таму для «Growing, Growing, Gone» я дадаў тонкую рыску памерам 3 пікселя да ледзь размытай цені памерам 1 пікс, каб стварыць гэты эфект трохмернага тэксту: колер: #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 і 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 вы м
...можа інтэрпрэтавацца па-рознаму ў залежнасці ад браўзера і праграмы чытання з экрана. Некаторыя будуць злучаць літары і правільна чытаць словы. Іншыя могуць рабіць паўзы паміж літарамі, якія ў горшым выпадку могуць гучаць так: «Н…» «У…» «М…»
На жаль, некаторыя рашэнні для падзелу не забяспечваюць заўсёды даступны вынік, таму я напісаў свой уласны раздзяляльнік тэксту, 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) { паварот: -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 - гэта толькі адна ўласцівасць, якую я магу выкарыстоўваць для пераўтварэння майго мультыплікацыйнага тэксту. Я мог бы таксама павярнуць гэтыя асобныя сімвалы для яшчэ больш хаатычнага выгляду: /* 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) { паварот: 8deg; }
І, вядома, я мог бы дадаць анімацыю, каб вагаць гэтых персанажаў і ажывіць загалоўкі маіх мультфільмаў. Спачатку я стварыў анімацыю ключавых кадраў, якая паварочвае персанажаў:
@keyframes калыханне { 0%, 100% {пераўтварэнне: павярнуць (вар (--base-rotate, 0deg)); } 25% {пераўтварэнне: паварот(calc(var(--base-rotate, 0deg) + 3deg)); } 50% {пераўтварэнне: паварот(calc(var(--base-rotate, 0deg) - 2deg)); } 75% {пераўтварэнне: паварот(calc(var(--base-rotate, 0deg) + 1deg)); } }
Перш чым прымяніць яго да элементаў span, створаных маім Toon Text Splitter: .toon-char { анімацыя: калыханне 3s бясконцае лёгкасць у выхадзе; паходжанне трансфармацыі: цэнтр унізе; }
І, нарэшце, усталяванне колькасці кручэння і затрымкі перад тым, як кожны сімвал пачне хістацца: .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 — ценямі, штрыхамі, выразаным фонам і некаторай стрыманай анімацыяй — мы можам узнавіць той жа эфект. Я люблю тэкст мультфільма не таму, што адчуваю настальгію, а таму, што яго дызайн наўмысны. Рабіце абдуманы выбар і дазвольце невялікім мульцяшным тэкставым друкарням дадаць эфекту вашым дызайнам.
