Po končanem projektu, zaradi katerega sem se moral naučiti vsega o animacijah CSS in SVG, sem začel pisati to serijo o Smashing Animations in »Kako klasične risanke navdihujejo sodobni CSS«. Za zaključek tega leta vam želim pokazati, kako uporabiti sodobni CSS za ustvarjanje tistega elementa, zaradi katerega so Toon Titles tako vplivni: njihova tipografija. Naslov Oblikovanje umetniškega dela V nemem obdobju dvajsetih in zgodnjih tridesetih let prejšnjega stoletja je tipografija naslovne kartice filma ustvarila razpoloženje, postavila prizorišče in občinstvo spomnila na vrsto filma, za ogled katerega so plačali.
Naslovne kartice risanke so bile tudi blagovna znamka, razpoloženje in postavitev scene, vse združeno v eno. V zgodnjih letih, ko so bili proračuni velikih studiev večji, so bile te naslovne kartice pogosto ilustrativne in slikarske.
Toda ko je televizija v petdesetih letih prejšnjega stoletja doživela razcvet, so proračuni padli in kartice, ki so jih oblikovali umetniki, kot je Lawrence »Art« Goble, so sprejele nov vizualni jezik, postale so bolj grafične, stilizirane in manj zapletene. Opomba: Lawrence "Art" Goble je eden od pogosto spregledanih junakov ameriške animacije sredi stoletja. Delal je predvsem za Hanna-Barbera v najvplivnejših letih 1950 in 1960. Goble ni bil animator likov. Njegova vloga je bila ustvariti vzdušje, zato je zasnoval okolja za The Flintstones, Huckleberry Hound, Quick Draw McGraw in Yogi Bear, pa tudi uvodne naslovne kartice, ki so dale ton. Njegove naslovne kartice s slikami z logotipom so pomagale opredeliti ikonični videz Hanna-Barbera. Goblevo umetniško delo za like, kot sta Quick Draw McGraw in Yogi Bear, je bilo učinkovito na manjših televizijskih zaslonih. Namesto da bi reproduciral kader iz risanke, se je osredotočil na predstavitev ene same, močne ideje – pogosto v silhueti – ki je zajela njeno bistvo. V "The Buzzin' Bear" Yogi brni mimo v helikopterju. V »Medvedu na pikniku« odskoči stran s košaro za piknik v roki, za svoj »Prize Fight Fright« pa Yogi zaokroži naslovno besedilo.
Z malo ali nič gibanja, na katerega bi se lahko zanesel, so morali Goblevi posamezni okvirji ustvariti razpoloženje, postaviti sceno in opisati zgodbo. To so storili z uporabo ravnih barv, grafičnih oblik in tipografije, ki je bila pogosto integrirana v umetniško delo.
Kot oblikovalci, ki delamo na spletu, nas lahko naslovi toon veliko naučijo o tem, kako izraziti osebnost blagovne znamke, narediti prvi vtis in določiti pričakovanja za izkušnjo nekoga pri uporabi izdelka ali spletnega mesta. Od umetnikovih tehnik se lahko naučimo ustvarjati učinkovite pasice, glave ciljnih strani in celo dobre stare začetne zaslone. Tipografija naslova Toon Naslovne kartice risanke prikazujejo, kako združitev pisave s slikami zagotavlja moč, ki jo potrebuje glava ali junak. S peščico trikov senčenja besedila, potez besedila in preoblikovanja vam sodobni CSS omogoča, da izkoristite isto energijo.
Generator naslovov besedila Toon Med pisanjem tega članka sem ugotovil, da bi bilo koristno imeti orodje za generiranje besedila, oblikovanega kot naslovi risank, ki so mi tako všeč. Tako sem naredil enega. My Toon Text Title Generator vam omogoča eksperimentiranje z barvami, potezami in več sencami besedila. Prilagodite lahko vrstni red barvanja, uporabite razmik med črkami, predogledate svoje besedilo v izboru vzorčnih pisav in nato kopirate ustvarjeni CSS naravnost v odložišče za uporabo v projektu. Toon Naslov CSS Lahko preprosto kopirate in prilepite CSS, ki vam ga zagotovi Toon Text Title Generator. Toda poglejmo podrobneje, kaj počne. Senca besedila Poglejte tip v tem naslovu iz epizode Augieja Doggieja "Yuk-Yuk Duck," s svojimi bledo rumenimi črkami in temno, trdo, zamaknjeno senco, ki ga dvigne od ozadja in ustvari iluzijo globine.
Verjetno že veste, da text-shadow sprejema štiri vrednosti: (1) vodoravni in (2) navpični odmiki, (3) zamegljenost in (4) barvo, ki je lahko polna ali polprosojna. Te vrednosti odmika so lahko pozitivne ali negativne, tako da lahko ponovim »Yuk-Yuk Duck« z uporabo trde sence, povlečene navzdol in v desno: barva: #f7f76d; senca besedila: 5px 5px 0 #1e1904;
Po drugi strani ima ta naslov »Pint Giant« drugačen občutek s svojo negativno polmehko senco: barva: #c2a872; text-shadow: -7px 5px 0 #b100e, 0 -5px 10px #546c6f;
Za dodajanje dodatne globine in ustvarjanje zanimivejših učinkov lahko nanesem več senc. Za »Let's Duck Out« združim štiri sence: prvo je trdna senca z negativnim vodoravnim odmikom, da dvignem besedilo od ozadja, sledijo pa ji postopoma mehkejše sence, da ustvarim zamegljenost okoli njega: barva: #6F4D80; text-shadow: -5px5px 0 #260e1e, /* Senca 1 */ 0 0 15px #e9ce96, /* Senca 2 */ 0 0 30px #e9ce96, /* Senca 3 */ 0 0 30px #e9ce96; /* Senca 4 */
Te sence kažejo, da pri uporabi besedilne sence ne gre le za ustvarjanje svetlobnih učinkov, saj so lahko tudi okrasne in dodajo osebnost. Besedilna poteza Številne naslovne kartice risank vsebujejo črke s krepkim obrisom, zaradi česar izstopajo iz ozadja. Ta učinek lahko poustvarim s potezo besedila. Dolgo časa je bila ta lastnost na voljo le prek predpone -webkit-, vendar to tudi pomeni, da je zdaj podprta v sodobnih brskalnikih.
text-stroke je okrajšava za dve lastnosti. Prvi, text-stroke-width, nariše obris okoli posameznih črk, medtem ko drugi, text-stroke-color, nadzira njihovo barvo. Za »Whatever Goes Pup« sem rumenemu besedilu dodal modro črto velikosti 4 slikovnih pik: barva: #eff0cd; -webkit-text-stroke: 4px #7890b5; poteza besedila: 4px #7890b5;
Poteze so lahko še posebej uporabne, če so kombinirane s sencami, zato sem za »Growing, Growing, Gone« komaj zamegljeni senci 1px dodal tanko potezo 3px, da sem ustvaril ta tridimenzionalni učinek besedila: barva: #fbb999; senca besedila: 3px 5px 1px #5160b1; -webkit-text-stroke: 3px #984336; poteza besedila: 3px #984336;
Naročilo barve Uporaba poteze besedila ne prinese vedno pričakovanega rezultata, zlasti pri tanjših črkah in debelejših potezah, ker brskalnik privzeto nariše črto čez polnilo. Na žalost mi CSS še vedno ne dovoljuje prilagajanja postavitve črte, kot to pogosto počnem v Sketchu. Vendar pa ima lastnost paint-order vrednosti, ki mi omogočajo, da postavim potezo za polnilo in ne pred njega.
paint-order: stroke najprej pobarva potezo, nato polnilo, medtem ko paint-order: fill naredi nasprotno: barva: #fbb999; barvni red: polnilo; senca besedila: 3px 5px 1px #5160b1; barva poteze besedila:#984336; širina poteze besedila: 3 px;
Učinkovita poteza ohranja črke čitljive, dodaja težo in – v kombinaciji s sencami in vrstnim redom barvanja – daje ravnim besedilom resnično prisotnost. Ozadja v besedilu Številne naslovne kartice risank presegajo ravno barvo z dodajanjem teksture, prelivov ali ilustriranih podrobnosti črkam. Včasih je to tekstura, drugič je lahko preliv s subtilnim tonskim premikom. V spletu lahko ta učinek poustvarim tako, da uporabim sliko ozadja ali preliv za besedilom in ga nato obrežem v obliki črk. To temelji na dveh lastnostih, ki delujeta skupaj: background-clip: text in text-fill-color: transparent.
Najprej uporabim ozadje za besedilom. To je lahko bitna ali vektorska slika ali gradient CSS. Za ta primer iz epizode Quick Draw McGraw »Baba Bait« naslovno besedilo vključuje subtilen preliv od vrha do dna od temnega do svetlega: ozadje: linearni gradient (0deg, #667b6a, #1d271a);
Nato to ozadje pripnem na glife in naredim besedilo prosojno, tako da se ozadje vidi skozi: -webkit-background-clip: besedilo; -webkit-text-fill-color: prozoren;
Samo s tema dvema vrsticama ozadje ni več naslikano za besedilom; namesto tega je naslikan v njem. Ta tehnika deluje še posebej dobro v kombinaciji s potezami in sencami. Pristriženi preliv črkam daje barvo in teksturo, poteza ohranja ostre robove, senca pa jih dvigne iz ozadja. Skupaj poustvarita večplastni videz ročno poslikanih naslovnih kartic z uporabo nič drugega kot malo CSS. Kot vedno natančno preizkusite izrezano besedilo, saj lahko nenavadnosti brskalnika včasih vplivajo na sence in upodabljanje. Razdelitev besedila na posamezne znake Včasih ne želim oblikovati celotne besede ali naslova. Želim oblikovati posamezne črke — potisniti znak na svoje mesto, dati enemu glifu dodatno težo ali animirati nekaj črk neodvisno. V navadnem HTML-ju in CSS-ju obstaja samo en zanesljiv način za to: zaviti vsak znak v svoj lasten element razpona. To bi lahko naredil ročno, vendar bi bilo to krhko, težko za vzdrževanje in bi hitro razpadlo, ko se kopija spremeni. Namesto tega, ko potrebujem nadzor po črkah, uporabim knjižnico za razdelitev besedila, kot je splt.js (čeprav so na voljo tudi druge rešitve). To vzame besedilno vozlišče in samodejno zavije besede ali znake, kar mi daje dodatne kljuke za animacijo in stil, ne da bi pokvaril svoje oznake. To je pristop, ki ohranja moj HTML berljiv in semantičen, hkrati pa mi daje natančen nadzor, ki ga potrebujem za poustvaritev neenakomerne, značilne tipografije, ki jo vidite na naslovnih karticah klasičnih risank. Vendar pa ta pristop prihaja zopozorila glede dostopnosti, saj večina bralnikov zaslona bere besedilna vozlišča po vrstnem redu. Torej to:
Hum Sweet Hum
... se bere, kot bi pričakovali: Hum Sladki Hum
Ampak tole:
H u m
... se lahko interpretira različno, odvisno od brskalnika in bralnika zaslona. Nekateri bodo povezali črke in pravilno prebrali besede. Drugi se lahko ustavijo med črkami, kar bi v najslabšem primeru lahko zvenelo kot: »H…« »U…« »M…«
Na žalost nekatere rešitve za razdeljevanje ne zagotavljajo vedno dostopnih rezultatov, zato sem napisal svoj razdelilnik besedila, splinter.js, ki je trenutno v različici beta. Preoblikovanje posameznih črk Da aktiviram svoj Toon Text Splitter, dodam data- atribut elementu, ki ga želim razdeliti:
Hum Sweet Hum
Najprej moj skript vsako besedo loči na posamezne črke in jih ovije v element razpona z uporabljenimi atributi class in ARIA:
Skript nato prevzame začetno vsebino razdeljenega elementa in jo doda kot atribut aria za pomoč pri ohranjanju dostopnosti:
Z uporabljenimi atributi razreda lahko oblikujem posamezne znake po lastni izbiri.
Na primer, za »Hum Sweet Hum« želim ponoviti, kako se njegove črke odmikajo od osnovne črte. Po uporabi mojega razdelilnika besedila Toon sem uporabil štiri različne vrednosti prevajanja z več izbirniki :nth-child, da sem ustvaril napol naključen videz: /* 4., 8., 12. ... */ .toon-char:nth-child(4n) { translate: 0 -8px; } /* 1., 5., 9. ... */ .toon-char:nth-child(4n+1) { prevedi: 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; }
Toda translate je le ena lastnost, ki jo lahko uporabim za preoblikovanje svojega toon besedila.
Te posamezne znake bi lahko tudi zavrtel za še bolj kaotičen videz: /* 4., 8., 12. ... */ .toon-line .toon-char:nth-child(4n) { zasukaj: -4deg; } /* 1., 5., 9. ... */ .toon-char:nth-child(4n+1) { zasukaj: -8deg; } /* 2., 6., 10. ... */ .toon-char:nth-child(4n+2) { zasukaj: 4deg; } /* 3., 7., 11. ... */ .toon-char:nth-child(4n+3) { zasukaj: 8deg; }
Toda translate je le ena lastnost, ki jo lahko uporabim za preoblikovanje svojega toon besedila. Te posamezne znake bi lahko tudi zavrtel za še bolj kaotičen videz: /* 4., 8., 12. ... */ .toon-line .toon-char:nth-child(4n) { vrtenje: -4deg; }
/* 1., 5., 9. ... */ .toon-char:nth-child(4n+1) { vrtenje: -8deg; }
/* 2., 6., 10. ... */ .toon-char:nth-child(4n+2) { vrtenje: 4deg; }
/* 3., 7., 11. ... */ .toon-char:nth-child(4n+3) { vrtenje: 8deg; }
In seveda bi lahko dodal animacije za premikanje teh likov in oživitev mojih naslovov besedilnega sloga toon. Najprej sem ustvaril animacijo ključnih sličic, ki vrti znake:
@keyframes jiggle { 0%, 100% { transform: rotate(var(--base-rotate, 0deg)); } 25% { transform: rotate(calc(var(--base-rotate, 0deg) + 3deg)); } 50% { transformacija: zasukaj(calc(var(--base-rotate, 0deg) - 2deg)); } 75% { transform: rotate(calc(var(--base-rotate, 0deg) + 1deg)); } }
Preden ga uporabite za elemente razpona, ki jih je ustvaril moj Toon Text Splitter: .toon-char { animacija: jiggle 3s infinite ease-in-out; transform-origin: center spodaj; }
In končno, nastavitev količine vrtenja in zakasnitve, preden se vsak znak začne majati: .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; }
En okvir za vtis Umetniki naslovov risank so imeli en okvir, da so naredili vtis, njihova tipografija pa je bila enako pomembna kot umetniško delo, ki so ga naslikali. Enako je na spletu. Dobro oblikovana glava ali junakobmočje potrebuje jasnost, značaj in samozavest - ne le zbledele slike ozadja v polni širini. Z nekaj skrbno izbranimi lastnostmi CSS – sencami, potezami, odrezanimi ozadji in nekaj zadržane animacije – lahko ponovno ustvarimo isti učinek. Všeč mi je toon besedilo, ne zato, ker sem nostalgičen, ampak zato, ker je njegovo oblikovanje namerno. Odločite se premišljeno in dovolite, da tipografija malega besedila doda piko na i vašim dizajnom.
