Human mahuman ang usa ka proyekto nga nagkinahanglan kanako nga makat-on sa tanan nga akong mahimo mahitungod sa CSS ug SVG nga mga animation, nagsugod ako sa pagsulat niini nga serye mahitungod sa Smashing Animations ug "Sa Unsang Paagi ang Classic Cartoons Makadasig sa Modernong CSS." Aron mahuman karong tuiga, gusto nako ipakita kanimo kung giunsa ang paggamit sa modernong CSS aron mahimo ang elemento nga makapahimo sa mga Titulo sa Toon nga labi ka epektibo: ang ilang typography. Titulo Artwork Design Sa hilum nga panahon sa 1920s ug sa sayong bahin sa '30s, ang typography sa title card sa usa ka pelikula nakamugna og mood, nagbutang sa eksena, ug nagpahinumdom sa mga tumatan-aw sa matang sa pelikula nga ilang gibayran nga tan-awon.
Ang mga kard sa titulo sa cartoon kay branding, mood, ug setting-setting, tanan giligid sa usa. Sa unang mga tuig, kung ang mga dagkong badyet sa studio mas dako, kini nga mga titulo nga mga kard kanunay nga naghulagway ug nagpintal.
Apan sa dihang miulbo ang telebisyon sa panahon sa 1950s, mius-os ang mga badyet, ug ang mga kard nga gidisenyo sa mga artista sama ni Lawrence “Art” Goble misagop og bag-ong biswal nga pinulongan, nahimong mas graphic, estilo, ug dili kaayo komplikado. Mubo nga sulat: Si Lawrence "Art" Goble usa sa kanunay nga wala matagad nga mga bayani sa tunga-tunga sa siglo nga animation sa Amerika. Nag-una siya nga nagtrabaho sa Hanna-Barbera sa panahon sa labing impluwensyal nga mga tuig sa 1950s ug 1960s. Si Goble dili usa ka animator sa karakter. Ang iyang tahas mao ang paghimo og atmospera, mao nga nagdesinyo siya og mga palibot alang sa The Flintstones, Huckleberry Hound, Quick Draw McGraw, ug Yogi Bear, ingon man ang mga opening title card nga nagtakda sa tono. Ang iyang mga kard sa titulo, nga adunay mga dibuho nga adunay gisapawan nga logo, nakatabang sa paghubit sa imahen nga hitsura ni Hanna-Barbera. Ang artwork ni Goble alang sa mga karakter sama sa Quick Draw McGraw ug Yogi Bear epektibo sa gagmay nga mga screen sa TV. Imbis nga mag-reproduce og still gikan sa cartoon, nag-focus siya sa pagpresentar og usa, lig-on nga ideya - kasagaran sa silhouette - nga nakuha ang esensya niini. Sa "The Buzzin' Bear," si Yogi nag-buzz sa usa ka helicopter. Nag-bounce siya, pic-a-nic basket sa kamot, sa "Bear on a Picnic," ug para sa iyang "Prize Fight Fright," gi-box ni Yogi ang ulohan nga teksto.
Sa gamay o wala’y lihok nga masaligan, ang usa ka bayanan ni Goble kinahanglan nga maghimo usa ka kahimtang, itakda ang eksena, ug ihulagway ang usa ka istorya. Gihimo nila kini gamit ang mga patag nga kolor, graphic nga mga porma, ug typography nga kanunay nga gisagol sa artwork.
Isip mga tigdesinyo nga nagtrabaho sa web, ang mga titulo sa toon makatudlo kanato og daghan kon unsaon pagpahayag sa personalidad sa usa ka brand, paghimo og unang impresyon, ug pagtakda og mga gilauman alang sa kasinatian sa usa ka tawo gamit ang usa ka produkto o website. Makakat-on kita gikan sa mga teknik sa mga artista sa paghimo og epektibong mga bandera, mga ulohan sa landing-page, ug bisan sa maayo nga uso nga mga splash screen. Typography sa Titulo sa Toon Gipakita sa mga kard sa titulo sa cartoon kung giunsa ang paghiusa sa tipo sa mga imahen naghatag sa suntok nga gikinahanglan sa usa ka header o bayani. Uban sa pipila ka text-shadow, text-stroke, ug pagbag-o sa mga limbong, ang modernong CSS nagtugot kanimo sa pag-tap sa parehas nga kusog.
Ang Toon Text Title Generator Sa tunga-tunga sa pagsulat niini nga artikulo, akong naamgohan nga mapuslanon nga adunay usa ka himan alang sa pagmugna og teksto nga gi-istilo sama sa mga titulo sa cartoon nga akong gihigugma pag-ayo. Busa naghimo ko og usa. Gitugotan ka sa My Toon Text Title Generator nga mag-eksperimento sa mga kolor, stroke, ug daghang mga anino sa teksto. Mahimo nimong i-adjust ang han-ay sa pintura, ipadapat ang gilay-on sa sulat, i-preview ang imong teksto sa usa ka pagpili sa mga sample nga font, ug dayon kopyahon ang nahimo nga CSS diretso sa imong clipboard aron magamit sa usa ka proyekto. Toon Titulo CSS Mahimo nimong kopyahon-paste ang CSS nga gihatag kanimo sa Toon Text Title Generator. Apan atong tan-awon pag-ayo kon unsa ang gibuhat niini. Text shadow Tan-awa ang tipo niini nga titulo gikan sa episode ni Augie Doggie nga "Yuk-Yuk Duck," nga adunay luspad nga yellow nga mga letra ug itom, gahi, offset nga anino nga nagtangtang niini gikan sa background ug nagmugna sa ilusyon sa giladmon.
Tingali nahibal-an na nimo nga ang text-shadow modawat sa upat ka mga kantidad: (1) horizontal ug (2) vertical offsets, (3) blur, ug (4) usa ka kolor nga mahimong solid o semi-transparent. Kadtong mga offset nga kantidad mahimong positibo o negatibo, aron akong masundog ang "Yuk-Yuk Duck" gamit ang usa ka gahi nga anino nga gibira paubos ug sa tuo: kolor: #f7f76d; text-shadow: 5px 5px 0 #1e1904;
Sa laing bahin, kini nga titulo nga "Pint Giant" adunay lahi nga pagbati sa negatibo nga semi-humok nga anino: kolor: #c2a872; text-shadow: -7px 5px 0 #b100e, 0 -5px 10px #546c6f;
Aron makadugang og dugang nga giladmon ug makamugna og mas makaiikag nga mga epekto, mahimo kong mag-layer og daghang mga anino. Alang sa "Let's Duck Out," gikombinar nako ang upat ka mga anino: ang una usa ka solidong anino nga adunay negatibo nga pinahigda nga offset aron makuha ang teksto gikan sa background, gisundan sa labi ka hinay nga mga anino aron makahimo usa ka blur sa palibot: kolor: #6F4D80; text-shadow: -5px5px 0 #260e1e, /* Anino 1 */ 0 0 15px #e9ce96, /* Anino 2 */ 0 0 30px #e9ce96, /* Anino 3 */ 0 0 30px #e9ce96; /* Anino 4 */
Gipakita niini nga mga anino nga ang paggamit sa text-shadow dili lang bahin sa paghimo og mga epekto sa suga, tungod kay mahimo usab kini nga pangdekorasyon ug pagdugang personalidad. Text Stroke Daghang mga kard sa titulo sa cartoon ang adunay mga letra nga adunay usa ka maisog nga outline nga naghimo kanila nga lahi gikan sa background. Mahimo nako kini nga epekto gamit ang text-stroke. Sulod sa dugay nga panahon, kini nga kabtangan magamit ra pinaagi sa usa ka -webkit- prefix, apan nagpasabut usab kana nga gisuportahan na kini sa mga modernong browser.
Ang text-stroke usa ka shorthand alang sa duha ka mga kabtangan. Ang una, text-stroke-width, nagdrowing og contour palibot sa indibidwal nga mga letra, samtang ang ikaduha, text-stroke-color, nagkontrol sa kolor niini. Para sa “Whatever Goes Pup,” midugang ko og 4px blue stroke sa yellow nga text: kolor: #eff0cd; -webkit-text-stroke: 4px #7890b5; text-stroke: 4px #7890b5;
Ang mga stroke mahimong labi ka mapuslanon kung kini gihiusa sa mga anino, mao nga alang sa "Pagtubo, Pagtubo, Nawala," gidugang nako ang usa ka nipis nga 3px nga stroke sa usa ka halos hanap nga 1px nga anino aron mahimo kini nga three-dimensional nga epekto sa teksto: kolor: #fbb999; text-shadow: 3px 5px 1px #5160b1; -webkit-text-stroke: 3px #984336; text-stroke: 3px #984336;
Order sa Pinta Ang paggamit sa text-stroke dili kanunay makahatag sa gipaabot nga resulta, ilabi na sa nipis nga mga letra ug mas baga nga mga stroke, tungod kay sa default ang browser nagdrowing og usa ka stroke sa ibabaw sa pun-on. Ikasubo, ang CSS wala gihapon magtugot kanako sa pag-adjust sa pagbutang sa stroke sama sa kanunay nakong buhaton sa Sketch. Bisan pa, ang kabtangan sa pag-order sa pintura adunay mga kantidad nga nagtugot kanako nga ibutang ang stroke sa luyo, imbes sa atubangan sa, pun-on.
paint-order: ang stroke nagpintal sa stroke una, dayon ang fill, samtang ang paint-order: fill ang sukwahi: kolor: #fbb999; paint-order: pun-on; text-shadow: 3px 5px 1px #5160b1; text-stroke-color:#984336; text-stroke-lapad: 3px;
Ang usa ka epektibo nga stroke nagpugong sa mga letra nga mabasa, makadugang gibug-aton, ug - kung gihiusa sa mga anino ug han-ay sa pintura - naghatag sa patag nga teksto nga tinuod nga presensya. Mga Background Sulod sa Teksto Daghang mga kard sa titulo sa cartoon ang labaw pa sa patag nga kolor pinaagi sa pagdugang sa texture, gradients, o gihulagway nga detalye sa letra. Usahay kana usa ka texture, sa ubang mga higayon mahimo kini usa ka gradient nga adunay usa ka maliputon nga pagbag-o sa tonal. Sa web, mahimo nako kini nga epekto pinaagi sa paggamit sa usa ka background nga imahe o gradient sa luyo sa teksto, ug dayon i-clip kini sa porma sa mga letra. Nagsalig kini sa duha ka kabtangan nga nagtinabangay: background-clip: text ug text-fill-color: transparent.
Una, nagbutang ko og background luyo sa teksto. Kini mahimo nga usa ka bitmap o vector nga imahe o usa ka CSS gradient. Alang niini nga pananglitan gikan sa Quick Draw McGraw episode nga "Baba Bait," ang ulohan nga teksto naglakip sa usa ka maliputon nga top-bottom gradient gikan sa ngitngit ngadto sa kahayag: background: linear-gradient(0deg, #667b6a, #1d271a);
Sunod, akong gi-clip kana nga background sa mga glyph ug gihimo nga transparent ang teksto aron ang background nagpakita pinaagi sa: -webkit-background-clip: teksto; -webkit-text-fill-color: transparent;
Uban lamang sa duha ka linya, ang background wala na gipintalan sa luyo sa teksto; hinoon, kini gipintalan sa sulod niini. Kini nga teknik labi ka maayo kung gihiusa sa mga stroke ug mga anino. Ang usa ka giputol nga gradient naghatag sa letra nga adunay kolor ug texture, ang usa ka stroke magpadayon nga hait ang mga kilid niini, ug usa ka anino ang nagpataas niini gikan sa background. Mag-uban, ilang gi-recreate ang layered nga hitsura sa mga title card nga gipintalan sa kamot gamit ang gamay nga CSS. Sama sa kanunay, sulayi pag-ayo ang giputol nga teksto, tungod kay ang mga quirks sa browser usahay makaapekto sa mga anino ug paghubad. Pagbahin sa Teksto Ngadto sa Indibidwal nga mga Karakter Usahay dili ko gustong mag-istilo sa tibuok pulong o ulohan. Gusto nako nga mag-istilo sa tagsa-tagsa nga mga letra — sa pagduso sa usa ka karakter ngadto sa lugar, paghatag og usa ka glyph nga dugang gibug-aton, o pag-animate sa pipila ka mga letra nga independente. Sa yano nga HTML ug CSS, adunay usa ra ka kasaligan nga paagi aron mahimo kana: iputos ang matag karakter sa kaugalingon nga elemento sa span. Mahimo nako kana nga mano-mano, apan kana mahimong huyang, lisud nga mapadayon, ug dali nga maguba kung mabag-o ang kopya. Hinuon, kung kinahanglan nako ang kontrol sa matag sulat, naggamit ako usa ka librarya nga nagbahin sa teksto sama sa splt.js (bisan kung adunay ubang mga solusyon nga magamit). Nagkinahanglan kini og usa ka text node ug awtomatiko nga giputos ang mga pulong o mga karakter, naghatag kanako og dugang nga mga kaw-it aron ma-animate ug estilo nga dili madaot ang akong markup. Kini usa ka pamaagi nga nagpugong sa akong HTML nga mabasa ug semantiko, samtang naghatag kanako sa maayo nga kontrol nga kinahanglan nako aron mabuhat pag-usab ang dili patas, kinaiya nga typography nga imong makita sa klasiko nga mga kard sa titulo sa cartoon. Bisan pa, kini nga pamaagi moabut ubanaccessibility caveats, tungod kay kadaghanan sa mga screen reader nagbasa sa mga text node sa han-ay. Busa kini:
Hum Matam-is nga Hum
…nagbasa sama sa imong gipaabot: Hum Sweet Hum
Apan kini:
H u m
…mahimong mahubad nga lahi depende sa browser ug screen reader. Ang uban magdugtong sa mga letra ug mobasa sa mga pulong sa hustong paagi. Ang uban mahimong mohunong sa taliwala sa mga letra, nga sa usa ka labing grabe nga kahimtang nga kahimtang mahimo’g sama sa: “H…” “U…” “M…”
Ikasubo, ang pipila nga mga solusyon sa pagbahin wala maghatag usa ka kanunay nga makuha nga resulta, mao nga gisulat nako ang akong kaugalingon nga splitter sa teksto, splinter.js, nga karon naa sa beta. Pag-usab sa Indibidwal nga mga Sulat Aron ma-aktibo ang akong Toon Text Splitter, akong idugang ang usa ka data- attribute sa elemento nga gusto nakong bahinon:
Hum Sweet Hum
Una, gilain sa akong script ang matag pulong ngadto sa tagsa-tagsa nga mga letra ug giputos kini sa usa ka span nga elemento nga adunay klase ug ARIA nga mga hiyas nga gigamit:
Gikuha dayon sa script ang inisyal nga sulod sa split element ug gidugang kini isip aria attribute aron makatabang sa pagpadayon sa accessibility:
Sa paggamit sa mga hiyas sa klase, mahimo nako nga i-istilo ang indibidwal nga mga karakter sa akong gipili.
Pananglitan, alang sa "Hum Sweet Hum," gusto nako nga kopyahon kung giunsa ang pagbalhin sa mga letra niini gikan sa baseline. Human sa paggamit sa akong Toon Text Splitter, mi-apply ko og upat ka lain-laing translate values gamit ang ubay-ubay nga :nth-child selectors aron makahimo og semi-random look: /* Ika-4, ika-8, ika-12... */ .toon-char:nth-child(4n) { paghubad: 0 -8px; } /* Ika-1, ika-5, ika-9... */ .toon-char:nth-child(4n+1) { paghubad: 0 -4px; } /* Ika-2, ika-6, ika-10... */ .toon-char:nth-child(4n+2) { paghubad: 0 4px; } /* Ika-3, ika-7, ika-11... */ .toon-char:nth-child(4n+3) { paghubad: 0 8px; }
Apan ang paghubad usa ra ka kabtangan nga akong magamit aron mabag-o ang akong teksto sa toon.
Mahimo usab nako nga i-rotate ang mga indibidwal nga mga karakter alang sa labi ka gubot nga hitsura: /* Ika-4, ika-8, ika-12... */ .toon-line .toon-char:nth-child(4n) { rotate: -4deg; } /* Ika-1, ika-5, ika-9... */ .toon-char:nth-child(4n+1) { rotate: -8deg; } /* Ika-2, ika-6, ika-10... */ .toon-char:nth-child(4n+2) { rotate: 4deg; } /* Ika-3, ika-7, ika-11... */ .toon-char:nth-child(4n+3) { rotate: 8deg; }
Apan ang paghubad usa ra ka kabtangan nga akong magamit aron mabag-o ang akong teksto sa toon. Mahimo usab nako nga i-rotate ang mga indibidwal nga mga karakter alang sa labi ka gubot nga hitsura: /* Ika-4, ika-8, ika-12... */ .toon-line .toon-char:nth-child(4n) { tuyok: -4deg; }
/* Ika-1, ika-5, ika-9... */ .toon-char:nth-child(4n+1) { tuyok: -8deg; }
/* Ika-2, ika-6, ika-10... */ .toon-char:nth-child(4n+2) { tuyok: 4deg; }
/* Ika-3, ika-7, ika-11... */ .toon-char:nth-child(4n+3) { tuyok: 8deg; }
Ug, siyempre, makadugang ko og mga animation aron ma-jiggle ang mga karakter ug buhion ang akong mga titulo sa estilo sa teksto. Una, naghimo ko og keyframe animation nga nagtuyok sa mga karakter:
@keyframes magkurog { 0%, 100% {pag-usab: rotate(var(--base-rotate, 0deg)); } 25% {bag-o: rotate(calc(var(--base-rotate, 0deg) + 3deg)); } 50% {bag-o: rotate(calc(var(--base-rotate, 0deg) - 2deg)); } 75% {bag-o: rotate(calc(var(--base-rotate, 0deg) + 1deg)); } }
Sa wala pa kini magamit sa mga elemento sa span nga gihimo sa akong Toon Text Splitter: .toon-char { animation: jiggle 3s walay kinutuban nga kasayon-sa-gawas; transform-origin: sentro sa ubos; }
Ug sa katapusan, pagtakda sa gidaghanon sa rotation ug usa ka paglangan sa dili pa ang matag karakter magsugod sa pag-jiggle: .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; }
Usa ka Frame Aron Makahimo og Impresyon Ang mga artista sa titulo sa cartoon adunay usa ka frame aron makahimo usa ka impresyon, ug ang ilang typography sama ka hinungdanon sa artwork nga ilang gipintalan. Tinuod usab kini sa web. Usa ka maayong pagkadisenyo nga ulohan o bayaniAng lugar nagkinahanglan og katin-aw, kinaiya, ug pagsalig — dili lang usa ka kupas nga full-width nga hulagway sa background. Uban sa pipila ka mabinantayon nga gipili nga mga kabtangan sa CSS - mga anino, mga stroke, giputol nga mga background, ug pipila nga gipugngan nga animation - mahimo namon nga mabuhat pag-usab ang parehas nga epekto. Ganahan ko sa toon text dili tungod kay nostalgic ko, pero tungod kay gituyo ang disenyo niini. Paghimo og tinuyo nga mga pagpili, ug tugoti ang usa ka gamay nga toon nga typography sa teksto nga makadugang sa suntok sa imong mga disenyo.
