Pärast projekti lõpetamist, mis nõudis minult kõike CSS-i ja SVG-animatsioonide õppimist, hakkasin kirjutama seda seeriat teemadest Smashing Animations ja "Kuidas klassikalised koomiksid inspireerivad kaasaegset CSS-i". Selle aasta lõpetuseks tahan teile näidata, kuidas kasutada kaasaegset CSS-i, et luua element, mis muudab Toon Titlesi nii mõjukaks: nende tüpograafia. Pealkiri Kunstiteoste kujundus Vaiksel ajastul 1920ndatel ja 30ndate alguses lõi filmi tiitlikaardi tüpograafia meeleolu, lõi stseeni ja tuletas publikule meelde, millist tüüpi filme nad olid maksnud.
Multifilmi tiitlikaardid olid ka kaubamärgid, meeleolu ja stseeni kujundamine, kõik üheks. Algusaastatel, kui suuremate stuudiote eelarved olid suuremad, olid need tiitlikaardid sageli illustreerivad ja maalilised.
Kuid kui televisioon 1950. aastatel õitses, eelarved langesid ja kunstnike, nagu Lawrence “Art” Goble’i disainitud kaardid võtsid kasutusele uue visuaalse keele, muutudes graafilisemaks, stiliseeritumaks ja vähem keerukamaks. Märkus. Lawrence “Art” Goble on üks sajandi keskpaiga Ameerika animatsiooni kangelasi, keda sageli tähelepanuta jäetakse. Peamiselt töötas ta Hanna-Barbera heaks selle kõige mõjukamatel aastatel 1950. ja 1960. aastatel. Goble ei olnud tegelaskuju animaator. Tema roll oli atmosfääri luua, nii et ta kujundas keskkondi The Flintstones'ile, Huckleberry Houndile, Quick Draw McGraw'le ja Yogi Bearile, samuti avasid tooni andvad tiitlikaardid. Tema tiitlikaardid, millel on logoga maalid, aitasid määratleda Hanna-Barbera ikoonilise välimuse. Goble'i kunstiteos sellistele tegelastele nagu Quick Draw McGraw ja Yogi Bear mõjus väiksematel teleriekraanidel. Selle asemel, et reprodutseerida koomiksist kaadrit, keskendus ta ühe tugeva idee esitamisele – sageli siluetis –, mis tabas selle olemust. Filmis „The Buzzin’ Bear“ sumiseb Yogi helikopteriga mööda. Ta põrkab eemale, pildikorv käes, filmis "Karu piknikul" ja "Auhinnavõitluse ehmatuse jaoks" paneb Yogi pealkirja kastidesse.
Kuna Goble'i üksikud kaadrid, millele toetuda oli vähe või üldse mitte, pidid looma meeleolu, looma stseeni ja kirjeldama lugu. Nad tegid seda lamedate värvide, graafiliste kujundite ja tüpograafia abil, mis olid sageli kunstiteostesse integreeritud.
Veebis töötavate disaineritena võivad toonide pealkirjad meile palju õpetada, kuidas edasi anda brändi isikupära, jätta esmamuljet ja seada ootusi kellegi toote või veebisaidi kasutamise kogemusele. Saame õppida kunstnike tehnikatest, et luua tõhusaid bännereid, sihtlehe päiseid ja isegi vanamoodsaid pritsekraane. Toon Pealkirja tüpograafia Multifilmi tiitlikaardid näitavad, kuidas tüübi ja kujutiste ühendamine annab päise või kangelase jaoks vajaliku löögi. Kaasaegne CSS võimaldab teil kasutada sedasama energiat, kasutades käputäie tekstivarju-, tekstitõmbe- ja teisendusnippe.
Toon tekstipealkirja generaator Selle artikli kirjutamise ajal mõistsin, et oleks kasulik omada tööriista teksti loomiseks, mis on kujundatud nagu koomiksite pealkirjad, mida ma nii väga armastan. Nii et ma tegin ühe. Minu Toon Text Pealkiri Generator võimaldab teil katsetada värve, jooni ja mitut tekstivarju. Saate kohandada värvide järjekorda, rakendada tähtede vahesid, vaadata teksti eelvaadet näidisfondide valikus ja seejärel kopeerida loodud CSS-i otse lõikepuhvrisse, et seda projektis kasutada. Toon Pealkiri CSS Saate lihtsalt kopeerida ja kleepida CSS-i, mille Toon Text Title Generator teile pakub. Kuid vaatame lähemalt, mida see teeb. Teksti vari Vaadake selle pealkirja tüüpi Augie Doggie episoodist "Yuk-Yuk Duck", mille kahvatukollased tähed ja tumedad, kõvad, nihked varjud tõstavad selle taustalt ja loovad sügavuse illusiooni.
Tõenäoliselt teate juba, et tekstivarjul on neli väärtust: (1) horisontaalsed ja (2) vertikaalsed nihked, (3) hägusus ja (4) värv, mis võib olla ühtlane või poolläbipaistev. Need nihkeväärtused võivad olla positiivsed või negatiivsed, nii et saan "Yuk-Yuk Ducki" kopeerida, kasutades allapoole ja paremale tõmmatud kõva varju: värv: #f7f76d; tekstivari: 5px 5px 0 #1e1904;
Teisest küljest on sellel "Pint Giant" pealkirjal oma negatiivse poolpehme varjuga teistsugune tunne: värv: #c2a872; tekstivari: -7px 5px 0 #b100e, 0 -5px 10px #546c6f;
Täiendava sügavuse lisamiseks ja huvitavamate efektide loomiseks saan kihistada mitu varju. „Let’s Duck Out” jaoks kombineerin neli varju: esimene on negatiivse horisontaalse nihkega tahke vari, mis tõstab teksti taustalt välja, millele järgneb järk-järgult pehmemad varjud, et luua selle ümber hägune: värv: #6F4D80; tekstivari: -5 pikslit5px 0 #260e1e, /* Shadow 1 */ 0 0 15px #e9ce96, /* Shadow 2 */ 0 0 30px #e9ce96, /* Shadow 3 */ 0 0 30px #e9ce96; /* Shadow 4 */
Need varjud näitavad, et tekstivarju kasutamine ei tähenda ainult valgusefektide loomist, vaid need võivad olla ka dekoratiivsed ja isikupära lisada. Tekst Stroke Paljudel koomiksite tiitlikaartidel on paksu kontuuriga tähed, mis eristavad neid taustast. Ma saan selle efekti uuesti luua tekstijoone abil. Pikka aega oli see atribuut saadaval ainult -webkit- prefiksi kaudu, kuid see tähendab ka seda, et seda toetatakse nüüd kõigis kaasaegsetes brauserites.
text-stroke on kahe omaduse stenogramm. Esimene, teksti joone laius, joonistab kontuuri üksikute tähtede ümber, samas kui teine, tekstijoone värvus, juhib selle värvi. „Whatever Goes Pup” jaoks lisasin kollasele tekstile 4 piksli suuruse sinise joone: värv: #eff0cd; -webkit-text-stroke: 4px #7890b5; tekstikriips: 4px #7890b5;
Löögid võivad olla eriti kasulikud, kui need on kombineeritud varjudega, nii et lisasin vaevu hägusele 1 piksli suurusele varjule õhukese 3 piksli joone, et luua see kolmemõõtmeline tekstiefekt: värv: #fbb999; text-shadow: 3px 5px 1px #5160b1; -webkit-text-stroke: 3px #984336; tekstikriips: 3px #984336;
Värvi tellimine Tekstikriipsu kasutamine ei anna alati oodatud tulemust, eriti peenemate tähtede ja jämedamate joonte puhul, sest vaikimisi tõmbab brauser joone üle täidise. Kahjuks ei võimalda CSS mul ikka veel joonte paigutust kohandada, nagu ma Sketchis sageli teen. Värvijärjestuse atribuudil on aga väärtused, mis võimaldavad mul asetada joone täidise taha, mitte ette.
paint-order: tõmme värvib kõigepealt joone, seejärel täidise, samas kui värvijärjestus: täitmine toimib vastupidiselt: värv: #fbb999; värvitellimus: täitmine; text-shadow: 3px 5px 1px #5160b1; text-stroke-color:#984336; teksti joone laius: 3 pikslit;
Tõhus kriips hoiab tähed loetavana, lisab kaalu ning – kombineerituna varjude ja värvimisjärjekorraga – annab tasasele tekstile tõelise ilme. Taustad teksti sees Paljud koomiksite tiitelkaardid ei piirdu lamedate värvidega, lisades kirjadele tekstuuri, gradiente või illustreeritud detaile. Mõnikord on see tekstuur, teinekord võib see olla gradient peene tooninihkega. Veebis saan selle efekti uuesti luua, kasutades teksti taga taustapilti või gradienti ja seejärel kärpides selle tähtede kuju järgi. See põhineb kahel koos töötaval atribuudil: background-clip: text ja text-fill-color: läbipaistev.
Esiteks rakendan teksti taha tausta. See võib olla bitmap- või vektorkujutis või CSS-i gradient. Selle Quick Draw McGraw episoodi "Baba Bait" näite puhul sisaldab pealkirja tekst peent ülevalt-alt gradienti tumedast heledani: taust: lineaarne gradient(0deg, #667b6a, #1d271a);
Järgmisena lõikan selle tausta glüüfideks ja muudan teksti läbipaistvaks, nii et taust paistab läbi: -webkit-background-clip: tekst; -webkit-text-fill-color: läbipaistev;
Ainult nende kahe reaga ei maalita enam tausta teksti taha; selle asemel on see selle sisse maalitud. See tehnika töötab eriti hästi, kui seda kombineerida löökide ja varjudega. Lõigatud gradient annab kirjale värvi ja tekstuuri, tõmme hoiab selle servad teravana ja vari tõstab selle taustast kõrgemale. Üheskoos loovad nad käsitsi maalitud tiitlikaartide kihilise ilme, kasutades ainult väikest CSS-i. Nagu alati, testige lõigatud teksti hoolikalt, kuna brauseri veidrused võivad mõnikord mõjutada varje ja renderdamist. Teksti jagamine üksikuteks tähemärkideks Mõnikord ei taha ma tervet sõna või pealkirja stiilida. Tahan kujundada üksikuid tähti – tõugata tähemärki paika, anda ühele glüüfile lisaraskust või animeerida paar tähte iseseisvalt. Lihtsas HTML-is ja CSS-is on selleks ainult üks usaldusväärne viis: mähkida iga märk oma span-elemendiga. Ma saaksin seda teha käsitsi, kuid see oleks habras, raskesti hooldatav ja laguneks koopia muutmisel kiiresti laiali. Selle asemel, kui vajan tähepõhist juhtimist, kasutan teksti jagamise teeki, näiteks splt.js (kuigi saadaval on ka teisi lahendusi). See võtab tekstisõlme ja murrab automaatselt sõnad või märgid, andes mulle lisakonksud animeerimiseks ja stiilimiseks ilma märgistust segamini ajamata. See on lähenemine, mis hoiab mu HTML-i loetavana ja semantilisena, pakkudes samas mulle täpset kontrolli, mida vajan ebaühtlase ja iseloomuliku tüpograafia taastamiseks, mida näete klassikalistel koomiksite tiitlikaartidel. See lähenemine tuleb aga kaasajuurdepääsetavuse hoiatused, kuna enamik ekraanilugejaid loeb tekstisõlmi järjekorras. Nii et see:
Hum Sweet Hum
… loeb, nagu ootate: Hum Sweet Hum
Aga see:
H sina m
…saab erinevalt tõlgendada olenevalt brauserist ja ekraanilugejast. Mõned ühendavad tähed ja loevad sõnu õigesti. Teised võivad tähtede vahel pausi teha, mis halvimal juhul võib kõlada järgmiselt: “H…” “U…” “M…”
Kahjuks ei anna mõned jagamislahendused alati juurdepääsetavat tulemust, mistõttu olen kirjutanud oma tekstijagaja splinter.js, mis on praegu beetaversioonis. Üksikute kirjade ümberkujundamine Toon Text Splitteri aktiveerimiseks lisan elemendile, mida tahan poolitada, andmeatribuudi:
Hum Sweet Hum
Esiteks eraldab minu skript iga sõna üksikuteks tähtedeks ja mähib need span-elemendiks, millele on rakendatud klassi ja ARIA atribuudid:
Seejärel võtab skript jagatud elemendi esialgse sisu ja lisab selle ligipääsetavuse säilitamiseks ariaatribuudina:
Kui need klassiatribuudid on rakendatud, saan ma valida üksikute märkide stiili.
Näiteks "Hum Sweet Hum" puhul tahan korrata, kuidas selle tähed lähtejoonest eemale nihkuvad. Pärast oma Toon Text Splitteri kasutamist rakendasin pooljuhusliku välimuse loomiseks neli erinevat tõlkeväärtust, kasutades mitut :n-nda lapse valijat: /* 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; }
Kuid tõlkimine on ainult üks omadus, mida saan kasutada oma tekstiteksti muutmiseks.
Võiksin ka neid üksikuid tegelasi pöörata, et saada veelgi kaootilisem välimus: /* 4., 8., 12.... */ .toon-line .toon-char:nth-child(4n) { rotate: -4deg; } /* 1., 5., 9... */ .toon-char:nth-child(4n+1) { rotate: -8deg; } /* 2., 6., 10.... */ .toon-char:nth-child(4n+2) { pööra: 4 kraadi; } /* 3., 7., 11.... */ .toon-char:nth-child(4n+3) { pööra: 8°; }
Kuid tõlkimine on ainult üks omadus, mida saan kasutada oma tekstiteksti muutmiseks. Võiksin ka neid üksikuid tegelasi pöörata, et saada veelgi kaootilisem välimus: /* 4., 8., 12.... */ .toon-line .toon-char:nth-child(4n) { pööramine: -4 kraadi; }
/* 1., 5., 9... */ .toon-char:nth-child(4n+1) { pööramine: -8 kraadi; }
/* 2., 6., 10.... */ .toon-char:nth-child(4n+2) { pööramine: 4 kraadi; }
/* 3., 7., 11.... */ .toon-char:nth-child(4n+3) { pööramine: 8 kraadi; }
Ja loomulikult võiksin lisada animatsioone, et neid tegelasi vingutada ja oma tekstistiilis pealkirju ellu äratada. Esiteks lõin võtmekaadri animatsiooni, mis pöörab tegelasi:
@keyframes jiggle { 0%, 100% { transform: rotate(var(--base-rotate, 0deg)); } 25% { transform: rotate(calc(var(--base-rotate, 0deg) + 3deg)); } 50% { teisendus: rotate(calc(var(--base-rotate, 0deg) - 2deg)); } 75% { transform: rotate(calc(var(--base-rotate, 0deg) + 1deg)); } }
Enne selle rakendamist minu Toon Text Splitteri loodud ulatuselementidele: .toon-char { animatsioon: jiggle 3s lõpmatu lihtne sisse-välja; transform-origin: keskpõhi; }
Ja lõpuks, määrake pöörlemissagedus ja viivitus, enne kui iga märk hakkab värisema: .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: 4°; }
.toon-char:nth-child(4n) { animatsiooni viivitus: 0,1 s; } .toon-char:nth-child(4n+1) { animatsiooni viivitus: 0,3 s; } .toon-char:nth-child(4n+2) { animatsiooni viivitus: 0,5 s; } .toon-char:nth-child(4n+3) { animatsiooni viivitus: 0,7 s; }
Üks kaader mulje jätmiseks Multifilmi pealkirja kunstnikel oli mulje jätmiseks üks kaader ja nende tüpograafia oli sama oluline kui nende maalitud kunstiteos. Sama kehtib ka veebis. Hästi läbimõeldud päis või kangelaneala vajab selgust, iseloomu ja enesekindlust – mitte lihtsalt pleekinud täislaiuses taustpilti. Mõne hoolikalt valitud CSS-i atribuudiga – varjud, jooned, kärbitud taustad ja vaoshoitud animatsioon – saame sama efekti taasluua. Mulle meeldib toontekst mitte sellepärast, et ma oleksin nostalgiline, vaid sellepärast, et selle kujundus on tahtlik. Tehke kaalutletud valikuid ja laske väikesel tekstitüpograafial oma kujundusele lisada.
