Tar éis dom tionscadal a chríochnú a d’éiligh orm gach rud a d’fhéadfainn a fhoghlaim faoi bheochan CSS agus SVG, thosaigh mé ag scríobh an tsraith seo faoi Smashing Animations agus “How Classic Cartoons Inspire Modern CSS.” Mar fhocal scoir i mbliana, ba mhaith liom a thaispeáint duit conas CSS nua-aimseartha a úsáid chun an ghné sin a chruthú a fhágann go bhfuil tionchar chomh mór sin ag Toon Titles: a gclóghrafaíocht. Teideal Dearadh Saothar Ealaíne I ré chiúin na 1920idí agus na 30idí luatha, chruthaigh clóghrafaíocht chárta teidil scannáin meon, chuir sé an ardán i gcrích, agus chuir sé i gcuimhne don lucht féachana an cineál scannáin a d’íoc siad a fheiceáil.
Bhí cártaí teidil cartún mar bhrandáil, giúmar, agus leagan amach radhairc chomh maith, iad go léir rollta isteach i gceann amháin. Sna blianta tosaigh, nuair a bhí mórbhuiséid stiúideo níos mó, ba mhinic a bhí na cártaí teidil seo léiritheach agus péinteáilte.
Ach nuair a tháinig borradh faoin teilifís sna 1950idí, thit buiséid, agus ghlac cártaí a dhear ealaíontóirí ar nós Lawrence “Ealaín” Goble le fístheanga nua, ag éirí níos grafacha, stílithe agus níos casta. Nóta: Tá Lawrence “Ealaín” Goble ar cheann de na laochra beochana Meiriceánacha lár na haoise nach mbíonn mórán airde orthu go minic. D’oibrigh sé go príomha do Hanna-Barbera le linn na mblianta ba mhó tionchair aige sna 1950idí agus 1960idí. Ní beochantóir carachtair a bhí i Goble. Ba é an ról a bhí aige ná atmaisféar a chruthú, agus mar sin dhear sé timpeallachtaí do The Flintstones, Huckleberry Hound, Quick Draw McGraw, agus Yogi Bear, chomh maith leis na cártaí teidil tosaigh a shocraíonn an ton. Chuidigh a chártaí teidil, ina raibh pictiúir le lógó forleagtha orthu, chun cuma íocónach Hanna-Barbera a shainiú. Bhí saothar ealaíne Goble do charachtair ar nós Quick Draw McGraw agus Yogi Bear éifeachtach ar scáileáin teilifíse níos lú. Seachas íomhá ón gcartún a atáirgeadh, dhírigh sé ar smaoineamh láidir amháin a chur i láthair — go minic i scáthchruth — a ghlac bunús leis. In “The Buzzin’ Bear,” buaileann Yogi leis i héileacaptar. Preabann sé uaidh, ciseán pic-a-nic ar láimh, in “Bear on a Picnic,” agus as a “Prize Fight Fright,” boscaí Yogi an téacs teidil.
Gan mórán gluaiseachta le brath air, bhí ar fhrámaí aonair Goble meon a chruthú, an radharc a shocrú agus cur síos a dhéanamh ar scéal. Rinne siad é seo trí úsáid a bhaint as dathanna cothroma, cruthanna grafacha, agus clóghrafaíocht a bhí comhtháite go minic sa saothar ealaíne.
Mar dhearthóirí a oibríonn ar an ngréasán, is féidir le teidil toon neart a mhúineadh dúinn faoi conas pearsantacht branda a chur in iúl, an chéad tuiscint a dhéanamh, agus ionchais a shocrú maidir le taithí duine éigin ag baint úsáide as táirge nó suíomh Gréasáin. Is féidir linn foghlaim ó theicnící na n-ealaíontóirí chun meirgí éifeachtacha, ceanntásca leathanach tuirlingthe, agus fiú splancscáileán dea-aimseartha a chruthú. Clóghrafaíocht Toon Title Léiríonn cártaí teidil cartún conas a sheachadann cumasc cineál le híomhánna an punch atá de dhíth ar laoch. Le dornán de scáthú téacs, stróc téacs, agus cleasanna claochlaithe, ligeann CSS nua-aimseartha tú leas a bhaint as an fuinneamh céanna.
An Toon Téacs Teideal Gineadóir Cuid den bhealach tríd an alt seo a scríobh, thuig mé go mbeadh sé úsáideach uirlis a bheith ann chun téacs a ghiniúint ar nós na teidil chartúin is breá liom an oiread sin. Mar sin rinne mé ceann. Ligeann My Toon Text Title Generator duit triail a bhaint as dathanna, strócanna, agus scáthanna téacs iolracha. Is féidir leat ord péint a choigeartú, spásáil litreacha a chur i bhfeidhm, réamhamharc a dhéanamh ar do théacs i rogha clónna samplacha, agus ansin an CSS ginte a chóipeáil díreach chuig do ghearrthaisce le húsáid i dtionscadal. Toon Title CSS Is féidir leat an CSS a chuireann Gineadóir Teideal Téacs Toon ar fáil duit a chóipeáil-greamaigh. Ach déanaimis breathnú níos géire ar a ndéanann sé. Scáth téacs Féach ar an gcineál sa teideal seo ó eipeasóid Augie Doggie “Yuk-Yuk Duck,” lena litreacha buí éadroma agus a scáth dorcha, crua fritháireamh a thógann as an gcúlra é agus a chruthaíonn seachmall na doimhneachta.
Is dócha go bhfuil a fhios agat cheana féin go nglacann scáth-théacs le ceithre luach: (1) fritháireamh cothrománach agus (2) fritháireamh ingearach, (3) doiléir, agus (4) dath ar féidir leis a bheith soladach nó leath-trédhearcach. Is féidir leis na luachanna fritháirimh sin a bheith dearfach nó diúltach, mar sin is féidir liom “Yuk-Yuk Duck” a mhacasamhlú ag baint úsáide as scáth crua tarraingthe anuas agus ar dheis: dath: #f7f76d; téacs-scáth: 5px 5px 0 #1e1904;
Ar an láimh eile, tá mothú difriúil ag an teideal “Pint Giant” seo lena scáth diúltach leathbhog: dath: #c2a872; téacs-scáth: -7px 5px 0 #b100e, 0 -5px 10px #546c6f;
Chun doimhneacht bhreise a chur leis agus éifeachtaí níos suimiúla a chruthú, is féidir liom scáthanna iolracha a leagan. Le haghaidh “Let's Duck Out,” cuirim ceithre scáth le chéile: an chéad scáth soladach le fritháireamh diúltach cothrománach chun an téacs a ardú den chúlra, agus scáthanna níos boige de réir a chéile chun doiléir a chruthú timpeall air: dath: #6F4D80; téacs-scáth: -5px5px 0 #260e1e, /* Scáth 1 */ 0 0 15px #e9ce96, /* Scáth 2 */ 0 0 30px #e9ce96, /* Scáth 3 */ 0 0 30px #e9ce96; /* Scáth 4 */
Léiríonn na scáthanna seo nach mbaineann úsáid as scáthú téacs amháin le héifeachtaí soilsithe a chruthú, mar is féidir leo a bheith maisiúil freisin agus pearsantacht a chur leo. Stróc Téacs Is éard atá i gceist le go leor cártaí teidil cartún litreacha le imlíne trom a fhágann go seasann siad amach ón gcúlra. Is féidir liom an éifeacht seo a athchruthú trí úsáid a bhaint as stróc téacs. Ar feadh i bhfad, ní raibh an mhaoin seo ar fáil ach trí réimír -webkit-, ach ciallaíonn sé sin freisin go bhfuil tacaíocht aige anois ar fud brabhsálaithe nua-aimseartha.
Is gearrscríbhinn do dhá airí é stróc téacs. Tarraingíonn an chéad cheann, leithead téacs-stróc, comhrian timpeall litreacha aonair, agus rialaíonn an dara ceann, dath stróc téacs, a dath. Le haghaidh “Whatever Goes Pup,” chuir mé stróc gorm 4px leis an téacs buí: dath: #eff0cd; -webkit-téacs-stróc: 4px #7890b5; stróc téacs: 4px #7890b5;
Is féidir le strócanna a bheith an-úsáideach nuair a chomhcheanglaítear iad le scáthanna, mar sin le haghaidh “Fás, Fás, Imithe,” chuir mé stróc tanaí 3px le scáth 1px ar éigean doiléir chun an éifeacht téacs tríthoiseach seo a chruthú: dath: #fbb999; téacs-scáth: 3px 5px 1px #5160b1; -webkit-téacs-stróc: 3px #984336; téacs-stróc: 3px #984336;
Ordú Péinte Ní bhíonn an toradh ionchais ag baint úsáide as stróc téacs i gcónaí, go háirithe le litreacha níos tanaí agus strócanna níos tiús, mar go dtarraingíonn an brabhsálaí stróc thar an líonadh de réir réamhshocraithe. Faraor, ní cheadaíonn CSS go fóill dom socrúchán stróc a choigeartú mar a dhéanaim go minic i Sceitse. Mar sin féin, tá luachanna ag an maoin ordú péinte a ligeann dom an stróc a chur taobh thiar den líonadh, seachas os comhair an líonadh.
péint-ordú: péinteann stróc an stróc ar dtús, ansin an líonadh, ach péint-ordú: filleann a mhalairt: dath: #fbb999; péint-ordú: líonadh; téacs-scáth: 3px 5px 1px #5160b1; téacs-stróc-dath:#984336; téacs-stróc-leithead: 3px;
Coinníonn stróc éifeachtach litreacha inléite, cuireann sé meáchan leis, agus - nuair a chomhcheanglaítear iad le scáthanna agus ord péinte - tugann sé fíorláithreacht téacs comhréidh. Cúlra Laistigh Téacs Téann go leor cártaí teidil cartún níos faide ná dath cothrom trí uigeacht, grádáin, nó mionsonraí léirithe a chur leis an litreoireacht. Uaireanta is uigeacht é sin, uaireanta eile d'fhéadfadh sé a bheith ina ghrádán le haistriú tonúil caolchúiseach. Ar an ngréasán, is féidir liom an éifeacht seo a athchruthú trí úsáid a bhaint as íomhá chúlra nó grádán taobh thiar den téacs, agus ansin é a ghearradh go cruth na litreacha. Braitheann sé seo ar dhá airí ag obair le chéile: cúlra-gearrthóg: téacs agus téacs-líonadh-dath: trédhearcach.
Ar dtús, cuirim cúlra taobh thiar den téacs i bhfeidhm. Is féidir gur léarscáil ghiotán nó íomhá veicteora é seo nó grádán CSS. Mar shampla seo ón eipeasóid Quick Draw McGraw “Baba Bait,” cuimsíonn an téacs teidil grádán bun-barr caolchúiseach ón dorchadas go dtí an solas: cúlra: grádán líneach (0deg, #667b6a, #1d271a);
Ansin, gearraim an cúlra sin de na glyphs agus déanaim an téacs trédhearcach ionas go dtaispeánann an cúlra trí: -webkit-background-gearrthóg: téacs; -webkit-téacs-líonadh-dath: trédhearcach;
Gan ach an dá líne sin, níl an cúlra péinteáilte taobh thiar den téacs a thuilleadh; ina ionad sin, tá sé péinteáilte laistigh de. Oibríonn an teicníc seo go háirithe go maith nuair a chuirtear le chéile é le strócanna agus scáthanna. Soláthraíonn grádán bearrtha dath agus uigeacht don litreoireacht, coinníonn stróc a imill ghéar, agus ardaíonn scáth é ón gcúlra. Le chéile, athchruthaíonn siad cuma sraitheach na gcártaí teidil lámhphéinteáilte ag baint úsáide as rud ar bith níos mó ná CSS beag. Mar is gnáth, déan tástáil chúramach ar théacs bearrtha, mar is féidir uaireanta tionchar a bheith ag guairneáin bhrabhsálaí ar scáthanna agus ar rindreáil. Téacs a Scoilteadh ina Charachtair Aonair Uaireanta ní theastaíonn uaim focal nó ceannteideal iomlán a stíl. Ba mhaith liom litreacha aonair a stíliú - carachtar a bhrú chun cinn, meáchan breise a thabhairt do glyph amháin, nó cúpla litir a bheochan go neamhspleách. I HTML agus CSS simplí, níl ach bealach iontaofa amháin ann chun é sin a dhéanamh: gach carachtar a fhilleadh ina eilimint réise féin. D'fhéadfainn é sin a dhéanamh de láimh, ach bheadh sé sin leochaileach, deacair a choimeád ar bun, agus thitfeadh sé as a chéile go tapa nuair a athraítear cóip. Ina áit sin, nuair is gá dom rialú in aghaidh na litreach, úsáidim leabharlann scoilteadh téacs mar splt.js (cé go bhfuil réitigh eile ar fáil). Tógann sé seo nód téacs agus fillteann sé focail nó carachtair go huathoibríoch, rud a thugann crúcaí breise dom le beochan agus stíl a dhéanamh gan mo mharcáil a dhéanamh. Is cur chuige é a choinníonn mo HTML inléite agus séimeantach, agus ag an am céanna an smacht breá a theastaíonn uaim chun an clóghrafaíocht mhíchothrom, thréitheach a fheiceann tú i gcártaí teidil cartún clasaiceacha a athchruthú. Mar sin féin, tagann an cur chuige seo leiscaveat inrochtaineachta, toisc go léann formhór na léitheoirí scáileáin nóid téacs in ord. Mar sin seo:
Hum Sweet Hum
…léann mar a bheifeá ag súil leis: Hum milis
Ach seo:
H u m
…is féidir iad a léirmhíniú go difriúil ag brath ar an mbrabhsálaí agus ar an léitheoir scáileáin. Comhtháthóidh cuid acu na litreacha agus léifidh siad na focail i gceart. Féadfaidh daoine eile sos a bheith acu idir litreacha, rud a d’fhéadfadh a bheith cosúil leis seo sa chás is measa: “H…” “U…” “M…”
Faraor, ní sholáthraíonn roinnt réitigh scoilte toradh atá inrochtana i gcónaí, agus mar sin scríobh mé mo scoilteoir téacs féin, splinter.js, atá i béite faoi láthair. Litreacha Aonair a Athrú Chun mo Toon Text Splitter a ghníomhachtú, cuirim tréith sonraí leis an eilimint ba mhaith liom a scoilt:
Hum Sweet Hum
Ar dtús, scarann mo script gach focal ina litreacha aonair agus fillteann sé iad i eilimint réise le tréithe ranga agus ARIA curtha i bhfeidhm:
Tógann an script inneachar tosaigh na heiliminte scoilte ansin agus cuireann sé leis mar airí aria chun inrochtaineacht a choinneáil:
Agus na tréithe ranga sin curtha i bhfeidhm, is féidir liom carachtair aonair a stíliú mar a roghnaíonn mé.
Mar shampla, le haghaidh “Hum Sweet Hum,” ba mhaith liom a mhacasamhlú mar a aistríonn a litreacha ón mbunlíne. Tar éis dom mo Toon Text Splitter a úsáid, chuir mé ceithre luach aistrithe éagsúla i bhfeidhm ag baint úsáide as roinnt roghnóirí :nú páiste chun cuma leathrandamach a chruthú: /* 4ú, 8ú, 12ú... */ .toon-char: nth-child(4n) { aistrigh: 0 -8px; } /* 1ú, 5ú, 9ú... */ .toon-char:nth-child(4n+1) { aistrigh: 0 -4px; } /* 2ú, 6ú, 10ú... */ .toon-char:nth-child(4n+2) { aistrigh: 0 4px; } /* 3ú, 7ú, 11ú... */ .toon-char: nth-child(4n+3) { aistrigh: 0 8px; }
Ach níl san aistriú ach airí amháin is féidir liom a úsáid chun mo théacs toon a athrú.
D’fhéadfainn na carachtair aonair sin a rothlú freisin le haghaidh cuma níos chaotic fós: /* 4ú, 8ú, 12ú... */ .toon-line .toon-char:nth-child(4n) { rothlú: -4deg; } /* 1ú, 5ú, 9ú... */ .toon-char: nth-child(4n+1) { rothlú: -8deg; } /* 2ú, 6ú, 10ú... */ .toon-char:nth-child(4n+2) { rothlú: 4deg; } /* 3ú, 7ú, 11ú... */ .toon-char: nth-child(4n+3) { rothlú: 8deg; }
Ach níl san aistriú ach airí amháin is féidir liom a úsáid chun mo théacs toon a athrú. D’fhéadfainn na carachtair aonair sin a rothlú freisin le haghaidh cuma níos chaotic fós: /* 4ú, 8ú, 12ú... */ .toon-líne .toon-char:nú-leanbh(4n) { rothlú: -4deg; }
/* 1ú, 5ú, 9ú... */ .toon-char:nú-leanbh(4n+1) { rothlú: -8deg; }
/* 2ú, 6ú, 10ú... */ .toon-char:nú-leanbh(4n+2) { rothlú: 4deg; }
/* 3ú, 7ú, 11ú... */ .toon-char:nú-leanbh(4n+3) { rothlú: 8deg; }
Agus, ar ndóigh, d'fhéadfainn beochan a chur leis chun na carachtair sin a smearadh agus teidil mo stíl téacs toon a thabhairt ar an saol. Ar dtús, chruthaigh mé beochan eochairfhráma a rothlaíonn na carachtair:
@keyframes jiggle { 0%, 100% { trasfhoirmiú: rothlú(var(--base-rotate, 0deg)); } 25% {claochlú: rothlú (calc (var (--bonn-rothlaigh, 0deg) + 3deg)); } 50% {claochlú: rothlú (calc (var (--base-rotate, 0deg) - 2deg)); } 75% {claochlú: rothlú (calc (var (--bonn-rothlaigh, 0deg) + 1deg)); } }
Sula gcuirtear i bhfeidhm é ar na heilimintí réise a chruthaigh mo Scoilteoir Téacs Toon: .toon-char { beochan: jiggle 3s gan teorainn gan teorainn le héascaíocht isteach; claochladán: bun sa lár; }
Agus ar deireadh, an méid rothlaithe agus moill a shocrú sula dtosaíonn gach carachtar ag jiggle: .toon-char:nth-child(4n) { --base-rotate: -2deg; } .toon-char:nú-leanbh(4n+1) { --base-rotate: -4deg; } .toon-char:nth-child(4n+2) { --base-rotate: 2deg; } .toon-char:nú-leanbh(4n+3) { --base-rotate: 4deg; }
.toon-char:nth-child(4n) { beochan-moill: 0.1s; } .toon-char:nth-child(4n+1) { beochan-moill: 0.3s; } .toon-char:nth-child(4n+2) { beochan-moill: 0.5s; } .toon-char:nth-child(4n+3) { beochan-moill: 0.7s; }
Fráma Amháin Chun Léiriú a Dhéanamh Bhí fráma amháin ag ealaíontóirí teidil cartún chun tuiscint a fháil, agus bhí a gcuid clóghrafaíochta chomh tábhachtach leis an saothar ealaíne a phéinteáil siad. Tá an rud céanna fíor ar an ngréasán. Ceanntásc nó laoch dea-dhearthatá soiléireacht, carachtar agus muinín ag teastáil ón gceantar — ní hamháin íomhá chúlra faded faded. Le roinnt airíonna CSS roghnaithe go cúramach - scáthanna, strócanna, cúlraí gearrtha, agus roinnt beochan srianta - is féidir linn an tionchar céanna sin a athchruthú. Is breá liom téacs toon ní toisc go bhfuil mé cumha, ach toisc go bhfuil a dhearadh d'aon ghnó. Déan roghanna d'aon ghnó, agus lig do chlóghrafaíocht téacs beag toon punch a chur le do dhearaí.
