Ma hope o ka hoʻopau ʻana i kahi papahana e koi ana iaʻu e aʻo i nā mea āpau e pili ana i ka CSS a me SVG animations, ua hoʻomaka wau e kākau i kēia pūʻulu e pili ana i ka Smashing Animations a me "How Classic Cartoons Inspire Modern CSS." No ka hoʻopau ʻana i kēia makahiki, makemake wau e hōʻike iā ʻoe pehea e hoʻohana ai i ka CSS hou e hana i kēlā mea e hoʻoikaika nui ai i nā Titles Toon: kā lākou typography. Hoʻolālā Hana Kiʻi Poʻo I ka wā hāmau o nā makahiki 1920 a me nā makahiki 30 mua, ua hoʻokumu ka typography o ke kāleka poʻo inoa o kahi kiʻiʻoniʻoni i ke ʻano, hoʻonohonoho i ke ʻano, a hoʻomanaʻo i ka lehulehu i ke ʻano o ke kiʻiʻoniʻoni a lākou i uku ai e ʻike.
ʻO nā kāleka poʻo kiʻi kiʻi ʻia hoʻi ka branding, ke ʻano, a me ka hoʻonohonoho hiʻohiʻona, ua ʻōwili ʻia nā mea a pau i hoʻokahi. I nā makahiki mua, i ka wā i ʻoi aku ka nui o nā waihona kālā studio nui, ʻike pinepine ʻia kēia mau kāleka poʻo inoa.
Akā, i ka wā i ulu nui ai ke kīwī i nā makahiki 1950, hāʻule nā kālā, a ua hoʻohana nā kāleka i hoʻolālā ʻia e nā mea pena e like me Lawrence "Art" Goble i kahi ʻōlelo ʻike maka hou, e lilo ana i mea kiʻi kiʻi, stylised, a emi ʻole ka paʻakikī. 'Ōlelo Aʻo: ʻO Lawrence "Art" Goble kekahi o nā poʻe koa i nānā ʻole ʻia o ka animation ʻAmelika waena o ke kenekulia. Ua hana mua ʻo ia no Hanna-Barbera i kona mau makahiki koʻikoʻi o nā 1950s a me 1960s. ʻAʻole ʻo Goble kahi mea animator. ʻO kāna kuleana ʻo ka hoʻokumu ʻana i ka lewa, no laila ua hoʻolālā ʻo ia i nā kaiapuni no The Flintstones, Huckleberry Hound, Quick Draw McGraw, a me Yogi Bear, a me nā kāleka poʻo inoa wehe i hoʻonohonoho i ka leo. ʻO kāna mau kāleka poʻo inoa, e hōʻike ana i nā kiʻi pena me kahi hōʻailona i uhi ʻia, ua kōkua i ka wehewehe ʻana i ke ʻano o Hanna-Barbera. ʻO ka hana kiʻi a Goble no nā kiʻi e like me Quick Draw McGraw a me Yogi Bear i hana maikaʻi ʻia ma nā pale TV liʻiliʻi. Ma mua o ka hoʻopuka hou ʻana i kahi kiʻi mai ke kiʻi paʻi kiʻi, ua kālele ʻo ia i ka hōʻike ʻana i kahi manaʻo ikaika - pinepine i ka silhouette - i hopu i kona ʻano. Ma ka "The Buzzin' Bear," hoʻokani ʻo Yogi ma kahi helikopa. Paʻa ʻo ia me ka hīnaʻi pic-a-nic ma ka lima, ma "Bear on a Picnic," a no kāna "Prize Fight Fright," pahu ʻo Yogi i ke poʻo inoa.
Me ka liʻiliʻi a ʻaʻohe manaʻo e hilinaʻi ʻia, pono nā kiʻi hoʻokahi o Goble e hana i kahi ʻano, hoʻonohonoho i ke ʻano, a wehewehe i kahi moʻolelo. Ua hana lākou i kēia me ka hoʻohana ʻana i nā waihoʻoluʻu palahalaha, nā kiʻi kiʻi, a me ka typography i hoʻohui pinepine ʻia i loko o ka hana noʻeau.
Ma ke ʻano he mea hoʻolālā e hana ana ma ka pūnaewele, hiki i nā poʻo inoa toon ke aʻo nui iā mākou e pili ana i ke ʻano o ka hōʻike ʻana i ke ʻano o kahi brand, hana i kahi manaʻo mua, a hoʻonohonoho i nā manaʻolana no ka ʻike o kekahi me ka hoʻohana ʻana i kahi huahana a pūnaewele paha. Hiki iā mākou ke aʻo mai ka hana a nā mea hana kiʻi e hana i nā hae kūpono, nā poʻomanaʻo ʻaoʻao pae, a me nā pale splash maikaʻi. Toon Title Typography Hōʻike nā kāleka poʻo kiʻi kiʻi i ke ʻano o ka hoʻohui ʻana me nā kiʻi kiʻi e hāʻawi i ka punch e pono ai ke poʻo a me ka meʻe. Me ka liʻiliʻi o nā kikokikona-shadow, text-stroke, a me ka hoʻololi ʻana i nā hoʻopunipuni, ʻae ka CSS hou iā ʻoe e paʻi i kēlā ikehu like.
Ka Toon Text Title Generator Ma kahi o ka kākau ʻana i kēia ʻatikala, ʻike wau he mea pono ka loaʻa ʻana o kahi mea hana no ka hana ʻana i nā kikokikona i kapa ʻia e like me nā poʻo inoa kiʻi kiʻi aʻu i aloha nui ai. No laila ua hana au i hoʻokahi. Hāʻawi kaʻu Toon Text Title Generator iā ʻoe e hoʻāʻo me nā kala, nā paʻi, a me nā aka kikokikona he nui. Hiki iā ʻoe ke hoʻololi i ka hoʻonohonoho pena, e hoʻopili i ka spacing leka, e nānā i kāu kikokikona ma kahi koho o nā hiʻohiʻona paʻi, a laila kope pololei i ka CSS i hana ʻia i kāu clipboard e hoʻohana ai i kahi papahana. Toon Title CSS Hiki iā ʻoe ke kope-paʻi wale i ka CSS a ka Toon Text Title Generator e hāʻawi iā ʻoe. Akā, e nānā pono kākou i kāna hana. Ke aka kikokiko E nānā i ke ʻano o kēia poʻo inoa mai ka ʻatikala a Augie Doggie ʻo "Yuk-Yuk Duck," me kāna mau leka melemele ʻeleʻele a me ke aka ʻeleʻele, paʻakikī, hoʻoneʻe e hoʻokiʻekiʻe iā ia mai ke kua a hana i ka hoʻopunipuni o ka hohonu.
Ua ʻike mua paha ʻoe e ʻae ana ke aka kikokiko i nā waiwai ʻehā: (1) ʻāpae a me (2) nā hoʻopiʻi kūʻokoʻa, (3) blur, a me (4) kahi waihoʻoluʻu hiki ke paʻa a semi-transparent. Hiki ke kūpono a maikaʻi ʻole paha kēlā mau waiwai offset, no laila hiki iaʻu ke hana hou i ka "Yuk-Yuk Duck" me ka hoʻohana ʻana i kahi aka paʻakikī i huki ʻia i lalo a i ka ʻākau: kala: #f7f76d; kikokiko-aka: 5px 5px 0 #1e1904;
Ma ka ʻaoʻao ʻē aʻe, ʻokoʻa ka manaʻo o kēia poʻo inoa "Pint Giant" me kona malu semi-soft maikaʻi ʻole: kala: #c2a872; kikokiko-aka: -7px 5px 0 #b100e, 0 -5px 10px #546c6f;
No ka hoʻonui i ka hohonu a me ka hana ʻana i nā hopena hoihoi, hiki iaʻu ke kau i nā aka he nui. No ka "Let's Duck Out," hoʻohui au i ʻehā aka: ʻo ka mua he aka paʻa me ka hoʻoneʻe ʻino ʻole e hoʻokiʻekiʻe i ke kikokikona mai ke kua, a ukali ʻia e nā aka mālie e hana i ka pōpopo a puni: kala: #6F4D80; kikokiko-aka: -5px5px 0 #260e1e, /* Aka 1 */ 0 0 15px #e9ce96, /* Aka 2 */ 0 0 30px #e9ce96, /* Aka 3 */ 0 0 30px #e9ce96; /* Malu 4 */
Hōʻike kēia mau aka i ka hoʻohana ʻana i nā kikokikona-shadow ʻaʻole wale i ka hana ʻana i nā hopena kukui, no ka mea hiki iā lākou ke hoʻonani a hoʻohui i ke ʻano. Kaha kikokiko Nui nā kāleka poʻo kiʻi kiʻi i loaʻa nā leka me kahi kikoʻī wiwo ʻole e kū ai lākou mai ke kua. Hiki iaʻu ke hana hou i kēia hopena me ka hoʻohana ʻana i ka text-stroke. No ka manawa lōʻihi, loaʻa wale kēia waiwai ma o ka -webkit- prefix, akā ʻo ia hoʻi ke kākoʻo ʻia nei ma nā polokalamu kele pūnaewele hou.
ʻO ke kikokiko-stroke kahi pōkole no nā waiwai ʻelua. ʻO ka mua, kikokiko-paʻi-ākea, kahakiʻi i ka ʻaoʻao a puni nā leka pākahi, ʻoiai ka lua, kikokiko-stroke-color, e hoʻomalu i kona kala. No ka "Whatever Goes Pup," ua hoʻohui au i ka 4px blue stroke i ka kikokikona melemele: kala: #eff0cd; -webkit-text-stroke: 4px #7890b5; kāʻili kikokikona: 4px #7890b5;
Hiki ke hoʻohana nui ʻia nā hahau ke hui pū ʻia me nā aka, no laila, no ka "Growing, Growing, Gone," ua hoʻohui au i kahi paʻi 3px lahilahi i kahi aka 1px i pohō ʻole e hana i kēia hopena kikokikona ʻekolu. kala: #fbb999; kikokiko-aka: 3px 5px 1px #5160b1; -webkit-text-stroke: 3px #984336; kikokiko-paʻi: 3px #984336;
Kauoha Pena ʻAʻole hiki i ka hoʻohana ʻana i nā huaʻōlelo i ka hopena i manaʻo ʻia, ʻoi aku ka nui me nā leka ʻoi aku ka lahilahi a me nā kaha ʻoi aku ka mānoanoa, no ka mea, ma ke ʻano maʻamau, e huki ka polokalamu i kahi hahau ma luna o ka piha. ʻO ka mea kaumaha, ʻaʻole ʻae ʻo CSS iaʻu e hoʻoponopono i ka hoʻokomo ʻana i ka hahau e like me kaʻu e hana pinepine ai ma Sketch. Eia naʻe, loaʻa nā waiwai o ka waiwai kauoha pena e hiki ai iaʻu ke kau i ka hahau ma hope, ma mua o ke alo o ka hoʻopiha.
paint-order: pena ka hahau i ka hahau mua, a laila ka hoʻopiha, aʻo ka paint-order: fill ke kūʻē. kala: #fbb999; paint-order: hoʻopiha; kikokiko-aka: 3px 5px 1px #5160b1; kala-kala kikokikona:#984336; kikokiko-paʻi-ākea: 3px;
ʻO ka hahau maikaʻi e hiki ke heluhelu ʻia nā leka, hoʻohui i ke kaumaha, a - ke hui pū ʻia me nā aka a me ke ʻano pena - hāʻawi i kahi kikokikona palahalaha. Nā Kūlana i loko o ke kikokikona ʻOi aku ka nui o nā kāleka poʻo kiʻi kiʻi ma mua o ka waihoʻoluʻu palahalaha ma ka hoʻohui ʻana i ke ʻano, nā gradients, a i ʻole nā kikoʻī kikoʻī i ka leka. I kekahi manawa he ʻano ia, ʻo kekahi manawa he gradient me kahi hoʻololi tonal maʻalahi. Ma ka pūnaewele, hiki iaʻu ke hana hou i kēia hopena me ka hoʻohana ʻana i ke kiʻi kāʻei kua a i ʻole gradient ma hope o ke kikokikona, a laila ʻokiʻoki i ke ʻano o nā leka. Ke hilinaʻi nei kēia i ʻelua mau waiwai e hana pū ana: background-clip: kikokikona a me kikokiko-fill-color: transparent.
ʻO ka mua, hoʻopili wau i kahi kāʻei hope ma hope o ka kikokikona. Hiki iā ia ke kiʻi bitmap a i ʻole kiʻi vector a i ʻole kahi gradient CSS. No kēia hiʻohiʻona mai ka moʻolelo ʻo Quick Draw McGraw "Baba Bait," aia i loko o ke poʻo inoa kahi ʻanuʻu maʻalahi ma luna-lalo mai ka pōʻeleʻele a i ka mālamalama: hope: linear-gradient(0deg, #667b6a, #1d271a);
A laila, paʻi au i kēlā ʻaoʻao i nā glyphs a hoʻokaʻawale i ka kikokikona i hōʻike ʻia ke kāʻei kua ma o: -webkit-background-clip: kikokikona; -webkit-text-fill-color: akaka;
Me kēlā mau laina ʻelua wale nō, ʻaʻole i pena hou ʻia ke kua ma hope o ke kikokikona; akā, ua pena ʻia i loko. Hoʻohana maikaʻi kēia ʻenehana i ka hui ʻana me nā paʻi a me nā aka. Hāʻawi ke ʻoniʻoni ʻokiʻoki i ka leka me ka waihoʻoluʻu a me ke ʻano, ʻoi aku ka ʻoi o ka paʻi ʻana i kona mau ʻaoʻao, a hoʻokiʻekiʻe ke aka mai ke kua. Hoʻohui like, hana hou lākou i ka nānā ʻana o nā kāleka poʻo lima i pena ʻia me ka hoʻohana ʻana i kahi CSS liʻiliʻi. E like me ka manawa mau, e ho'āʻo pono i nā kikokikona i ʻoki ʻia, no ka mea, hiki i nā quirks polokalamu kele i kekahi manawa ke hoʻopilikia i nā aka a me ka hana. Wehewehe i ke kikokikona i loko o ke kanaka I kekahi manawa ʻaʻole wau makemake e kāhiko i kahi huaʻōlelo a i ʻole poʻomanaʻo. Makemake au e kāhiko i nā leka hoʻokahi - e hoʻohuli i kahi ʻano i kahi, hāʻawi i hoʻokahi glyph kaumaha hou, a i ʻole e hoʻolalelale i kekahi mau leka ma ke kaʻawale. Ma HTML a me CSS maʻamau, hoʻokahi wale nō ala hilinaʻi e hana ai: e hoʻopili i kēlā me kēia ʻano i loko o kāna ʻano kikoʻī. Hiki iaʻu ke hana i kēlā me ka lima, akā he palupalu, paʻakikī ke mālama, a e hāʻule koke i ka wā e loli ai ke kope. Akā, ke makemake au i ka mana o kēlā me kēia leka, hoʻohana au i kahi waihona hoʻokaʻawale kikokikona e like me splt.js (ʻoiai aia nā mea hoʻonā ʻē aʻe). Lawe kēia i kahi node kikokikona a hoʻopili maʻalahi i nā huaʻōlelo a i ʻole nā huaʻōlelo, e hāʻawi mai iaʻu i nā makau hou e hoʻolalelale a me ke ʻano me ka ʻole e hoʻopololei i kaʻu markup. He ala ia e mālama ai i kaʻu HTML e heluhelu a me ka semantic, ʻoiai e hāʻawi ana iaʻu i ka mana maikaʻi e pono ai iaʻu e hana hou i ka typography ʻano like ʻole āu e ʻike ai i nā kāleka poʻo inoa kiʻi kiʻi. Eia naʻe, hele mai kēia ala menā hōʻailona hiki ke loaʻa, ʻoiai ka nui o ka poʻe heluhelu pale e heluhelu i nā node kikokikona ma ke ʻano. No laila kēia:
HUM Sweet Hum
… heluhelu e like me kou manaʻo: Hum Sweet Hum
Akā ʻo kēia:
H u m
… hiki ke unuhi ʻokoʻa ma muli o ka polokalamu kele pūnaewele a me ka mea heluhelu pale. Hoʻohui kekahi i nā leka a heluhelu pono i nā huaʻōlelo. Hiki i nā poʻe ʻē aʻe ke hoʻomaha ma waena o nā leka, a ma kahi ʻano ʻino loa e like paha ke kani: “H…” “U…” “M…”
ʻO ka mea pōʻino, ʻaʻole hāʻawi kekahi mau ʻoluʻolu hoʻokaʻawale i kahi hopena hiki ke loaʻa mau, no laila ua kākau wau i kaʻu ʻatikala ponoʻī, splinter.js, aia i ka beta i kēia manawa. Hoʻololi i nā leka pākahi No ka ho'ā ʻana i kaʻu Toon Text Splitter, hoʻohui au i kahi ʻano-data i ka mea aʻu e makemake ai e hoʻokaʻawale:
Hum Sweet Hum
ʻO ka mea mua, hoʻokaʻawale kaʻu palapala i kēlā me kēia huaʻōlelo i nā leka pākahi a hoʻopaʻa iā lākou i kahi ʻāpana span me ka papa a me nā ʻano ARIA i hoʻopili ʻia:
A laila lawe ka palapala i ka ʻike mua o ka mea hoʻokaʻawale a hoʻohui iā ia ma ke ʻano he aria e kōkua i ka mālama ʻana i ka hiki:
Me kēlā mau hiʻohiʻona papa i hoʻopili ʻia, a laila hiki iaʻu ke hana i nā huaʻōlelo pākahi e like me kaʻu e koho ai.
No ka laʻana, no "Hum Sweet Hum," makemake wau e hoʻohuli i ka neʻe ʻana o kāna mau leka mai ka papa kuhikuhi. Ma hope o ka hoʻohana ʻana i kaʻu Toon Text Splitter, ua hoʻohana au i ʻehā mau waiwai unuhi ʻokoʻa me ka hoʻohana ʻana i nā mea koho:nth-child e hana i kahi nānā semi-random: /* 4, 8, 12... */ .toon-char:nth-child(4n) { unuhi: 0 -8px; } /* 1, 5, 9... */ .toon-char:nth-child(4n+1) { unuhi: 0 -4px; } /* 2, 6, 10... */ .toon-char:nth-child(4n+2) { unuhi: 0 4px; } /* 3, 7, 11... */ .toon-char:nth-child(4n+3) { unuhi: 0 8px; }
Akā ʻo ka unuhi hoʻokahi wale nō waiwai hiki iaʻu ke hoʻohana no ka hoʻololi ʻana i kaʻu kikokikona toon.
Hiki iaʻu ke hoʻololi i kēlā mau huaʻōlelo no kahi hiʻohiʻona hou aʻe: /* 4, 8, 12... */ .toon-line .toon-char:nth-child(4n) { rotate: -4deg; } /* 1, 5, 9... */ .toon-char:nth-child(4n+1) { hoʻololi: -8deg; } /* 2, 6, 10... */ .toon-char:nth-child(4n+2) { huli: 4deg; } /* 3, 7, 11... */ .toon-char:nth-child(4n+3) { huli: 8deg; }
Akā ʻo ka unuhi hoʻokahi wale nō waiwai hiki iaʻu ke hoʻohana no ka hoʻololi ʻana i kaʻu kikokikona toon. Hiki iaʻu ke hoʻololi i kēlā mau huaʻōlelo no kahi hiʻohiʻona hou aʻe: /* 4, 8, 12... */ .toon-line .toon-char:nth-child(4n) { kahuli: -4deg; }
/* 1, 5, 9... */ .toon-char:nth-child(4n+1) { kahuli: -8deg; }
/* 2, 6, 10... */ .toon-char:nth-child(4n+2) { kahuli: 4deg; }
/* 3, 7, 11... */ .toon-char:nth-child(4n+3) { kahuli: 8deg; }
A, ʻoiaʻiʻo, hiki iaʻu ke hoʻohui i nā animations e hoʻopololei i kēlā mau huaʻōlelo a hoʻōla i kaʻu mau poʻo inoa kiʻi toon i ke ola. ʻO ka mea mua, ua hana wau i kahi animation keyframe e hoʻololi i nā huaʻōlelo:
@keyframes hu'i { 0%, 100% { hoʻololi: hoʻololi (var(--kumu-hoʻololi, 0deg)); } 25% { hoʻololi: hoʻololi (calc(var(--kumu-hoʻololi, 0deg) + 3deg)); } 50% { hoʻololi: hoʻololi (calc(var(--kumu-hoʻololi, 0deg) - 2deg)); } 75% { hoʻololi: hoʻololi (calc(var(--kumu-hoʻololi, 0deg) + 1deg)); } }
Ma mua o ka hoʻohana ʻana iā ia i nā mea span i hana ʻia e kaʻu Toon Text Splitter: .toon-char { animation: jiggle 3s pau ole ka oluolu-i-waho; transform-kumu: waena waena; }
A ʻo ka mea hope loa, e hoʻonohonoho i ka nui o ka hoʻololi ʻana a me kahi lohi ma mua o ka hoʻomaka ʻana o kēlā me kēia ʻano e jiggle: .toon-char:nth-child(4n) { --hoʻololi-kumu: -2deg; } .toon-char:nth-child(4n+1) { --hoʻololi-kumu: -4deg; } .toon-char:nth-child(4n+2) { --hoʻololi-kumu: 2deg; } .toon-char:nth-child(4n+3) { --hoʻololi-kumu: 4deg; }
.toon-char:nth-child(4n) { animation-lohi: 0.1s; } .toon-char:nth-child(4n+1) { animation-lohi: 0.3s; } .toon-char:nth-child(4n+2) { animation-hoʻopaneʻe: 0.5s; } .toon-char:nth-child(4n+3) { animation-lohi: 0.7s; }
Hoʻokahi Pāʻani e hana i kahi manaʻo Hoʻokahi kiʻi kiʻi ka poʻo kiʻi kiʻi kiʻi e hōʻike ai i ka manaʻo, a ʻo kā lākou kiʻi kiʻi i mea nui e like me ka hana kiʻi a lākou i pena ai. Pēlā nō ma ka pūnaewele. He poʻomanaʻo i hoʻolālā maikaʻi ʻiaPono ka ʻāpana i ka mālamalama, ke ʻano, a me ka hilinaʻi - ʻaʻole wale he kiʻi kāʻei piha ākea piha. Me kekahi mau waiwai CSS i koho maikaʻi ʻia - nā aka, nā ʻōpala, nā kāʻei kua ʻoki ʻia, a me nā ʻano hana i kāohi ʻia - hiki iā mākou ke hana hou i kēlā hopena like. Makemake au i ka kikokikona toon ʻaʻole no ka mea nostalgic wau, akā no ka manaʻo o kāna hoʻolālā. E hana i nā koho noʻonoʻo, a e hoʻohui i ka typography kikokikona liʻiliʻi i kāu mau hoʻolālā.
