Eftir að hafa klárað verkefni sem krafðist þess að ég lærði allt sem ég gat um CSS og SVG hreyfimyndir, byrjaði ég að skrifa þessa seríu um Smashing Animations og "How Classic Cartoons Inspire Modern CSS." Til að ljúka þessu ári vil ég sýna þér hvernig á að nota nútíma CSS til að búa til þann þátt sem gerir Toon Titles svo áhrifaríka: leturfræði þeirra. Titill Listaverkshönnun Á hinu þögla tímum 1920 og snemma á 30. áratugnum skapaði leturfræði titilspjalds kvikmyndar stemningu, setti svipinn og minnti áhorfendur á hvers konar kvikmynd þeir borguðu fyrir að sjá.
Titilspjöld teiknimynda voru líka vörumerki, stemmning og sviðsmynd, allt saman í eitt. Á fyrstu árum, þegar stórar vinnustofur voru stærri, voru þessi titilspjöld oft lýsandi og máluð.
En þegar sjónvarpið stækkaði á fimmta áratugnum lækkuðu fjárveitingar og spil hönnuð af listamönnum eins og Lawrence „Art“ Goble tóku upp nýtt myndmál, varð myndrænnara, stílfærðari og minna flókinn. Athugið: Lawrence „Art“ Goble er ein af hetjum bandarískrar teiknimyndagerðar á miðri öld sem oft er gleymt. Hann starfaði fyrst og fremst fyrir Hönnu-Barberu á áhrifamestu árum hennar á fimmta og sjöunda áratugnum. Goble var ekki teiknari. Hlutverk hans var að skapa andrúmsloft, svo hann hannaði umhverfi fyrir The Flintstones, Huckleberry Hound, Quick Draw McGraw og Yogi Bear, sem og upphafstitilspjöldin sem settu tóninn. Titilspjöld hans, með málverkum með lógói lagt yfir, hjálpuðu til við að skilgreina helgimynda útlit Hönnu-Barberu. Listaverk Goble fyrir persónur eins og Quick Draw McGraw og Yogi Bear voru áhrifaríkar á smærri sjónvarpsskjám. Í stað þess að endurskapa kyrrmynd úr teiknimyndinni einbeitti hann sér að því að kynna eina, sterka hugmynd - oft í skuggamynd - sem fanga kjarna hennar. Í „The Buzzin’ Bear“ suðaði Yogi hjá í þyrlu. Hann skoppar í burtu, með myndarkörfuna í hendinni, í „Bear on a Picnic“ og fyrir „Prize Fight Fright“ setur Yogi titiltextann í ramma.
Með litla sem enga hreyfingu til að treysta á, urðu stakir rammar Goble að skapa stemningu, setja sviðsmyndina og lýsa sögu. Þeir gerðu þetta með því að nota flata liti, grafísk form og leturfræði sem var oft samþætt í listaverkið.
Sem hönnuðir sem vinna á vefnum geta sýningartitlar kennt okkur margt um hvernig á að koma persónuleika vörumerkis á framfæri, skapa fyrstu sýn og setja væntingar um upplifun einhvers af því að nota vöru eða vefsíðu. Við getum lært af aðferðum listamannanna til að búa til áhrifaríka borða, áfangasíðuhausa og jafnvel gamaldags skvettaskjái. Toon Titill Typography Titilspjöld teiknimynda sýna hvernig sameining gerð og myndefni skilar þeim höggi sem haus eða hetja þarfnast. Með handfylli af textaskugga, textaslagi og umbreytingarbragðum gerir nútíma CSS þér kleift að nýta sömu orkuna.
The Toon Text Title Generator Þegar ég var að skrifa þessa grein áttaði ég mig á því að það væri gagnlegt að hafa tól til að búa til texta í stíl eins og teiknimyndatitlana sem ég elska svo mikið. Svo ég bjó til einn. My Toon Text Title Generator gerir þér kleift að gera tilraunir með liti, strokur og marga textaskugga. Þú getur stillt málningarröð, notað bókstafabil, forskoðað textann þinn í úrvali af leturgerðum og afritað síðan myndaða CSS beint á klemmuspjaldið þitt til að nota í verkefni. Toon Titill CSS Þú getur einfaldlega copy-paste CSS sem Toon Text Title Generator gefur þér. En við skulum skoða nánar hvað það gerir. Textaskuggi Horfðu á týpuna í þessum titli úr þætti Augie Doggie „Yuk-Yuk Duck,“ með fölgulum stöfum og dökkum, hörðum, offsetum skugga sem lyftir henni af bakgrunninum og skapar blekkingu um dýpt.
Þú veist líklega nú þegar að textaskuggi tekur við fjórum gildum: (1) lárétt og (2) lóðrétt frávik, (3) óskýrleika og (4) lit sem getur verið heill eða hálfgegnsær. Þessi offset gildi geta verið jákvæð eða neikvæð, svo ég get endurtekið „Yuk-Yuk Duck“ með því að nota harðan skugga sem er dreginn niður og til hægri: litur: #f7f76d; textaskuggi: 5px 5px 0 #1e1904;
Á hinn bóginn hefur þessi „Pint Giant“ titill aðra tilfinningu með neikvæðum hálfmjúkum skugga sínum: litur: #c2a872; texta-skuggi: -7px 5px 0 #b100e, 0 -5px 10px #546c6f;
Til að bæta við aukinni dýpt og búa til áhugaverðari áhrif get ég lagað marga skugga. Fyrir „Let's Duck Out“ sameina ég fjóra skugga: sá fyrsti solid skuggi með neikvæðri láréttri offsetu til að lyfta textanum af bakgrunninum, fylgt eftir af smám saman mýkri skugga til að búa til óskýrleika í kringum hann: litur: #6F4D80; texta-skuggi: -5px5px 0 #260e1e, /* Skuggi 1 */ 0 0 15px #e9ce96, /* Skuggi 2 */ 0 0 30px #e9ce96, /* Shadow 3 */ 0 0 30px #e9ce96; /* Skuggi 4 */
Þessir skuggar sýna að notkun textaskugga snýst ekki bara um að búa til lýsingaráhrif, þar sem þeir geta líka verið skrautlegir og aukið persónuleika. Texti Stroke Mörg teiknimyndatitilspjöld eru með stöfum með feitletruðum útlínum sem gerir það að verkum að þau skera sig úr bakgrunninum. Ég get endurskapað þessi áhrif með því að nota text-stroke. Í langan tíma var þessi eign aðeins fáanleg með -webkit- forskeytinu, en það þýðir líka að það er nú stutt í nútíma vöfrum.
text-stroke er stytting á tveimur eiginleikum. Sá fyrsti, texti-strokur-breidd, dregur útlínur um einstaka stafi, en sá síðari, text-stroke-litur, stjórnar lit hans. Fyrir „Whatever Goes Pup,“ bætti ég 4px bláu striki við gula textann: litur: #eff0cd; -webkit-text-stroke: 4px #7890b5; textaslag: 4px #7890b5;
Strik geta verið sérstaklega gagnleg þegar þau eru sameinuð með skugga, þannig að fyrir „Vaxandi, vaxa, horfið,“ bætti ég þunnu 3px höggi við varla óskýran 1px skugga til að búa til þessa þrívíðu textaáhrif: litur: #fbb999; textaskuggi: 3px 5px 1px #5160b1; -webkit-text-stroke: 3px #984336; textaslag: 3px # 984336;
Málningarpöntun Notkun textastroka gefur ekki alltaf tilætluðum árangri, sérstaklega með þynnri bókstöfum og þykkari strokum, því sjálfgefið er að vafrinn dregur strik yfir fyllinguna. Því miður leyfir CSS mér enn ekki að stilla höggstaðsetningu eins og ég geri oft í Sketch. Hins vegar hefur paint-order eignin gildi sem gera mér kleift að setja strikið fyrir aftan, frekar en fyrir framan, fyllinguna.
paint-order: stroke málar slaginn fyrst, síðan fyllinguna, en paint-order: fill gerir hið gagnstæða: litur: #fbb999; málningarröð: fylla; textaskuggi: 3px 5px 1px #5160b1; text-stroke-color: #984336; texta-stroka-breidd: 3px;
Árangursríkt högg heldur bókstöfum læsilegum, eykur þyngd og - þegar það er blandað saman við skugga og málningarröð - gefur flatan texta raunverulegan nærveru. Bakgrunnur inni í texta Mörg teiknimyndatitilkort fara út fyrir flatan lit með því að bæta áferð, halla eða myndskreytt smáatriði við letrið. Stundum er þetta áferð, stundum gæti það verið halli með fíngerðri tónbreytingu. Á vefnum get ég endurskapað þessi áhrif með því að nota bakgrunnsmynd eða halla fyrir aftan textann og klippa hann síðan í lögun bókstafanna. Þetta byggir á tveimur eiginleikum sem vinna saman: bakgrunnsbút: texti og textafyllingarlitur: gagnsæ.
Fyrst set ég bakgrunn á bak við textann. Þetta getur verið bitamynd eða vektormynd eða CSS halli. Fyrir þetta dæmi úr Quick Draw McGraw þættinum „Baba Bait,“ inniheldur titiltextinn lúmskur halli að ofan og neðan frá dökku til ljóss: bakgrunnur: linear-gradient(0deg, #667b6a, #1d271a);
Næst klippi ég þann bakgrunn við teiknana og geri textann gagnsæjan svo bakgrunnurinn sé í gegn: -webkit-bakgrunnsbút: texti; -webkit-textafyllingarlitur: gagnsæ;
Með aðeins þessum tveimur línum er bakgrunnurinn ekki lengur málaður á bak við textann; í staðinn er það málað innan í því. Þessi tækni virkar sérstaklega vel þegar hún er sameinuð höggum og skuggum. Úrklipptur halli gefur letrinu lit og áferð, strokur halda brúnum þess skörpum og skuggi lyftir honum frá bakgrunninum. Saman endurskapa þeir lagskipt útlit handmálaðra titilkorta með því að nota ekkert annað en smá CSS. Eins og alltaf skaltu prófa klipptan texta vandlega, þar sem einkenni vafra geta stundum haft áhrif á skugga og flutning. Að skipta texta niður í einstaka stafi Stundum vil ég ekki stíla heilt orð eða fyrirsögn. Ég vil stilla einstaka stafi - til að ýta persónu á sinn stað, gefa einum táknmynd aukaþyngd eða lífga nokkra stafi sjálfstætt. Í venjulegu HTML og CSS er aðeins ein áreiðanleg leið til að gera það: vefja hvern staf inn í sinn eigin span þátt. Ég gæti gert það handvirkt, en það væri viðkvæmt, erfitt að viðhalda því og myndi fljótt falla í sundur þegar afrit breytist. Í staðinn, þegar ég þarf stafstýringu, nota ég textaskiptingasafn eins og splt.js (þó að aðrar lausnir séu í boði). Þetta tekur textahnút og vefur sjálfkrafa inn orð eða stafi, sem gefur mér auka króka til að hreyfa og stíla án þess að klúðra merkingunni minni. Þetta er nálgun sem heldur HTML-inu mínu læsilegu og merkingarfræðilegu, á sama tíma og ég veitir mér þá fíngerðu stjórn sem ég þarf til að endurskapa ójöfnu, karakterríku leturgerðina sem þú sérð á klassískum teiknimyndatitilspjöldum. Hins vegar fylgir þessari nálgunaðgengisfyrirvarar, þar sem flestir skjálesarar lesa textahnúta í röð. Svo þetta:
Hum Sweet hum
… les eins og við er að búast: Hum Sweet Hum
En þetta:
H u m
…má túlka mismunandi eftir vafra og skjálesara. Sumir munu tengja stafina saman og lesa orðin rétt. Aðrir gætu gert hlé á milli stafa, sem í versta falli gæti hljómað eins og: "H..." "U..." "M..."
Því miður skila sumar skiptingarlausnir ekki alltaf aðgengilegri niðurstöðu, svo ég hef skrifað minn eigin textaskiptingu, splinter.js, sem er núna í beta. Umbreyta einstökum bókstöfum Til að virkja Toon textaskiptinguna mína bæti ég gagnaeiginleika við þáttinn sem ég vil skipta:
Hum Sweet Hum
Í fyrsta lagi aðskilur handritið mitt hvert orð í einstaka stafi og vefur þeim inn í span-einingu með flokki og ARIA eiginleikum:
Handritið tekur síðan upphaflega innihald klofna þáttarins og bætir því við sem aríueiginleika til að viðhalda aðgengi:
Með þessum flokkareigindum notaðir get ég síðan stílað einstaka stafi eins og ég kýs.
Til dæmis, fyrir „Hum Sweet Hum,“ vil ég endurtaka hvernig stafirnir í því færast frá grunnlínunni. Eftir að hafa notað Toon textaskiptarann minn notaði ég fjögur mismunandi þýðingargildi með því að nota nokkra :nth-child veljara til að búa til hálf-handahófskennt útlit: /* 4., 8., 12.... */ .toon-char:nth-child(4n) { þýða: 0 -8px; } /* 1., 5., 9.... */ .toon-char:nth-child(4n+1) { þýða: 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; }
En translate er aðeins ein eiginleiki sem ég get notað til að umbreyta tóntextanum mínum.
Ég gæti líka snúið þessum stökum persónum fyrir enn óskipulegri útlit: /* 4., 8., 12.... */ .toon-line .toon-char:nth-child(4n) { snúa: -4deg; } /* 1., 5., 9.... */ .toon-char:nth-child(4n+1) { snúningur: -8deg; } /* 2., 6., 10.... */ .toon-char:nth-child(4n+2) { snúningur: 4deg; } /* 3., 7., 11.... */ .toon-char:nth-child(4n+3) { snúningur: 8deg; }
En translate er aðeins ein eiginleiki sem ég get notað til að umbreyta tóntextanum mínum. Ég gæti líka snúið þessum stökum persónum fyrir enn óskipulegri útlit: /* 4., 8., 12.... */ .toon-line .toon-char:nth-child(4n) { snúa: -4°; }
/* 1., 5., 9.... */ .toon-char:nth-child(4n+1) { snúa: -8°; }
/* 2., 6., 10.... */ .toon-char:nth-child(4n+2) { snúa: 4°; }
/* 3., 7., 11.... */ .toon-char:nth-child(4n+3) { snúa: 8°; }
Og auðvitað gæti ég bætt við hreyfimyndum til að kippa þessum persónum við og lífga upp á textastíltitlana mína. Fyrst bjó ég til keyframe hreyfimynd sem snýr persónunum:
@keyframes jiggle { 0%, 100% { transform: rotate(var(--base-rotate, 0deg)); } 25% { transform: rotate(calc(var(--base-rotate, 0deg) + 3deg)); } 50% { transform: rotate(calc(var(--base-rotate, 0deg) - 2deg)); } 75% { transform: rotate(calc(var(--base-rotate, 0deg) + 1deg)); } }
Áður en það er notað á span þættina sem eru búnir til með Toon Text Splitter mínum: .toon-char { hreyfimynd: jiggle 3s óendanlega vellíðan inn-út; umbreyta-uppruni: miðju botn; }
Og að lokum, stilltu magn snúnings og seinkun áður en hver persóna byrjar að sveifla: .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; }
Einn rammi til að gera áhrif Listamenn með teiknimyndatitila höfðu einn ramma til að setja svip á og leturfræði þeirra var jafn mikilvæg og listaverkið sem þeir máluðu. Sama er uppi á teningnum á vefnum. Vel hannaður haus eða hetjasvæði þarf skýrleika, karakter og sjálfstraust - ekki bara dofna bakgrunnsmynd í fullri breidd. Með nokkrum vandlega völdum CSS-eiginleikum - skuggum, höggum, klipptum bakgrunni og aðhaldssamri hreyfimynd - getum við endurskapað sömu áhrifin. Ég elska tóntexta ekki vegna þess að ég er nostalgískur, heldur vegna þess að hönnun hans er viljandi. Taktu vísvitandi ákvarðanir og láttu smá texta leturfræði bæta við hönnun þinni.
