Baigęs projektą, kurio metu turėjau išmokti viską, ką galiu apie CSS ir SVG animacijas, pradėjau rašyti šią seriją apie „Smashing Animations“ ir „Kaip klasikiniai animaciniai filmai įkvepia šiuolaikinį CSS“. Šių metų pabaigoje noriu parodyti, kaip naudoti šiuolaikinį CSS, kad būtų sukurtas elementas, dėl kurio „Toon Titles“ yra toks įspūdingas: jų tipografija. Pavadinimas Meno kūrinių dizainas Tyliuoju XX amžiaus trečiojo dešimtmečio ir 30-ojo dešimtmečio pradžioje filmo titulinės kortelės tipografija sukūrė nuotaiką, sukūrė sceną ir priminė žiūrovams, kokio tipo filmą jie mokėjo pamatyti.
Animacinių filmų pavadinimų kortelės taip pat buvo prekės ženklas, nuotaika ir scenos nustatymas, viskas sujungta į vieną. Pirmaisiais metais, kai pagrindinių studijų biudžetai buvo didesni, šios titulinės kortelės dažnai buvo iliustratyvios ir vaizdingos.
Tačiau kai šeštajame dešimtmetyje klestėjo televizija, biudžetai sumažėjo, o menininkų, tokių kaip Lawrence'as „Art“ Goble'as, sukurtos kortelės perėmė naują vaizdo kalbą, tapo grafiškesnė, stilizuota ir mažiau sudėtinga. Pastaba: Lawrence'as "Art" Goble yra vienas iš dažnai nepastebimų amžiaus vidurio Amerikos animacijos herojų. Jis daugiausia dirbo Hanna-Barbera įtakingiausiais šeštojo ir šeštojo dešimtmečio metais. Goble nebuvo personažų animatorius. Jo vaidmuo buvo sukurti atmosferą, todėl jis sukūrė aplinką filmams „The Flintstones“, „Huckleberry Hound“, „Quick Draw McGraw“ ir „Yogi Bear“, taip pat įžangines titulo korteles, kurios nustato toną. Jo titulinės kortelės, kuriose pavaizduoti paveikslai su uždengtu logotipu, padėjo apibūdinti ikonišką Hannos-Barberos išvaizdą. Goble meno kūriniai tokiems personažams kaip Quick Draw McGraw ir Yogi Bear buvo veiksmingi mažesniuose televizoriaus ekranuose. Užuot atkartojęs animacinio filmo kadrą, jis sutelkė dėmesį į vienos, stiprios idėjos – dažnai silueto – pateikimą, atspindinčią jos esmę. Filme „The Buzzin' Bear“ Jogas zuja sraigtasparniu. Jis atšoka, laikydamas pica-nic krepšį rankoje, filme „Meška piknike“, o už „Prizo kovos išgąstį“ Jogas įdeda pavadinimo tekstą.
Pavieniai Goble kadrai turėjo sukurti nuotaiką, sukurti sceną ir apibūdinti istoriją, kai buvo mažai judesio arba jo nebuvo. Jie tai padarė naudodami plokščias spalvas, grafines formas ir tipografiją, kuri dažnai buvo integruota į meno kūrinį.
Kaip dizaineriai, dirbantys žiniatinklyje, įrankių pavadinimai gali daug išmokyti, kaip perteikti prekės ženklo asmenybę, padaryti pirmąjį įspūdį ir nustatyti lūkesčius, susijusius su kieno nors patirtimi naudojant produktą ar svetainę. Galime pasimokyti iš menininkų technikos, kurdami efektyvias reklamjuostes, nukreipimo puslapių antraštes ir net gerus senamadiškus paleidimo ekranus. Toon pavadinimo tipografija Animacinių filmų pavadinimo kortelės parodo, kaip tipo sujungimas su vaizdais suteikia antraštei ar herojui reikalingo smūgio. Naudodami keletą teksto šešėlio, teksto brūkšnelių ir transformavimo gudrybių, šiuolaikinė CSS leidžia išnaudoti tą pačią energiją.
Toon teksto pavadinimo generatorius Rašydamas šį straipsnį supratau, kad būtų naudinga turėti įrankį tekstui sukurti, panašiai kaip man labai patinkantys animacinių filmų pavadinimai. Taigi aš padariau vieną. „My Toon Text Title Generator“ leidžia eksperimentuoti su spalvomis, potėpiais ir keliais teksto šešėliais. Galite koreguoti dažymo tvarką, taikyti tarpą tarp raidžių, peržiūrėti tekstą pasirinktais šriftų pavyzdžiais ir nukopijuoti sugeneruotą CSS tiesiai į mainų sritį, kad galėtumėte naudoti projekte. Toon Title CSS Galite tiesiog nukopijuoti ir įklijuoti CSS, kurį jums suteikia „Toon Text Title Generator“. Bet pažiūrėkime atidžiau, ką tai daro. Teksto šešėlis Pažvelkite į šio pavadinimo tipą iš Augie Doggie serijos „Yuk-Yuk Duck“ su šviesiai geltonomis raidėmis ir tamsiu, kietu, poslinkiu šešėliu, kuris pakelia jį nuo fono ir sukuria gylio iliuziją.
Tikriausiai jau žinote, kad teksto šešėlis priima keturias reikšmes: (1) horizontalius ir (2) vertikalius poslinkius, (3) neryškumą ir (4) spalvą, kuri gali būti vientisa arba pusiau permatoma. Šios poslinkio reikšmės gali būti teigiamos arba neigiamos, todėl galiu atkartoti „Yuk-Yuk Duck“ naudodamas kietą šešėlį, patrauktą žemyn ir į dešinę: spalva: #f7f76d; text-shadow: 5px 5px 0 #1e1904;
Kita vertus, šis „Pint Giant“ pavadinimas turi kitokį jausmą dėl savo neigiamo pusiau minkšto šešėlio: spalva: #c2a872; teksto šešėlis: -7 pikseliai 5 pikseliai 0 #b100e, 0 -5px 10px #546c6f;
Norėdami pridėti papildomo gylio ir sukurti įdomesnių efektų, galiu sluoksniuoti kelis šešėlius. „Let’s Duck Out“ sujungiu keturis šešėlius: pirmąjį vientisą šešėlį su neigiamu horizontaliu poslinkiu, kad tekstas pakeltų nuo fono, po to palaipsniui švelnesni šešėliai, kad aplink jį būtų sukurtas neryškumas: spalva: #6F4D80; teksto šešėlis: -5 pikseliai5 piks. 0 #260e1e, /* 1 šešėlis */ 0 0 15px #e9ce96, /* Shadow 2 */ 0 0 30px #e9ce96, /* Shadow 3 */ 0 0 30px #e9ce96; /* 4 šešėlis */
Šie šešėliai rodo, kad teksto šešėlių naudojimas reiškia ne tik apšvietimo efektų kūrimą, nes jie taip pat gali būti dekoratyvūs ir suteikti asmeniškumo. Teksto potėpis Daugelyje animacinių filmų pavadinimo kortelių yra paryškintos raidės, todėl jos išsiskiria iš fono. Šį efektą galiu atkurti naudodamas teksto potėpius. Ilgą laiką ši nuosavybė buvo pasiekiama tik naudojant -webkit- priešdėlį, bet tai taip pat reiškia, kad dabar ji palaikoma visose šiuolaikinėse naršyklėse.
text-stroke yra dviejų savybių trumpinys. Pirmasis, teksto potėpio plotis, nubrėžia kontūrą aplink atskiras raides, o antrasis, teksto potėpio spalva, valdo jo spalvą. „Whatever Goes Pup“ prie geltono teksto pridėjau 4 pikselių mėlyną brūkšnį: spalva: #eff0cd; -Webkit-text-stroke: 4px #7890b5; teksto brūkšnys: 4px #7890b5;
Brūkštelėjimai gali būti ypač naudingi, kai jie derinami su šešėliais, todėl „Auga, auga, išnyksta“ prie vos neryškaus 1 pikselių šešėlio pridėjau ploną 3 pikselių brūkšnį, kad sukurčiau šį trimačio teksto efektą: spalva: #fbb999; tekstas-šešėlis: 3px 5px 1px #5160b1; -Webkit-text-stroke: 3px #984336; teksto brūkšnys: 3px #984336;
Dažų užsakymas Naudojant teksto brūkšnį, ne visada gaunamas laukiamas rezultatas, ypač naudojant plonesnes raides ir storesnius brūkšnius, nes pagal numatytuosius nustatymus naršyklė perbraukia užpildą. Deja, CSS vis dar neleidžia man pakoreguoti potėpių išdėstymo, kaip dažnai darau „Sketch“. Tačiau dažų užsakymo ypatybė turi vertes, leidžiančias potėpius dėti už užpildo, o ne prieš jį.
Dažų tvarka: potėpis pirmiausia nudažo brūkšnį, tada užpildo, o dažų tvarka: užpildymas veikia priešingai: spalva: #fbb999; dažų užsakymas: užpildas; tekstas-šešėlis: 3px 5px 1px #5160b1; text-stroke-color:#984336; teksto potėpio plotis: 3 pikseliai;
Veiksmingas potėpis leidžia skaityti raides, suteikia daugiau svorio ir, derinant su šešėliais bei dažymo tvarka, suteikia plokščiam tekstui tikroviškumo. Fonai teksto viduje Daugelis animacinių filmų pavadinimo kortelių yra ne tik plokščios spalvos, bet ir pridedant raidžių tekstūrą, gradientus ar iliustruotas detales. Kartais tai yra tekstūra, kartais tai gali būti gradientas su subtiliu tonų poslinkiu. Žiniatinklyje galiu atkurti šį efektą naudodamas fono paveikslėlį arba gradientą už teksto ir apkarpydamas jį iki raidžių formos. Tai priklauso nuo dviejų savybių, veikiančių kartu: fono klipas: tekstas ir teksto užpildymo spalva: skaidrus.
Pirmiausia už teksto pritaikau foną. Tai gali būti bitmap arba vektorinis vaizdas arba CSS gradientas. Šiame pavyzdyje iš Quick Draw McGraw epizodo „Baba Bait“ pavadinimo tekste yra subtilus nuolydis iš viršaus į apačią nuo tamsios iki šviesios: fonas: linear-gradient(0deg, #667b6a, #1d271a);
Tada nukirpsiu tą foną prie glifų ir padarysiu tekstą skaidrų, kad fonas būtų matomas: -Webkit-background-clip: tekstas; -Webkit-text-fill-color: skaidrus;
Tik naudojant šias dvi eilutes, fonas nebėra nudažytas už teksto; vietoj to jis nudažytas joje. Ši technika ypač gerai veikia, kai ji derinama su potėpiais ir šešėliais. Nukirptas gradientas suteikia raidėms spalvą ir tekstūrą, potėpis išlaiko aštrius kraštus, o šešėlis pakelia juos nuo fono. Kartu jie atkuria daugiasluoksnę rankomis pieštų titulinių kortelių išvaizdą, naudodami nedidelį CSS. Kaip visada, atidžiai išbandykite nukirptą tekstą, nes naršyklės keistenybės kartais gali turėti įtakos šešėliams ir atvaizdavimui. Teksto padalijimas į atskirus simbolius Kartais nenoriu stilizuoti viso žodžio ar antraštės. Noriu pritaikyti atskirų raidžių stilių – įstumti simbolį į vietą, suteikti vienam glifui papildomo svorio arba animuoti kelias raides atskirai. Paprastame HTML ir CSS yra tik vienas patikimas būdas tai padaryti: kiekvieną simbolį įterpti į atskirą span elementą. Galėčiau tai padaryti rankiniu būdu, bet tai būtų trapi, sunkiai prižiūrima ir greitai subyrėtų pakeitus kopiją. Vietoj to, kai reikia valdyti raidę, naudoju teksto skaidymo biblioteką, pvz., splt.js (nors yra ir kitų sprendimų). Tai paima teksto mazgą ir automatiškai apvynioja žodžius ar simbolius, suteikdama papildomų kabliukų, kad galėčiau animuoti ir stilizuoti nepažeidžiant žymėjimo. Tai metodas, leidžiantis mano HTML skaitomą ir semantišką, kartu suteikiant man tikslią valdymą, kurio reikia norint atkurti netolygią, charakteringą tipografiją, kurią matote klasikinių animacinių filmų pavadinimo kortelėse. Tačiau šis požiūris ateinapritaikymo neįgaliesiems įspėjimai, nes dauguma ekrano skaitytuvų teksto mazgus skaito eilės tvarka. Taigi tai:
Hum Sweet Hum
… skaito taip, kaip tikėjotės: Hum Sweet Hum
Bet tai:
H u m
...gali būti interpretuojami skirtingai, atsižvelgiant į naršyklę ir ekrano skaitytuvą. Kai kurie sujungs raides ir teisingai perskaitys žodžius. Kiti gali daryti pauzes tarp raidžių, o tai blogiausiu atveju gali skambėti taip: „H…“ „U...“ „M...“
Deja, kai kurie skaidymo sprendimai neduoda visada pasiekiamo rezultato, todėl parašiau savo teksto skirstytuvą splinter.js, kuris šiuo metu yra beta versijos. Individualių laiškų transformavimas Norėdami suaktyvinti „Toon Text Splitter“, prie elemento, kurį noriu padalinti, pridedu duomenų atributą:
Hum Sweet Hum
Pirma, mano scenarijus išskiria kiekvieną žodį į atskiras raides ir įtraukia juos į span elementą su taikomais klasės ir ARIA atributais:
Tada scenarijus paima pradinį padalinto elemento turinį ir prideda jį kaip arijos atributą, kad padėtų išlaikyti prieinamumą:
Taikydamas tuos klasės atributus galiu pasirinkti atskirų simbolių stilių.
Pavyzdžiui, „Hum Sweet Hum“ noriu pakartoti, kaip raidės pasislenka nuo pradinės linijos. Naudodamas „Toon“ teksto skirstytuvą, pritaikiau keturias skirtingas vertimo reikšmes naudodamas kelis :n-ojo vaiko parinkiklius, kad sukurčiau pusiau atsitiktinę išvaizdą: /* 4, 8, 12... */ .toon-char:nth-child(4n) { versti: 0 -8px; } /* 1, 5, 9... */ .toon-char:nth-child(4n+1) { versti: 0 -4px; } /* 2, 6, 10... */ .toon-char:nth-child(4n+2) { versti: 0 4px; } /* 3, 7, 11... */ .toon-char:nth-child(4n+3) { versti: 0 8px; }
Tačiau vertimas yra tik viena savybė, kurią galiu panaudoti savo tono tekstui pakeisti.
Taip pat galėčiau pasukti tuos atskirus simbolius, kad vaizdas atrodytų dar chaotiškesnis: /* 4, 8, 12... */ .toon-line .toon-char:nth-child(4n) { rotate: -4deg; } /* 1, 5, 9... */ .toon-char:nth-child(4n+1) { pasukti: -8deg; } /* 2, 6, 10... */ .toon-char:nth-child(4n+2) { pasukti: 4 laipsniais; } /* 3, 7, 11... */ .toon-char:nth-child(4n+3) { pasukti: 8 laipsnių; }
Tačiau vertimas yra tik viena savybė, kurią galiu panaudoti savo tono tekstui pakeisti. Taip pat galėčiau pasukti tuos atskirus simbolius, kad vaizdas atrodytų dar chaotiškesnis: /* 4, 8, 12... */ .toon-line .toon-char:nth-child(4n) { pasukti: -4 laipsnių; }
/* 1, 5, 9... */ .toon-char:nth-child(4n+1) { pasukti: -8 laipsnių; }
/* 2, 6, 10... */ .toon-char:nth-child(4n+2) { pasukti: 4 laipsniais; }
/* 3, 7, 11... */ .toon-char:nth-child(4n+3) { pasukti: 8 laipsnių; }
Ir, žinoma, galėčiau pridėti animacijų, kad sujudinčiau tuos veikėjus ir atgaivinčiau savo teksto stiliaus pavadinimus. Pirmiausia sukūriau pagrindinio kadro animaciją, kuri sukasi simbolius:
@keyframes jiggle { 0%, 100% { transform: rotate(var(--base-rotate, 0deg)); } 25% { transformuoti: rotate(calc(var(--base-rotate, 0deg) + 3deg)); } 50% { transformuoti: rotate(calc(var(--base-rotate, 0deg) - 2deg)); } 75% { transformuoti: rotate(calc(var(--base-rotate, 0deg) + 1deg)); } }
Prieš taikydami jį span elementams, sukurtiems mano Toon Text Splitter: .toon-char { animacija: jiggle 3s begalinis lengvas įėjimas-išėjimas; transformacijos kilmė: centrinė apačia; }
Ir galiausiai, nustatykite sukimosi dydį ir delsą, kol kiekvienas simbolis pradeda virpėti: .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) { animacijos delsa: 0,1 s; } .toon-char:nth-child(4n+1) { animacijos delsa: 0,3 s; } .toon-char:nth-child(4n+2) { animacijos delsa: 0,5 s; } .toon-char:nth-child(4n+3) { animacijos delsa: 0,7 s; }
Vienas kadras, kad padarytumėte įspūdį Animacinių filmų menininkai turėjo vieną kadrą, kad padarytų įspūdį, o jų tipografija buvo tokia pat svarbi, kaip ir tapyti meno kūriniai. Tas pats galioja ir žiniatinklyje. Gerai suprojektuota antraštė arba herojussričiai reikia aiškumo, charakterio ir pasitikėjimo – ne tik išblukusio viso pločio fono paveikslėlio. Naudodami keletą kruopščiai parinktų CSS ypatybių – šešėlių, potėpių, nukirptų fonų ir šiek tiek santūrios animacijos – galime atkurti tą patį poveikį. Man patinka ton tekstas ne todėl, kad būnu nostalgiškas, o todėl, kad jo dizainas yra apgalvotas. Sąmoningai rinkitės ir leiskite nedideliam teksto tipografijai suteikti jūsų dizainui ryškumo.
