Ar ôl gorffen prosiect a oedd yn gofyn i mi ddysgu popeth o fewn fy ngallu am animeiddiadau CSS a SVG, dechreuais ysgrifennu'r gyfres hon am Smashing Animations a "How Classic Cartoons Inspire Modern CSS." I gloi eleni, rwyf am ddangos i chi sut i ddefnyddio CSS modern i greu'r elfen honno sy'n gwneud Toon Titles mor drawiadol: eu teipograffeg. Teitl Dylunio Gwaith Celf Yn oes dawel y 1920au a’r 30au cynnar, creodd teipograffeg cerdyn teitl ffilm naws, gosododd yr olygfa, ac atgoffa cynulleidfa o’r math o ffilm yr oeddent wedi talu i’w gweld.
Roedd cardiau teitl cartŵn hefyd yn frandio, naws, a gosodiad golygfa, i gyd wedi'u rholio i mewn i un. Yn y blynyddoedd cynnar, pan oedd cyllidebau stiwdio mawr yn fwy, roedd y cardiau teitl hyn yn aml yn ddarluniadol ac yn beintiol.
Ond pan ffynnodd teledu yn ystod y 1950au, gostyngodd cyllidebau, a mabwysiadodd cardiau a ddyluniwyd gan artistiaid fel Lawrence “Art” Goble iaith weledol newydd, gan ddod yn fwy graffig, arddullaidd, ac yn llai cymhleth. Nodyn: Mae Lawrence “Art” Goble yn un o arwyr animeiddio Americanaidd canol y ganrif sy’n cael ei anwybyddu’n aml. Gweithiodd yn bennaf i Hanna-Barbera yn ystod ei blynyddoedd mwyaf dylanwadol yn y 1950au a'r 1960au. Nid oedd Goble yn animeiddiwr cymeriad. Ei rôl oedd creu awyrgylch, felly dyluniodd amgylcheddau ar gyfer The Flintstones, Huckleberry Hound, Quick Draw McGraw, ac Yogi Bear, yn ogystal â'r cardiau teitl agoriadol a osododd y naws. Helpodd ei gardiau teitl, yn cynnwys paentiadau gyda logo wedi'u troshaenu, i ddiffinio edrychiad eiconig Hanna-Barbera. Roedd gwaith celf Goble ar gyfer cymeriadau fel Quick Draw McGraw ac Yogi Bear yn effeithiol ar sgriniau teledu llai. Yn hytrach nag atgynhyrchu llonydd o’r cartŵn, canolbwyntiodd ar gyflwyno un syniad cryf—yn aml mewn silwét—a oedd yn dal ei hanfod. Yn “The Buzzin’ Bear,” mae Yogi yn suo heibio mewn hofrennydd. Mae’n bownsio i ffwrdd, basged pic-a-nic mewn llaw, yn “Bear on a Picnic,” ac am ei “Prize Fight Fright,” mae Yogi yn bocsio testun y teitl.
Gydag ychydig neu ddim symudiad i ddibynnu arno, roedd yn rhaid i fframiau sengl Goble greu naws, gosod yr olygfa, a disgrifio stori. Gwnaethant hyn gan ddefnyddio lliwiau gwastad, siapiau graffeg, a theipograffeg a oedd yn aml yn cael eu hintegreiddio i'r gwaith celf.
Fel dylunwyr sy'n gweithio ar y we, gall teitlau toon ddysgu digon i ni am sut i gyfleu personoliaeth brand, gwneud argraff gyntaf, a gosod disgwyliadau ar gyfer profiad rhywun gan ddefnyddio cynnyrch neu wefan. Gallwn ddysgu o dechnegau’r artistiaid i greu baneri effeithiol, penawdau tudalennau glanio, a hyd yn oed sgriniau sblash da ‘ffasiwn’. Teipograffeg Toon Title Mae cardiau teitl cartŵn yn dangos sut mae cyfuno teip â delweddaeth yn darparu'r dyrnu sydd ei angen ar bennawd neu arwr. Gyda llond llaw o gysgod testun, trawiad testun, a thriciau trawsnewid, mae CSS modern yn caniatáu ichi fanteisio ar yr un egni.
The Toon Text Title Generator Rhan o'r ffordd trwy ysgrifennu'r erthygl hon, sylweddolais y byddai'n ddefnyddiol cael teclyn ar gyfer cynhyrchu testun wedi'i arddullio fel y teitlau cartŵn rydw i'n eu caru gymaint. Felly gwnes i un. Mae My Toon Text Title Generator yn gadael ichi arbrofi gyda lliwiau, strôc, a chysgodion testun lluosog. Gallwch addasu trefn paent, gosod bylchau rhwng llythrennau, rhagolwg o'ch testun mewn detholiad o ffontiau sampl, ac yna copïo'r CSS a gynhyrchir yn syth i'ch clipfwrdd i'w ddefnyddio mewn prosiect. Toon Title CSS Yn syml, gallwch gopïo-gludo'r CSS y mae Toon Text Title Generator yn ei ddarparu i chi. Ond gadewch i ni edrych yn agosach ar yr hyn y mae'n ei wneud. Cysgod testun Edrychwch ar y math yn y teitl hwn o bennod Augie Doggie “Yuk-Yuk Duck,” gyda’i llythrennau melyn golau a chysgod tywyll, caled, gwrthbwyso sy’n ei godi oddi ar y cefndir ac yn creu rhith o ddyfnder.
Mae'n debyg eich bod eisoes yn gwybod bod cysgod testun yn derbyn pedwar gwerth: (1) gwrthbwyso llorweddol a (2) gwrthbwyso fertigol, (3) niwl, a (4) lliw a all fod yn solet neu'n lled-dryloyw. Gall y gwerthoedd gwrthbwyso hynny fod yn gadarnhaol neu'n negyddol, felly gallaf ddyblygu “Yuk-Yuk Duck” gan ddefnyddio cysgod caled wedi'i dynnu i lawr ac i'r dde: lliw: #f7f76d; testun-cysgod: 5px 5px 0 #1e1904;
Ar y llaw arall, mae naws wahanol i’r teitl “Pint Cawr” hwn gyda’i gysgod lled-feddal negyddol: lliw: #c2a872; cysgod testun: -7px 5px 0 #b100e, 0 -5px 10px #546c6f;
I ychwanegu dyfnder ychwanegol a chreu effeithiau mwy diddorol, gallaf haenu cysgodion lluosog. Ar gyfer “Let’s Duck Out,” rwy’n cyfuno pedwar cysgod: y cyntaf yn gysgod solet gyda gwrthbwyso llorweddol negyddol i godi’r testun oddi ar y cefndir, ac yna cysgodion sy’n gynyddol feddalach i greu niwl o’i gwmpas: lliw: #6F4D80; cysgod testun: -5px5px 0 #260e1e, /* Cysgod 1 */ 0 0 15px #e9ce96, /* Cysgod 2 */ 0 0 30px #e9ce96, /* Cysgod 3 */ 0 0 30px #e9ce96; /* Cysgod 4 */
Mae'r cysgodion hyn yn dangos nad yw defnyddio cysgod testun yn ymwneud â chreu effeithiau goleuo yn unig, oherwydd gallant hefyd fod yn addurniadol ac ychwanegu personoliaeth. Strôc Testun Mae llawer o gardiau teitl cartŵn yn cynnwys llythyrau gydag amlinelliad trwm sy'n eu gwneud yn sefyll allan o'r cefndir. Gallaf ail-greu'r effaith hon gan ddefnyddio strôc testun. Am gyfnod hir, dim ond trwy ragddodiad -webkit- yr oedd yr eiddo hwn ar gael, ond mae hynny hefyd yn golygu ei fod bellach yn cael ei gefnogi ar draws porwyr modern.
llaw-fer ar gyfer dau briodwedd yw trawiad testun. Mae'r cyntaf, lled-strôc-testun, yn tynnu cyfuchlin o amgylch llythrennau unigol, tra bod yr ail, lliw testun-strôc, yn rheoli ei liw. Ar gyfer “Whatever Goes Pup,” ychwanegais strôc las 4px at y testun melyn: lliw: #eff0cd; -webkit-testun-strôc: 4px #7890b5; testun-strôc: 4px #7890b5;
Gall strôc fod yn arbennig o ddefnyddiol pan gânt eu cyfuno â chysgodion, felly ar gyfer “Tyfu, Tyfu, Mynd,” ychwanegais strôc denau 3px at gysgod 1px prin yn aneglur i greu'r effaith testun tri dimensiwn hwn: lliw: #fbb999; testun-cysgod: 3px 5px 1px #5160b1; -webkit-testun-strôc: 3px #984336; testun-strôc: 3px #984336;
Gorchymyn Paent Nid yw defnyddio strôc testun bob amser yn cynhyrchu'r canlyniad disgwyliedig, yn enwedig gyda llythrennau teneuach a strociau mwy trwchus, oherwydd yn ddiofyn mae'r porwr yn tynnu strôc dros y llenwad. Yn anffodus, nid yw CSS yn caniatáu i mi addasu lleoliad strôc o hyd fel yr wyf yn ei wneud yn aml yn Sketch. Fodd bynnag, mae gan yr eiddo trefn paent werthoedd sy'n caniatáu imi osod y strôc y tu ôl i'r llenwad, yn hytrach nag o'i flaen.
trefn paent: mae strôc yn paentio'r strôc yn gyntaf, yna'r llenwad, tra bod trefn paent: llenwi yn gwneud y gwrthwyneb: lliw: #fbb999; paent-drefn: llenwi; testun-cysgod: 3px 5px 1px #5160b1; lliw testun-strôc:#984336; testun-strôc-lled: 3px;
Mae strôc effeithiol yn cadw llythyrau'n ddarllenadwy, yn ychwanegu pwysau, ac - o'u cyfuno â chysgodion a threfn paent - yn rhoi presenoldeb go iawn i destun gwastad. Cefndiroedd Tu Mewn Testun Mae llawer o gardiau teitl cartŵn yn mynd y tu hwnt i liw gwastad trwy ychwanegu gwead, graddiannau, neu fanylion darluniadol i'r llythrennau. Weithiau mae hynny'n wead, ar adegau eraill gall fod yn raddiant gyda newid tonyddol cynnil. Ar y we, gallaf ail-greu'r effaith hon trwy ddefnyddio delwedd gefndir neu raddiant tu ôl i'r testun, ac yna ei glipio i siâp y llythrennau. Mae hyn yn dibynnu ar ddau briodwedd yn cydweithio: clip cefndir: testun a lliw-llenwi-liw: tryloyw.
Yn gyntaf, rwy'n cymhwyso cefndir y tu ôl i'r testun. Gall hwn fod yn ddelwedd map didau neu fector neu'n raddiant CSS. Ar gyfer yr enghraifft hon o bennod Quick Draw McGraw “Baba Bait,” mae testun y teitl yn cynnwys graddiant cynnil o'r gwaelod o'r tywyllwch i'r golau: cefndir: graddiant llinol (0deg, #667b6a, #1d271a);
Nesaf, rwy'n clipio'r cefndir hwnnw i'r glyffau ac yn gwneud y testun yn dryloyw fel bod y cefndir yn dangos trwy: -webkit-background-clip: testun; -webkit-testun-llenwi-liw: tryloyw;
Gyda'r ddwy linell honno'n unig, nid yw'r cefndir bellach wedi'i baentio y tu ôl i'r testun; yn lle hynny, mae wedi'i beintio o'i fewn. Mae'r dechneg hon yn gweithio'n arbennig o dda o'i chyfuno â strôc a chysgodion. Mae graddiant wedi'i dorri'n rhoi lliw a gwead i'r llythrennau, mae strôc yn cadw ei ymylon yn finiog, ac mae cysgod yn ei godi o'r cefndir. Gyda'i gilydd, maen nhw'n ail-greu edrychiad haenog cardiau teitl wedi'u paentio â llaw gan ddefnyddio dim mwy nag ychydig o CSS. Fel bob amser, profwch y testun wedi'i glipio'n ofalus, oherwydd gall quirks porwr weithiau effeithio ar gysgodion a rendrad. Rhannu Testun yn Gymeriadau Unigol Weithiau dwi ddim eisiau steilio gair neu bennawd cyfan. Rwyf am arddullio llythrennau unigol - gwthio cymeriad i'w le, rhoi pwysau ychwanegol i un glyff, neu animeiddio ychydig o lythyrau yn annibynnol. Mewn HTML a CSS plaen, dim ond un ffordd ddibynadwy sydd o wneud hynny: lapio pob cymeriad yn ei elfen rhychwant ei hun. Gallwn wneud hynny â llaw, ond byddai hynny'n fregus, yn anodd ei gynnal, a byddai'n cwympo'n gyflym pan fydd copi'n newid. Yn lle hynny, pan fydd angen rheolaeth fesul llythyren arnaf, rwy'n defnyddio llyfrgell hollti testun fel splt.js (er bod atebion eraill ar gael). Mae hyn yn cymryd nod testun ac yn lapio geiriau neu gymeriadau yn awtomatig, gan roi bachau ychwanegol i mi animeiddio a steilio heb wneud llanast o fy marcio. Mae'n ddull sy'n cadw fy HTML yn ddarllenadwy ac yn semantig, tra'n rhoi'r rheolaeth fanwl sydd ei hangen arnaf i ail-greu'r deipograffeg anwastad, llawn cymeriad a welwch mewn cardiau teitl cartŵn clasurol. Fodd bynnag, daw'r dull hwn gydacafeatau hygyrchedd, gan fod y rhan fwyaf o ddarllenwyr sgrin yn darllen nodau testun yn eu trefn. Felly hyn:
Hum Sweet Hum
…yn darllen fel y byddech yn ei ddisgwyl: Hum Melys
Ond hyn:
H u m
…gellir ei ddehongli'n wahanol yn dibynnu ar y porwr a'r darllenydd sgrin. Bydd rhai yn cydgadwynu'r llythrennau ac yn darllen y geiriau'n gywir. Gall eraill oedi rhwng llythrennau, a allai swnio fel y canlynol yn y senario waethaf: “H…” “U…” “M…”
Yn anffodus, nid yw rhai atebion hollti yn darparu canlyniad hygyrch bob amser, felly rwyf wedi ysgrifennu fy hollti testun fy hun, splinter.js, sydd mewn beta ar hyn o bryd. Trawsnewid Llythyrau Unigol I actifadu fy Toon Text Splitter, rwy'n ychwanegu priodoledd data i'r elfen rydw i am ei hollti:
Hum Sweet Hum
Yn gyntaf, mae fy sgript yn gwahanu pob gair yn llythrennau unigol ac yn eu lapio mewn elfen rhychwant gyda phriodoleddau dosbarth ac ARIA wedi'u cymhwyso:
Yna mae'r sgript yn cymryd cynnwys cychwynnol yr elfen hollt ac yn ei ychwanegu fel priodoledd aria i helpu i gynnal hygyrchedd:
Gyda'r priodoleddau dosbarth hynny wedi'u cymhwyso, gallaf wedyn arddullio cymeriadau unigol yn ôl fy newis.
Er enghraifft, ar gyfer “Hum Sweet Hum,” rwyf am ailadrodd sut mae ei lythrennau'n symud i ffwrdd o'r llinell sylfaen. Ar ôl defnyddio fy Toon Text Splitter, cymhwysais bedwar gwerth cyfieithu gwahanol gan ddefnyddio sawl dewiswr :nth-plentyn i greu golwg lled-hap: /* 4ydd, 8fed, 12fed... */ .toon-char:nth-child(4n) { cyfieithu: 0 -8px; } /* 1af, 5ed, 9fed... */ .toon-char:nth-child(4n+1) { cyfieithu: 0 -4px; } /* 2il, 6ed, 10fed... */ .toon-char:nth-child(4n+2) { cyfieithu: 0 4px; } /* 3ydd, 7fed, 11eg... */ .toon-char:nth-child(4n+3) { cyfieithu: 0 8px; }
Ond dim ond un eiddo y gallaf ei ddefnyddio i drawsnewid fy nhestun toon yw cyfieithu.
Gallwn hefyd gylchdroi'r cymeriadau unigol hynny i gael golwg hyd yn oed yn fwy anhrefnus: /* 4ydd, 8fed, 12fed... */ .toon-line .toon-char:nth-child(4n) { cylchdroi: -4deg; } /* 1af, 5ed, 9fed... */ .toon-char:nfed-plentyn(4n+1) { cylchdroi: -8deg; } /* 2il, 6ed, 10fed... */ .toon-char:nth-child(4n+2) { cylchdroi: 4deg; } /* 3ydd, 7fed, 11eg... */ .toon-char:nfed-plentyn(4n+3) { cylchdroi: 8deg; }
Ond dim ond un eiddo y gallaf ei ddefnyddio i drawsnewid fy nhestun toon yw cyfieithu. Gallwn hefyd gylchdroi'r cymeriadau unigol hynny i gael golwg hyd yn oed yn fwy anhrefnus: /* 4ydd, 8fed, 12fed... */ .toon-lein .toon-char:nth-child(4n) { cylchdroi: -4deg; }
/* 1af, 5ed, 9fed... */ .toon-char:nfed-plentyn(4n+1) { cylchdroi: -8deg; }
/* 2il, 6ed, 10fed... */ .toon-char:nfed-plentyn(4n+2) { cylchdroi: 4deg; }
/* 3ydd, 7fed, 11eg... */ .toon-char:nfed-plentyn(4n+3) { cylchdroi: 8deg; }
Ac, wrth gwrs, gallwn i ychwanegu animeiddiadau i jiggle y cymeriadau hynny a dod â fy teitlau arddull testun toon yn fyw. Yn gyntaf, creais animeiddiad ffrâm bysell sy'n cylchdroi'r cymeriadau:
@keyframes jiggle { 0%, 100% { trawsnewid: cylchdroi(var (-- base-cylchdroi, 0deg)); } 25% {trawsnewid: cylchdroi(calc(var(--base-cylchdroi, 0deg) + 3deg)); } 50% {trawsnewid: cylchdroi(calc(var(--base-cylchdroi, 0deg) - 2deg)); } 75% {trawsnewid: cylchdroi(calc(var(--base-cylchdroi, 0deg) + 1deg)); } }
Cyn ei gymhwyso i'r elfennau rhychwant a grëwyd gan fy Toon Text Splitter: .toon-char { animeiddiad: jiggle 3s anfeidrol rhwyddineb-mewn-allan; trawsnewid-tarddiad: gwaelod canol; }
Ac yn olaf, gosod y swm cylchdro ac oedi cyn i bob cymeriad ddechrau jiggle: .toon-char:nfed-plentyn(4n) { --bas-cylchdro: -2deg; } .toon-char:nfed-plentyn(4n+1) { --bas-cylchdro: -4deg; } .toon-char:nfed-plentyn(4n+2) { --bas-cylchdro: 2deg; } .toon-char:nfed-plentyn(4n+3) { --bas-cylchdro: 4deg; }
.toon-char:nth-child(4n) { animeiddiad-oedi: 0.1s; } .toon-char:nth-child(4n+1) { animeiddiad-oedi: 0.3s; } .toon-char:nth-child(4n+2) { animeiddiad-oedi: 0.5s; } .toon-char:nth-child(4n+3) { animeiddiad-oedi: 0.7s; }
Un Ffrâm I Wneud Argraff Roedd gan artistiaid teitl cartŵn un ffrâm i wneud argraff, ac roedd eu teipograffeg yr un mor bwysig â'r gwaith celf a baentiwyd ganddynt. Mae'r un peth yn wir ar y we. Pennawd neu arwr wedi'i ddylunio'n ddaardal angen eglurder, cymeriad, a hyder — nid yn unig delwedd gefndir lled llawn pylu. Gydag ychydig o briodweddau CSS a ddewiswyd yn ofalus - cysgodion, strociau, cefndiroedd wedi'u torri, a rhywfaint o animeiddiad wedi'i gyfyngu - gallwn ail-greu'r un effaith. Rwyf wrth fy modd â thestun toon nid oherwydd fy mod yn hiraethus, ond oherwydd bod ei ddyluniad yn fwriadol. Gwnewch ddewisiadau bwriadol, a gadewch i ychydig bach o deipograffeg testun ychwanegu punch at eich dyluniadau.
