Po dokončení projektu, který vyžadoval, abych se naučil vše, co jsem mohl o animacích CSS a SVG, jsem začal psát tuto sérii o Smashing Animations a „Jak klasické karikatury inspirují moderní CSS“. Na závěr tohoto roku vám chci ukázat, jak používat moderní CSS k vytvoření prvku, díky kterému jsou Toon Titles tak působivé: jejich typografie. Název Artwork Design V němé éře dvacátých a počátku třicátých let typografie titulní karty filmu vytvořila náladu, vytvořila scénu a připomněla divákům typ filmu, za který zaplatili.
Kreslené titulní karty byly také branding, nálada a scéna, vše složené do jednoho. V prvních letech, kdy byly rozpočty hlavních studií větší, byly tyto titulky často ilustrativní a malířské.
Když však televize během padesátých let zaznamenala boom, rozpočty klesly a karty navržené umělci jako Lawrence „Art“ Goble přijaly nový vizuální jazyk, staly se více grafickými, stylizovanými a méně komplikovanými. Poznámka: Lawrence „Art“ Goble je jedním z často přehlížených hrdinů americké animace poloviny století. Primárně pracoval pro Hanna-Barbera během jejích nejvlivnějších let 50. a 60. let. Goble nebyl animátor postav. Jeho úlohou bylo vytvářet atmosféru, a tak navrhl prostředí pro The Flintstones, Huckleberry Hound, Quick Draw McGraw a Yogi Bear, stejně jako úvodní kartičky, které udávaly tón. Jeho titulní karty s obrazy s překryvným logem pomohly definovat ikonický vzhled Hanny-Barbery. Gobleova kresba pro postavy jako Quick Draw McGraw a Yogi Bear byla účinná na menších televizních obrazovkách. Spíše než na reprodukci statického snímku z karikatury se zaměřil na prezentaci jediné silné myšlenky – často v siluetě – která vystihla její podstatu. V „The Buzzin‘ Bear“ Yogi bzučí kolem v helikoptéře. V „Medvěd na pikniku“ se odrazí pryč s piknikovým košem v ruce a za svůj „Fright boj o cenu“ Yogi zaškatulkuje text titulku.
S malým nebo žádným pohybem, na který se dalo spolehnout, musely Gobleovy jednotlivé snímky vytvořit náladu, nastavit scénu a popsat příběh. Dělali to pomocí plochých barev, grafických tvarů a typografie, která byla často integrována do uměleckého díla.
Jako designéři, kteří pracují na webu, nás toon titles může hodně naučit, jak vyjádřit osobnost značky, udělat první dojem a nastavit očekávání ohledně něčí zkušenosti s používáním produktu nebo webu. Můžeme se naučit z technik umělců vytvářet efektní bannery, záhlaví vstupních stránek a dokonce i dobré staromódní úvodní obrazovky. Typografie titulků Toon Kreslené titulní kartičky ukazují, jak sloučení písma se snímky dodá úder, který hlavička nebo hrdina potřebuje. S hrstkou textových stínů, textových tahů a transformačních triků vám moderní CSS umožňuje využít stejnou energii.
Generátor textových titulků Toon V průběhu psaní tohoto článku jsem si uvědomil, že by bylo užitečné mít nástroj pro generování textu ve stylu kreslených titulků, které mám tak rád. Tak jsem si jeden vyrobil. My Toon Text Title Generator vám umožní experimentovat s barvami, tahy a více stíny textu. Můžete upravit pořadí malování, použít mezery mezi písmeny, zobrazit náhled textu ve výběru vzorových písem a poté zkopírovat vygenerované CSS přímo do schránky pro použití v projektu. Toon Title CSS Můžete jednoduše zkopírovat a vložit CSS, které vám Toon Text Title Generator poskytuje. Ale podívejme se blíže na to, co dělá. Textový stín Podívejte se na typ v tomto titulu z epizody „Yuk-Yuk Duck“ od Augieho Doggieho s jeho světle žlutými písmeny a tmavým, tvrdým, odsazeným stínem, který jej zvedá z pozadí a vytváří iluzi hloubky.
Pravděpodobně již víte, že stín textu přijímá čtyři hodnoty: (1) vodorovné a (2) svislé posunutí, (3) rozostření a (4) barvu, která může být plná nebo poloprůhledná. Tyto offsetové hodnoty mohou být kladné nebo záporné, takže mohu replikovat „Yuk-Yuk Duck“ pomocí tvrdého stínu staženého dolů a doprava: barva: #f7f76d; text-shadow: 5px 5px 0 #1e1904;
Na druhou stranu má tento titul „Pint Giant“ jiný pocit se svým negativním poloměkkým stínem: barva: #c2a872; stín textu: -7px 5px 0 #b100e, 0 -5px 10px #546c6f;
Chcete-li přidat další hloubku a vytvořit zajímavější efekty, mohu vrstvit více stínů. Pro „Let’s Duck Out“ kombinuji čtyři stíny: první je plný stín s negativním horizontálním posunem, který zvedne text z pozadí, následovaný postupně měkčími stíny, které kolem něj vytvoří rozostření: barva: #6F4D80; stín textu: -5 pixelů5px 0 #260e1e, /* Stín 1 */ 0 0 15px #e9ce96, /* Stín 2 */ 0 0 30px #e9ce96, /* Stín 3 */ 0 0 30px #e9ce96; /* Stín 4 */
Tyto stíny ukazují, že použití stínu textu není jen o vytváření světelných efektů, protože mohou být také dekorativní a přidat osobitost. Tah textu Mnoho karikatur s titulky obsahuje písmena s tučným obrysem, díky kterému vyčnívají z pozadí. Tento efekt mohu znovu vytvořit pomocí tahu textu. Po dlouhou dobu byla tato vlastnost k dispozici pouze prostřednictvím předpony -webkit-, ale to také znamená, že je nyní podporována v moderních prohlížečích.
text-stroke je zkratka pro dvě vlastnosti. První, šířka tahu textu, kreslí obrys kolem jednotlivých písmen, zatímco druhý, barva tahu textu, ovládá jeho barvu. Pro „Whatever Goes Pup“ jsem do žlutého textu přidal 4px modrý tah: barva: #eff0cd; -webkit-text-stroke: 4px #7890b5; text-stroke: 4px #7890b5;
Tahy mohou být obzvláště užitečné, když jsou kombinovány se stíny, takže pro „Rostoucí, rostoucí, pryč“ jsem přidal tenký 3px tah k sotva rozmazanému 1px stínu, abych vytvořil tento trojrozměrný textový efekt: barva: #fbb999; text-shadow: 3px 5px 1px #5160b1; -webkit-text-stroke: 3px #984336; tah textu: 3px #984336;
Objednávka barvy Použití tahu textu nevede vždy k očekávanému výsledku, zejména u tenčích písmen a silnějších tahů, protože prohlížeč ve výchozím nastavení nakreslí tah přes výplň. Bohužel mi CSS stále neumožňuje upravit umístění tahu, jak to často dělám v aplikaci Sketch. Vlastnost paint-order má však hodnoty, které mi umožňují umístit tah za výplň, nikoli před výplň.
pořadí malování: tah namaluje nejprve tah, potom výplň, zatímco pořadí vybarvení: výplň dělá opak: barva: #fbb999; barva-objednávka: vyplnit; text-shadow: 3px 5px 1px #5160b1; barva-tahu textu:#984336; šířka-tahu textu: 3px;
Efektivní tah udržuje písmena čitelná, zvyšuje váhu a – v kombinaci se stíny a pořadím barev – dává plochému textu skutečnou podobu. Pozadí Uvnitř Textu Mnoho karikatur s titulky jde nad rámec plochých barev přidáním textury, přechodů nebo ilustrovaných detailů k nápisům. Někdy je to textura, jindy to může být gradient s jemným tónovým posunem. Na webu mohu tento efekt znovu vytvořit pomocí obrázku na pozadí nebo přechodu za textem a jeho oříznutí do tvaru písmen. To závisí na dvou vlastnostech, které spolupracují: background-clip: text a text-fill-color: transparent.
Nejprve aplikuji pozadí za text. Může to být bitmapový nebo vektorový obrázek nebo přechod CSS. V tomto příkladu z epizody Quick Draw McGraw „Baba Bait“ obsahuje text titulku jemný přechod shora a zespodu z tmavé do světlé: pozadí: linear-gradient(0deg, #667b6a, #1d271a);
Dále toto pozadí oříznu na glyfy a zprůhledním text, aby pozadí prosvítalo: -webkit-background-clip: text; -webkit-text-fill-color: transparentní;
Pouze s těmito dvěma řádky již není pozadí namalováno za textem; místo toho je v něm namalováno. Tato technika funguje obzvláště dobře v kombinaci s tahy a stíny. Oříznutý přechod dodává písmu barvu a texturu, tah udržuje jeho okraje ostré a stín je vyzdvihuje z pozadí. Společně obnovují vrstvený vzhled ručně malovaných titulků s použitím pouze malého CSS. Jako vždy pečlivě testujte oříznutý text, protože vtípky prohlížeče mohou někdy ovlivnit stíny a vykreslování. Rozdělení textu na jednotlivé znaky Někdy se mi nechce stylizovat celé slovo nebo nadpis. Chci stylovat jednotlivá písmena – postrčit znak na místo, dát jednomu glyfu extra váhu nebo animovat několik písmen nezávisle. V prostém HTML a CSS existuje pouze jeden spolehlivý způsob, jak toho dosáhnout: zabalit každý znak do vlastního prvku span. Mohl bych to udělat ručně, ale bylo by to křehké, těžko by se to udržovalo a rychle by se rozpadlo, když se změní kopie. Místo toho, když potřebuji ovládání jednotlivých písmen, používám knihovnu pro dělení textu, jako je splt.js (ačkoli jsou k dispozici i jiná řešení). To zabere textový uzel a automaticky zalomí slova nebo znaky, což mi dává další háčky pro animaci a styl, aniž bych si pokazil označení. Je to přístup, který udržuje můj HTML čitelný a sémantický, a zároveň mi poskytuje jemnou kontrolu, kterou potřebuji k obnovení nerovnoměrné, charakteristické typografie, kterou vidíte na klasických kreslených titulních kartách. Tento přístup však přichází supozornění na přístupnost, protože většina čteček obrazovky čte textové uzly v pořadí. Takže toto:
Hum, sladké hučení
…čte se, jak byste očekávali: Hum Sweet Hum
Ale toto:
H u m
…může být interpretováno odlišně v závislosti na prohlížeči a čtečce obrazovky. Někteří zřetězí písmena a přečtou slova správně. Jiní se mohou mezi písmeny pozastavit, což v nejhorším případě může znít takto: „H…“ „U…“ „M…“
Některá řešení rozdělení bohužel neposkytují vždy přístupný výsledek, takže jsem napsal svůj vlastní rozdělovač textu, splinter.js, který je v současné době ve verzi beta. Transformace jednotlivých písmen Pro aktivaci mého Toon Text Splitteru přidám atribut data- k prvku, který chci rozdělit:
Hum Sweet Hum
Nejprve můj skript rozdělí každé slovo na jednotlivá písmena a zabalí je do prvku span s použitými atributy class a ARIA:
Skript poté vezme počáteční obsah rozděleného prvku a přidá jej jako atribut árie, aby pomohl zachovat přístupnost:
S použitím těchto atributů třídy pak mohu stylovat jednotlivé postavy, jak chci.
Například pro „Hum Sweet Hum“ chci replikovat, jak se jeho písmena posunují od základní linie. Po použití mého Toon Text Splitteru jsem použil čtyři různé hodnoty překladu pomocí několika selektorů :nth-child, abych vytvořil polonáhodný vzhled: /* 4., 8., 12.... */ .toon-char:nth-child(4n) { translate: 0 -8px; } /* 1., 5., 9.... */ .toon-char:nth-child(4n+1) { translate: 0 -4px; } /* 2., 6., 10.... */ .toon-char:nth-child(4n+2) { translate: 0 4px; } /* 3., 7., 11.... */ .toon-char:nth-child(4n+3) { translate: 0 8px; }
Ale translate je jen jedna vlastnost, kterou mohu použít k transformaci svého textu toon.
Mohl bych také otočit jednotlivé postavy pro ještě chaotičtější vzhled: /* 4., 8., 12.... */ .toon-line .toon-char:nth-child(4n) { rotace: -4deg; } /* 1., 5., 9.... */ .toon-char:nth-child(4n+1) { rotace: -8deg; } /* 2., 6., 10.... */ .toon-char:nth-child(4n+2) { rotace: 4deg; } /* 3., 7., 11.... */ .toon-char:nth-child(4n+3) { rotace: 8deg; }
Ale translate je jen jedna vlastnost, kterou mohu použít k transformaci svého textu toon. Mohl jsem také otočit jednotlivé postavy pro ještě chaotičtější vzhled: /* 4., 8., 12.... */ .toon-line .toon-char:nth-child(4n) { otočení: -4deg; }
/* 1., 5., 9.... */ .toon-char:nth-child(4n+1) { otočení: -8 stupňů; }
/* 2., 6., 10.... */ .toon-char:nth-child(4n+2) { otočení: 4 stupně; }
/* 3., 7., 11.... */ .toon-char:nth-child(4n+3) { otočení: 8 stupňů; }
A samozřejmě bych mohl přidat animace, které by hýbaly s těmi postavami a přivedly k životu moje nadpisy ve stylu toon textu. Nejprve jsem vytvořil animaci klíčových snímků, která otáčí postavy:
@keyframes jiggle { 0 %, 100 % { transformace: otočit(var(--základna-rotace, 0 stupňů)); } 25 % { transformace: otočit(výpočet(var(--základna-rotace, 0 stupňů) + 3 stupně)); } 50 % { transformace: otočit(výpočet(var(--základna-otočit, 0 stupňů) - 2 stupně)); } 75 % { transformace: otočit(výpočet(var(--základna-rotace, 0°) + 1°)); } }
Než jej použijete na prvky span vytvořené mým Toon Text Splitterem: .toon-char { animace: jiggle 3s nekonečný náběh; transform-origin: střed dole; }
A nakonec nastavení míry rotace a prodlevy, než se každá postava začne třást: .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) { animace-zpoždění: 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; }
Jeden snímek, který udělá dojem Umělci kreslených titulků měli jeden rám, aby udělali dojem, a jejich typografie byla stejně důležitá jako umělecká díla, která malovali. To samé platí na webu. Dobře navržená hlavička nebo hrdinaoblast potřebuje jasnost, charakter a sebevědomí – ne pouze vybledlý obrázek na pozadí v plné šířce. S několika pečlivě vybranými vlastnostmi CSS – stíny, tahy, oříznutým pozadím a omezenou animací – můžeme znovu vytvořit stejný efekt. Miluji toon text ne proto, že bych byl nostalgický, ale protože jeho design je záměrný. Udělejte si uvážená rozhodnutí a dovolte, aby malá textová typografie dodala vašim návrhům punc.
