Matapos tapusin ang isang proyekto na kailangan kong matutunan ang lahat ng magagawa ko tungkol sa CSS at SVG na mga animation, sinimulan kong isulat ang seryeng ito tungkol sa Smashing Animations at "How Classic Cartoons Inspire Modern CSS." Upang tapusin ang taong ito, gusto kong ipakita sa iyo kung paano gumamit ng modernong CSS para gawin ang elementong iyon na ginagawang napaka-epekto ng Mga Pamagat ng Toon: ang kanilang typography. Pamagat Artwork Design Sa tahimik na panahon ng 1920s at unang bahagi ng '30s, ang typography ng title card ng isang pelikula ay lumikha ng mood, nagtakda ng eksena, at nagpaalala sa isang manonood ng uri ng pelikulang babayaran nila upang panoorin.
Ang mga cartoon title card ay branding, mood, at scene-setting, lahat ay pinagsama sa isa. Sa mga unang taon, kapag ang mga pangunahing badyet sa studio ay mas malaki, ang mga pamagat na card na ito ay madalas na naglalarawan at nagpinta.
Ngunit nang umunlad ang telebisyon noong 1950s, bumaba ang mga badyet, at ang mga card na idinisenyo ng mga artist tulad ni Lawrence "Art" Goble ay nagpatibay ng isang bagong visual na wika, na naging mas graphic, naka-istilo, at hindi gaanong masalimuot. Tandaan: Si Lawrence "Art" Goble ay isa sa mga madalas na hindi pinapansin na mga bayani ng mid-century na American animation. Pangunahing nagtrabaho siya para sa Hanna-Barbera sa mga pinaka-maimpluwensyang taon nito noong 1950s at 1960s. Si Goble ay hindi isang character animator. Ang kanyang tungkulin ay lumikha ng kapaligiran, kaya nagdisenyo siya ng mga kapaligiran para sa The Flintstones, Huckleberry Hound, Quick Draw McGraw, at Yogi Bear, pati na rin ang mga opening title card na nagtatakda ng tono. Ang kanyang mga title card, na nagtatampok ng mga painting na may naka-overlay na logo, ay tumulong na tukuyin ang iconic na hitsura ng Hanna-Barbera. Ang likhang sining ni Goble para sa mga karakter gaya ng Quick Draw McGraw at Yogi Bear ay naging epektibo sa mas maliliit na screen ng TV. Sa halip na mag-reproduce ng still mula sa cartoon, nakatuon siya sa paglalahad ng isang solong, matibay na ideya — madalas sa silhouette — na nakakuha ng esensya nito. Sa "The Buzzin' Bear," nagbu-buzz si Yogi sa isang helicopter. Tumalbog siya palayo, pic-a-nic basket sa kamay, sa "Bear on a Picnic," at para sa kanyang "Prize Fight Fright," nilalagay ni Yogi ang pamagat na teksto.
Sa kaunti o walang paggalaw na maaasahan, ang mga solong frame ni Goble ay kailangang lumikha ng mood, itakda ang eksena, at ilarawan ang isang kuwento. Ginawa nila ito gamit ang mga flat color, graphic na hugis, at typography na madalas na isinama sa artwork.
Bilang mga taga-disenyo na nagtatrabaho sa web, ang mga pamagat ng toon ay maaaring magturo ng maraming tungkol sa kung paano ihatid ang personalidad ng isang brand, gumawa ng unang impression, at magtakda ng mga inaasahan para sa karanasan ng isang tao gamit ang isang produkto o website. Maaari tayong matuto mula sa mga diskarte ng mga artist upang lumikha ng mga epektibong banner, mga header ng landing-page, at maging ang mga magagandang splash screen. Typography ng Pamagat ng Toon Ipinapakita ng mga cartoon title card kung paano naibibigay ng pagsasama-sama ng uri sa imagery ang suntok na kailangan ng isang header o bayani. Sa kaunting text-shadow, text-stroke, at transform tricks, hinahayaan ka ng modernong CSS na gamitin ang parehong enerhiya.
Ang Tagabuo ng Pamagat ng Teksto ng Toon Sa kalagitnaan ng pagsusulat ng artikulong ito, napagtanto kong magiging kapaki-pakinabang ang pagkakaroon ng tool para sa pagbuo ng teksto na naka-istilong tulad ng mga pamagat ng cartoon na mahal na mahal ko. Kaya gumawa ako ng isa. Hinahayaan ka ng My Toon Text Title Generator na mag-eksperimento sa mga kulay, stroke, at maraming text shadow. Maaari mong ayusin ang pagkakasunud-sunod ng pintura, ilapat ang puwang ng titik, i-preview ang iyong teksto sa isang seleksyon ng mga sample na font, at pagkatapos ay kopyahin ang nabuong CSS nang diretso sa iyong clipboard upang magamit sa isang proyekto. CSS Pamagat ng Toon Maaari mo lamang i-copy-paste ang CSS na ibinibigay sa iyo ng Toon Text Title Generator. Ngunit tingnan natin nang mas malapit kung ano ang ginagawa nito. Text shadow Tingnan ang uri sa pamagat na ito mula sa episode ni Augie Doggie na "Yuk-Yuk Duck," na may maputlang dilaw na mga titik at madilim, matigas, offset na anino na nag-aalis nito sa background at lumilikha ng ilusyon ng lalim.
Malamang na alam mo na na ang text-shadow ay tumatanggap ng apat na value: (1) pahalang at (2) vertical offset, (3) blur, at (4) isang kulay na maaaring solid o semi-transparent. Ang mga offset na value na iyon ay maaaring maging positibo o negatibo, kaya maaari kong kopyahin ang "Yuk-Yuk Duck" gamit ang isang matigas na anino na hinila pababa at pakanan: kulay: #f7f76d; text-shadow: 5px 5px 0 #1e1904;
Sa kabilang banda, ang pamagat na "Pint Giant" na ito ay may ibang pakiramdam sa negatibong semi-malambot na anino nito: kulay: #c2a872; text-shadow: -7px 5px 0 #b100e, 0 -5px 10px #546c6f;
Upang magdagdag ng dagdag na lalim at lumikha ng mas kawili-wiling mga epekto, maaari akong mag-layer ng maraming anino. Para sa "Let's Duck Out," pinagsasama-sama ko ang apat na anino: ang una ay isang solidong anino na may negatibong pahalang na offset upang alisin ang text mula sa background, na sinusundan ng unti-unting malambot na mga anino upang lumikha ng blur sa paligid nito: kulay: #6F4D80; text-shadow: -5px5px 0 #260e1e, /* Shadow 1 */ 0 0 15px #e9ce96, /* Shadow 2 */ 0 0 30px #e9ce96, /* Shadow 3 */ 0 0 30px #e9ce96; /* Shadow 4 */
Ipinapakita ng mga anino na ito na ang paggamit ng text-shadow ay hindi lamang tungkol sa paglikha ng mga lighting effect, dahil maaari rin silang maging pandekorasyon at magdagdag ng personalidad. Text Stroke Maraming mga cartoon title card ang nagtatampok ng mga titik na may naka-bold na outline na nagpapatingkad sa mga ito mula sa background. Maaari kong muling likhain ang epektong ito gamit ang text-stroke. Sa mahabang panahon, available lang ang property na ito sa pamamagitan ng -webkit- prefix, ngunit nangangahulugan din ito na sinusuportahan na ito sa mga modernong browser.
Ang text-stroke ay isang shorthand para sa dalawang katangian. Ang una, text-stroke-width, ay gumuhit ng contour sa paligid ng mga indibidwal na titik, habang ang pangalawa, text-stroke-color, ay kumokontrol sa kulay nito. Para sa "Whatever Goes Pup," nagdagdag ako ng 4px blue stroke sa dilaw na text: kulay: #eff0cd; -webkit-text-stroke: 4px #7890b5; text-stroke: 4px #7890b5;
Maaaring maging kapaki-pakinabang lalo na ang mga stroke kapag pinagsama ang mga ito sa mga anino, kaya para sa "Growing, Growing, Gone," nagdagdag ako ng manipis na 3px na stroke sa isang halos hindi malabong 1px na anino upang gawin itong three-dimensional na text effect: kulay: #fbb999; text-shadow: 3px 5px 1px #5160b1; -webkit-text-stroke: 3px #984336; text-stroke: 3px #984336;
Order ng pintura Ang paggamit ng text-stroke ay hindi palaging nagdudulot ng inaasahang resulta, lalo na sa mas manipis na mga titik at mas makapal na mga stroke, dahil bilang default, ang browser ay kumukuha ng isang stroke sa ibabaw ng fill. Nakalulungkot, hindi pa rin ako pinapayagan ng CSS na ayusin ang pagkakalagay ng stroke gaya ng madalas kong ginagawa sa Sketch. Gayunpaman, may mga value ang paint-order na property na nagbibigay-daan sa akin na ilagay ang stroke sa likod, sa halip na sa harap ng, fill.
paint-order: pinipintura muna ng stroke ang stroke, pagkatapos ay ang fill, samantalang ang paint-order: fill ay ang kabaligtaran: kulay: #fbb999; paint-order: punan; text-shadow: 3px 5px 1px #5160b1; text-stroke-color:#984336; text-stroke-width: 3px;
Ang isang epektibong stroke ay nagpapanatili sa mga titik na nababasa, nagdaragdag ng timbang, at — kapag pinagsama sa mga anino at pagkakasunud-sunod ng pintura — ay nagbibigay ng flat text na tunay na presensya. Mga Background sa Loob ng Teksto Maraming cartoon title card ang higit pa sa flat color sa pamamagitan ng pagdaragdag ng texture, gradients, o may larawang detalye sa letra. Minsan iyon ay isang texture, sa ibang pagkakataon ay maaaring ito ay isang gradient na may banayad na pagbabago ng tonal. Sa web, maaari kong muling likhain ang epektong ito sa pamamagitan ng paggamit ng larawan sa background o gradient sa likod ng teksto, at pagkatapos ay i-clip ito sa hugis ng mga titik. Umaasa ito sa dalawang property na nagtutulungan: background-clip: text at text-fill-color: transparent.
Una, nag-apply ako ng background sa likod ng text. Ito ay maaaring isang bitmap o vector na imahe o isang CSS gradient. Para sa halimbawang ito mula sa Quick Draw McGraw episode na "Baba Bait," ang teksto ng pamagat ay may kasamang banayad na top-bottom gradient mula sa madilim hanggang sa maliwanag: background: linear-gradient(0deg, #667b6a, #1d271a);
Susunod, i-clip ko ang background na iyon sa mga glyph at ginagawang transparent ang text para lumabas ang background sa pamamagitan ng: -webkit-background-clip: text; -webkit-text-fill-color: transparent;
Sa dalawang linya lamang na iyon, ang background ay hindi na pininturahan sa likod ng teksto; sa halip, ito ay ipininta sa loob nito. Ang diskarteng ito ay gumagana nang mahusay kapag pinagsama sa mga stroke at anino. Ang isang clipped gradient ay nagbibigay ng letra na may kulay at texture, ang isang stroke ay nagpapanatili sa mga gilid nito na matalim, at isang anino ang nagpapataas nito mula sa background. Magkasama, nililikha nila ang layered na hitsura ng mga title card na ipininta ng kamay gamit ang isang maliit na CSS. Gaya ng nakasanayan, maingat na subukan ang na-clip na text, dahil ang mga quirks ng browser ay maaaring makaapekto minsan sa mga anino at pag-render. Paghahati ng Teksto sa Mga Indibidwal na Character Minsan ayaw kong mag-istilo ng buong salita o heading. Gusto kong mag-istilo ng mga indibidwal na letra — para i-nudge ang isang character sa lugar, bigyan ang isang glyph ng dagdag na timbang, o i-animate ang ilang mga titik nang hiwalay. Sa simpleng HTML at CSS, isa lang ang maaasahang paraan para gawin iyon: balutin ang bawat character sa sarili nitong span element. Maaari kong gawin iyon nang manu-mano, ngunit iyon ay magiging marupok, mahirap mapanatili, at mabilis na mahuhulog kapag nagbago ang kopya. Sa halip, kapag kailangan ko ng per-letter control, gumagamit ako ng text-splitting library tulad ng splt.js (bagama't available ang iba pang solusyon). Ito ay tumatagal ng isang text node at awtomatikong bumabalot ng mga salita o mga character, na nagbibigay sa akin ng mga karagdagang hook upang i-animate at i-istilo nang hindi ginugulo ang aking markup. Ito ay isang diskarte na nagpapanatili sa aking HTML na nababasa at semantiko, habang binibigyan ako ng mahusay na kontrol na kailangan ko upang muling likhain ang hindi pantay, magandang palalimbagan na nakikita mo sa mga klasikong cartoon title card. Gayunpaman, kasama ang diskarteng itomga babala sa pagiging naa-access, dahil ang karamihan sa mga screen reader ay nagbabasa ng mga text node sa pagkakasunud-sunod. Kaya ito:
Hum Sweet Hum
…nagbabasa gaya ng iyong inaasahan: Hum Sweet Hum
Ngunit ito:
H u m
…maaaring iba ang kahulugan depende sa browser at screen reader. Ang ilan ay pagsasama-samahin ang mga titik at babasahin nang tama ang mga salita. Ang iba ay maaaring mag-pause sa pagitan ng mga titik, na sa isang pinakamasamang sitwasyon ay maaaring parang: “H…” “U…” “M…”
Nakalulungkot, hindi naghahatid ng palaging naa-access na resulta ang ilang splitting solution, kaya isinulat ko ang sarili kong text splitter, splinter.js, na kasalukuyang nasa beta. Pagbabago ng Indibidwal na mga Liham Upang i-activate ang aking Toon Text Splitter, nagdagdag ako ng isang data- attribute sa elementong gusto kong hatiin:
Hum Sweet Hum
Una, pinaghihiwalay ng aking script ang bawat salita sa mga indibidwal na letra at binabalot ang mga ito sa isang elemento ng span na may nakalapat na mga katangian ng klase at ARIA:
Pagkatapos ay kinukuha ng script ang paunang nilalaman ng split element at idinaragdag ito bilang katangian ng aria upang makatulong na mapanatili ang pagiging naa-access:
Gamit ang mga katangian ng klase na iyon, maaari kong i-istilo ang mga indibidwal na character habang pinili ko.
Halimbawa, para sa "Hum Sweet Hum," gusto kong gayahin kung paano lumilipat ang mga titik nito mula sa baseline. Pagkatapos gamitin ang aking Toon Text Splitter, naglapat ako ng apat na magkakaibang mga halaga ng pagsasalin gamit ang ilang :nth-child selector upang lumikha ng semi-random na hitsura: /* Ika-4, ika-8, ika-12... */ .toon-char:nth-child(4n) { translate: 0 -8px; } /* Ika-1, ika-5, ika-9... */ .toon-char:nth-child(4n+1) { translate: 0 -4px; } /* ika-2, ika-6, ika-10... */ .toon-char:nth-child(4n+2) { translate: 0 4px; } /* Ika-3, ika-7, ika-11... */ .toon-char:nth-child(4n+3) { translate: 0 8px; }
Ngunit ang pagsasalin ay isa lamang pag-aari na maaari kong gamitin upang ibahin ang anyo ng aking ton text.
Maaari ko ring paikutin ang mga indibidwal na character na iyon para sa mas magulong 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; }
Ngunit ang pagsasalin ay isa lamang pag-aari na maaari kong gamitin upang ibahin ang anyo ng aking ton text. Maaari ko ring paikutin ang mga indibidwal na character na iyon para sa mas magulong hitsura: /* Ika-4, ika-8, ika-12... */ .toon-line .toon-char:nth-child(4n) { paikutin: -4deg; }
/* Ika-1, ika-5, ika-9... */ .toon-char:nth-child(4n+1) { paikutin: -8deg; }
/* ika-2, ika-6, ika-10... */ .toon-char:nth-child(4n+2) { paikutin: 4deg; }
/* Ika-3, ika-7, ika-11... */ .toon-char:nth-child(4n+3) { paikutin: 8deg; }
At, siyempre, maaari akong magdagdag ng mga animation upang i-jiggle ang mga character na iyon at bigyang-buhay ang aking mga pamagat sa istilo ng teksto ng toon. Una, gumawa ako ng keyframe animation na umiikot sa mga character:
@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)); } }
Bago ito ilapat sa mga elemento ng span na nilikha ng aking Toon Text Splitter: .toon-char { animation: jiggle 3s walang hanggan kadalian-in-out; transform-origin: gitnang ibaba; }
At panghuli, ang pagtatakda ng dami ng pag-ikot at pagkaantala bago magsimulang mag-jiggle ang bawat karakter: .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; }
Isang Frame Upang Gumawa ng Impression Ang mga cartoon title artist ay may isang frame upang makagawa ng impresyon, at ang kanilang typography ay kasinghalaga ng likhang sining na kanilang ipininta. Ang parehong ay totoo sa web. Isang mahusay na disenyong header o bayaniAng lugar ay nangangailangan ng kalinawan, karakter, at kumpiyansa — hindi lamang isang kupas na full-width na larawan sa background. Sa ilang maingat na piniling mga katangian ng CSS — mga anino, mga stroke, naka-clip na background, at ilang pinipigilang animation — maaari naming muling likhain ang parehong epekto. Gusto ko ang text ng toon hindi dahil nostalgic ako, kundi dahil sinadya ang disenyo nito. Gumawa ng sinasadyang mga pagpipilian, at hayaan ang isang maliit na toon text typography na magdagdag ng suntok sa iyong mga disenyo.
