Po dokončení projektu, ktorý vyžadoval, aby som sa naučil všetko, čo som mohol o animáciách CSS a SVG, som začal písať túto sériu o Smashing Animations a „Ako klasické karikatúry inšpirujú moderný CSS“. Na záver tohto roka vám chcem ukázať, ako používať moderné CSS na vytvorenie prvku, vďaka ktorému sú titulky Toon tak pôsobivé: ich typografia. Názov Dizajn umeleckého diela V nemej ére 20. a začiatku 30. rokov typografia titulnej karty filmu vytvorila náladu, nastavila scénu a pripomenula publiku typ filmu, za ktorý zaplatili.
Kreslené titulné karty obsahovali aj značku, náladu a scénu, všetko v jednom. V prvých rokoch, keď boli rozpočty veľkých štúdií väčšie, boli tieto titulky často ilustračné a maliarske.
Keď však televízia v 50. rokoch zaznamenala boom, rozpočty klesli a karty navrhnuté umelcami ako Lawrence „Art“ Goble prijali nový vizuálny jazyk, ktorý sa stal viac grafickým, štylizovaným a menej zložitým. Poznámka: Lawrence „Art“ Goble je jedným z často prehliadaných hrdinov americkej animácie v polovici storočia. Pracoval predovšetkým pre Hanna-Barbera počas jej najvplyvnejších rokov 50. a 60. rokov. Goble nebol animátor postáv. Jeho úlohou bolo vytvárať atmosféru, a tak navrhol prostredia pre The Flintstones, Huckleberry Hound, Quick Draw McGraw a Yogi Bear, ako aj úvodné titulné karty, ktoré udávali tón. Jeho titulné karty s maľbami s prekrytým logom pomohli definovať ikonický vzhľad Hanny-Barbery. Gobleove umelecké diela pre postavy ako Quick Draw McGraw a Yogi Bear boli účinné na menších televíznych obrazovkách. Namiesto reprodukovania statického obrázka z karikatúry sa zameral na prezentáciu jedinej silnej myšlienky – často v siluete – ktorá vystihla jej podstatu. Vo filme „The Buzzin‘ Bear“ Yogi bzučí okolo v helikoptére. V „Medveď na pikniku“ sa odrazí preč s piknikovým košíkom v ruke a pre svoj „Boj o cenu Fright“ Yogi zaškatuľkuje text názvu.
S malým alebo žiadnym pohybom, na ktorý sa dalo spoľahnúť, museli Gobleove jednotlivé snímky vytvoriť náladu, nastaviť scénu a opísať príbeh. Robili to pomocou plochých farieb, grafických tvarov a typografie, ktorá bola často integrovaná do umeleckého diela.
Ako dizajnéri, ktorí pracujú na webe, nás toon titles môže veľa naučiť o tom, ako vyjadriť osobnosť značky, urobiť prvý dojem a nastaviť očakávania pre niekoho skúsenosť s produktom alebo webovou stránkou. Z techník umelcov sa môžeme naučiť vytvárať efektívne bannery, hlavičky vstupných stránok a dokonca aj dobré staré úvodné obrazovky. Typografia názvu Toon Kreslené titulné kartičky ukazujú, ako zlúčenie typu so snímkami dodá úder, ktorý hlavička alebo hrdina potrebuje. Vďaka hŕstke trikov na tieňovanie textu, ťahanie textu a transformáciu vám moderný CSS umožňuje využiť rovnakú energiu.
Generátor názvov textu Toon V priebehu písania tohto článku som si uvedomil, že by bolo užitočné mať nástroj na generovanie textu v štýle kreslených titulov, ktoré mám tak rád. Tak som si jeden vyrobil. Generátor názvov textu My Toon vám umožňuje experimentovať s farbami, ťahmi a viacerými tieňmi textu. Môžete upraviť poradie farieb, použiť medzery medzi písmenami, zobraziť ukážku textu vo výbere vzorových písiem a potom skopírovať vygenerovaný CSS priamo do schránky na použitie v projekte. Toon Title CSS Môžete jednoducho skopírovať a vložiť CSS, ktoré vám poskytuje generátor textových nadpisov Toon. Pozrime sa však bližšie na to, čo robí. Textový tieň Pozrite sa na typ v tomto titule z epizódy „Yuk-Yuk Duck“ od Augieho Doggieho s jeho svetložltými písmenami a tmavým, tvrdým, odsadeným tieňom, ktorý ho dvíha z pozadia a vytvára ilúziu hĺbky.
Pravdepodobne už viete, že tieň textu akceptuje štyri hodnoty: (1) horizontálne a (2) vertikálne posuny, (3) rozmazanie a (4) farbu, ktorá môže byť plná alebo polopriehľadná. Tieto offsetové hodnoty môžu byť kladné alebo záporné, takže môžem replikovať „Yuk-Yuk Duck“ pomocou tvrdého tieňa stiahnutého nadol a doprava: farba: #f7f76d; text-shadow: 5px 5px 0 #1e1904;
Na druhej strane má tento titul „Pint Giant“ iný pocit s negatívnym polomäkkým tieňom: farba: #c2a872; textový tieň: -7px 5px 0 #b100e, 0 -5px 10px #546c6f;
Ak chcete pridať ďalšiu hĺbku a vytvoriť zaujímavejšie efekty, môžem vrstviť viacero tieňov. Pre „Let’s Duck Out“ kombinujem štyri tiene: prvý plný tieň s negatívnym horizontálnym posunom, aby sa text zdvihol z pozadia, po ktorom nasledujú postupne jemnejšie tiene, ktoré okolo neho vytvárajú rozmazanie: farba: #6F4D80; textový tieň: -5 pixelov5px 0 #260e1e, /* Tieň 1 */ 0 0 15px #e9ce96, /* Tieň 2 */ 0 0 30px #e9ce96, /* Tieň 3 */ 0 0 30px #e9ce96; /* Tieň 4 */
Tieto tiene ukazujú, že použitie tieňa textu nie je len o vytváraní svetelných efektov, pretože môžu byť aj dekoratívne a pridať osobitosť. Ťah textu Mnoho karikatúr s titulkami obsahuje písmená s tučným obrysom, vďaka ktorému vyčnievajú z pozadia. Tento efekt môžem znovu vytvoriť pomocou ťahu textu. Po dlhú dobu bola táto vlastnosť dostupná iba prostredníctvom predpony -webkit-, ale to tiež znamená, že ju teraz podporujú moderné prehliadače.
text-stroke je skratka pre dve vlastnosti. Prvý, šírka ťahu textu, kreslí obrys okolo jednotlivých písmen, zatiaľ čo druhý, farba ťahu textu, ovláda jeho farbu. Pre „Whatever Goes Pup“ som do žltého textu pridal 4px modrý ťah: farba: #eff0cd; -webkit-text-stroke: 4px #7890b5; text-stroke: 4px #7890b5;
Ťahy môžu byť obzvlášť užitočné, keď sú kombinované s tieňmi, takže pre „Rastúci, rastúci, preč“ som pridal tenký 3px ťah k sotva rozmazanému 1px tieňu, aby som vytvoril tento trojrozmerný textový efekt: farba: #fbb999; text-shadow: 3px 5px 1px #5160b1; -webkit-text-stroke: 3px #984336; text-stroke: 3px #984336;
Objednávka farby Použitie ťahu textu nie vždy prinesie očakávaný výsledok, najmä s tenšími písmenami a hrubšími ťahmi, pretože prehliadač v predvolenom nastavení nakreslí ťah cez výplň. Bohužiaľ, CSS mi stále neumožňuje upraviť umiestnenie ťahov, ako to často robím v aplikácii Sketch. Vlastnosť paint-order má však hodnoty, ktoré mi umožňujú umiestniť ťah skôr za výplň ako pred ňu.
poradie farby: ťah vyfarbí najprv ťah, potom výplň, zatiaľ čo poradie farby: výplň robí opak: farba: #fbb999; poradie farby: výplň; text-shadow: 3px 5px 1px #5160b1; text-stroke-color:#984336; šírka-textového ťahu: 3px;
Efektívny ťah udržuje písmená čitateľné, pridáva váhu a – v kombinácii s tieňmi a poradím farieb – dáva plochému textu skutočnú podobu. Pozadia vo vnútri textu Mnoho karikatúr s titulkami ide nad rámec plochých farieb pridaním textúry, prechodov alebo ilustrovaných detailov k nápisom. Niekedy je to textúra, inokedy to môže byť gradient s jemným tónovým posunom. Na webe môžem tento efekt znova vytvoriť použitím obrázka na pozadí alebo prechodu za textom a jeho orezaním do tvaru písmen. To závisí od dvoch vlastností, ktoré spolupracujú: background-clip: text a text-fill-color: transparent.
Najprv použijem pozadie za text. Môže to byť bitmapový alebo vektorový obrázok alebo prechod CSS. V tomto príklade z epizódy Quick Draw McGraw „Baba Bait“ obsahuje text nadpisu jemný prechod zhora nadol od tmy po svetlo: pozadie: linear-gradient(0deg, #667b6a, #1d271a);
Ďalej prilepím toto pozadie na glyfy a urobím text priehľadným, aby pozadie presvitalo: -webkit-background-clip: text; -webkit-text-fill-color: transparentná;
Len s týmito dvoma riadkami už nie je pozadie namaľované za textom; namiesto toho je v ňom namaľovaný. Táto technika funguje obzvlášť dobre v kombinácii s ťahmi a tieňmi. Orezaný prechod poskytuje písmu farbu a textúru, ťah udržuje jeho okraje ostré a tieň ho vyzdvihuje z pozadia. Spoločne vytvárajú vrstvený vzhľad ručne maľovaných titulných kariet s použitím iba trocha CSS. Ako vždy, orezaný text dôkladne otestujte, pretože zvláštnosti prehliadača môžu niekedy ovplyvniť tiene a vykresľovanie. Rozdelenie textu na jednotlivé znaky Niekedy sa mi nechce štylizovať celé slovo alebo nadpis. Chcem upraviť jednotlivé písmená – postrčiť znak na miesto, dať jednému glyfu extra váhu alebo animovať niekoľko písmen nezávisle. V jednoduchom HTML a CSS existuje len jeden spoľahlivý spôsob, ako to urobiť: zabaliť každý znak do vlastného prvku span. Mohol by som to urobiť ručne, ale bolo by to krehké, náročné na údržbu a pri zmene kópie by sa to rýchlo rozpadlo. Namiesto toho, keď potrebujem ovládanie jednotlivých písmen, používam knižnicu na delenie textu ako splt.js (hoci sú k dispozícii aj iné riešenia). Toto zaberie textový uzol a automaticky zalomí slová alebo znaky, čím získam ďalšie možnosti animácie a štýlu bez toho, aby som si pokazil značenie. Je to prístup, vďaka ktorému je môj kód HTML čitateľný a sémantický a zároveň mi poskytuje jemnú kontrolu, ktorú potrebujem na opätovné vytvorenie nerovnomernej, charakteristickej typografie, ktorú vidíte na klasických kreslených titulných kartách. Tento prístup však prichádza supozornenia týkajúce sa dostupnosti, pretože väčšina čítačiek obrazovky číta textové uzly v poradí. Takže toto:
Hu, Sladký hukot
...číta sa, ako by ste očakávali: Hum Sweet Hum
Ale toto:
H u m
...môže byť interpretované odlišne v závislosti od prehliadača a čítačky obrazovky. Niektorí spoja písmená a prečítajú slová správne. Iní môžu medzi písmenami urobiť pauzu, čo v najhoršom prípade môže znieť takto: "H..." "U..." "M..."
Je smutné, že niektoré riešenia na rozdelenie neposkytujú vždy dostupný výsledok, preto som napísal vlastný rozdeľovač textu splinter.js, ktorý je momentálne vo verzii beta. Transformácia jednotlivých písmen Ak chcete aktivovať môj Toon Text Splitter, pridám atribút data- k prvku, ktorý chcem rozdeliť:
Hu, Sweet Hum
Najprv môj skript rozdelí každé slovo na jednotlivé písmená a zabalí ich do prvku span s použitými atribútmi class a ARIA:
Skript potom vezme počiatočný obsah rozdeleného prvku a pridá ho ako atribút árie, aby sa zachovala dostupnosť:
S týmito atribútmi triedy môžem potom upravovať jednotlivé postavy podľa vlastného výberu.
Napríklad pre „Hum Sweet Hum“ chcem zopakovať, ako sa jeho písmená posúvajú od základnej čiary. Po použití môjho Toon Text Splitter som použil štyri rôzne hodnoty prekladu pomocou niekoľkých :nth-child selektorov, aby som vytvoril polonáhodný vzhľad: /* 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; }
Prekladač je však len jednou vlastnosťou, ktorú môžem použiť na transformáciu svojho textu.
Mohol by som tiež otáčať jednotlivé postavy pre ešte chaotickejší vzhľad: /* 4., 8., 12.... */ .toon-line .toon-char:nth-child(4n) { rotácia: -4deg; } /* 1., 5., 9.... */ .toon-char:nth-child(4n+1) { rotácia: -8deg; } /* 2., 6., 10.... */ .toon-char:nth-child(4n+2) { rotácia: 4deg; } /* 3., 7., 11.... */ .toon-char:nth-child(4n+3) { rotácia: 8deg; }
Prekladač je však len jednou vlastnosťou, ktorú môžem použiť na transformáciu svojho textu. Mohol by som tiež otáčať jednotlivé postavy pre ešte chaotickejší vzhľad: /* 4., 8., 12.... */ .toon-line .toon-char:nth-child(4n) { otáčanie: -4°; }
/* 1., 5., 9.... */ .toon-char:nth-child(4n+1) { otáčanie: -8°; }
/* 2., 6., 10.... */ .toon-char:nth-child(4n+2) { otočenie: 4 stupne; }
/* 3., 7., 11.... */ .toon-char:nth-child(4n+3) { otočenie: 8 stupňov; }
A, samozrejme, mohol by som pridať animácie, aby som s týmito postavami hýbal a priviedol k životu moje nadpisy v štýle tónov. Najprv som vytvoril animáciu kľúčových snímok, ktorá otáča postavy:
@keyframes juggle { 0%, 100% { transformácia: rotácia(var(--základna-rotácia, 0°)); } 25 % { transformácia: rotácia(výpočet(var(--základna-rotácia, 0°) + 3°)); } 50 % { transformácia: rotácia(výpočet(var(--základna-rotácia, 0°) - 2°)); } 75 % { transformácia: rotácia(výpočet(var(--základna-rotácia, 0°) + 1°)); } }
Pred použitím na prvky rozpätia vytvorené mojím Toon Text Splitter: .toon-char { animácia: kývanie 3s nekonečné uvoľnenie-in-out; transform-origin: stred dole; }
A nakoniec, nastavenie rýchlosti rotácie a oneskorenia, kým sa každá postava začne chvieť: .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) { animácia-oneskorenie: 0,1s; } .toon-char:nth-child(4n+1) { animácia-oneskorenie: 0,3s; } .toon-char:nth-child(4n+2) { animácia-oneskorenie: 0,5s; } .toon-char:nth-child(4n+3) { animácia-oneskorenie: 0,7s; }
Jeden rám na vytvorenie dojmu Umelci kreslených titulov mali jeden rám, aby urobili dojem, a ich typografia bola rovnako dôležitá ako umelecké dielo, ktoré maľovali. To isté platí aj na webe. Dobre navrhnutá hlavička alebo hrdinaoblasť potrebuje jasnosť, charakter a sebadôveru – nielen vyblednutý obrázok na pozadí v plnej šírke. S niekoľkými starostlivo vybranými vlastnosťami CSS – tieňmi, ťahmi, orezaným pozadím a nejakou obmedzenou animáciou – môžeme znovu vytvoriť rovnaký efekt. Milujem toon text nie preto, že by som bol nostalgický, ale preto, že jeho dizajn je zámerný. Urobte premyslené rozhodnutia a dovoľte, aby trocha príliš textovej typografie pridala vášmu návrhu punc.
