Kamora ho qeta projeke e neng e hloka hore ke ithute sohle seo nka se khonang ka li-animation tsa CSS le SVG, ke ile ka qala ho ngola letoto lena mabapi le Smashing Animations le "How Classic Cartoons Inspire Modern CSS." Ho qeta selemo sena, ke batla ho u bontša mokhoa oa ho sebelisa CSS ea sejoale-joale ho theha ntho e etsang hore Litlotla tsa Toon li be le tšusumetso e kholo: typography ea tsona. Sehlooho sa Moqapi oa Litšoantšo Mehleng e khutsitseng ea bo-1920 le mathoasong a lilemo tsa bo-1930, ho thaepa ha karete ea sehlooho ea filimi ho ile ha etsa hore batho ba thabe, ba behele boemo, ’me ba hopotsa bamameli ka mofuta oa filimi eo ba neng ba e lefile hore ba e shebelle.
Likarete tsa sehlooho tsa lipopae le tsona li ne li tšoaea, maikutlo, le tlhophiso ea liketsahalo, kaofela li entsoe e le 'ngoe. Lilemong tsa pele, ha lichelete tse kholo tsa studio li ne li le kholoanyane, likarete tsena tsa sehlooho hangata e ne e le litšoantšo le litšoantšo.
Empa ha thelevishene e ntse e phahama lilemong tsa bo-1950, litekanyetso tsa lichelete li ile tsa theoha, ’me likarete tse entsoeng ke litsebi tse kang Lawrence “Art” Goble li ile tsa amohela puo e ncha e bonahalang, ea e-ba e hlakileng haholoanyane, e entsoeng ka setaele le e sa rarahanang haholo. Tlhokomeliso: Lawrence "Art" Goble ke e mong oa bahale ba atisang ho hlokomolohuoa ba lipopae tsa Amerika tsa bohareng ba lekholo la lilemo. O ile a sebeletsa Hanna-Barbera haholo-holo lilemong tsa eona tse nang le tšusumetso e kholo lilemong tsa bo-1950 le bo-1960. Goble e ne e se sebapali sa libapali. Karolo ea hae e ne e le ho theha sepakapaka, kahoo o ile a theha tikoloho bakeng sa The Flintstones, Huckleberry Hound, Quick Draw McGraw, le Yogi Bear, hammoho le likarete tsa sehlooho tse qalang tse behang molumo. Likarete tsa hae tsa sehlooho, tse nang le litšoantšo tse takiloeng tse nang le lets'oao le manehiloeng, li thusitse ho hlalosa chebahalo ea Hanna-Barbera. Mosebetsi oa bonono oa Goble oa libapali tse kang Quick Draw McGraw le Yogi Bear o ne o sebetsa hantle likrineng tse nyane tsa TV. Sebakeng sa ho hlahisa sets'oants'o sa katuni, o tsepamisitse maikutlo ho hlahiseng mohopolo o le mong, o matla - hangata ka silhouette - e hapileng moelelo oa eona. Ho "Buzzin' Bear," Yogi o lla ka helikopthara. Oa fofa, a tšoere baskete ea pic-a-nic ka letsoho, ka "Bear on Picnic," le bakeng sa "Tshabo ea hae ea Ntoa ea Moputso," Yogi e beha lebokose la sehlooho.
Ka ts'ebetso e nyane kapa e se nang letho ea ho itšetleha ka eona, liforeimi tse le 'ngoe tsa Goble li ile tsa tlameha ho theha maikutlo, ho beha boemo le ho hlalosa pale. Ba entse sena ba sebelisa mebala e bataletseng, libopeho tsa litšoantšo, le typography e neng e atisa ho kopanngoa le litšoantšo.
Joaloka baqapi ba sebetsang marang-rang, litlotla tsa toon li ka re ruta ho hongata mabapi le mokhoa oa ho fetisa botho ba mofuta, ho hlahisa maikutlo a pele, le ho beha litebello tsa boiphihlelo ba motho ka sehlahisoa kapa sebaka sa marang-rang. Re ka ithuta ho tsoa mekhoeng ea baetsi ba litšoantšo ho theha lifolakha tse sebetsang hantle, lihlooho tsa maqephe a lulang, esita le li-skrini tse ntle tsa khale tsa splash. Toon Title Typography Likarete tsa sehlooho tsa lipopae li bontša kamoo ho kopanya mofuta le litšoantšo ho fanang ka tlhoko ea hlooho kapa mohale. Ka mantsoe a seng makae a mongolo, mongolo, le maqheka a ho fetola, CSS ea sejoale-joale e u thusa ho sebelisa matla a tšoanang.
Jenereithara ea Sehlooho sa Toon Text Ha ke ntse ke ngola sengoloa sena, ke hlokometse hore ho tla ba molemo ho ba le sesebelisoa sa ho hlahisa mongolo o ngotsoeng joalo ka litlotla tsa lipopae tseo ke li ratang haholo. Kahoo ke entse e 'ngoe. Jenereithara ea sehlooho sa My Toon Text e u lumella ho leka mebala, liropo le meriti e mengata ea mongolo. O ka fetola tatellano ea pente, oa sebelisa sebaka sa litlhaku, oa sheba mongolo oa hau molemong oa sampole, ebe u kopitsa CSS e hlahisitsoeng ka kotloloho ho clipboard ea hau ho e sebelisa morerong. Toon Sehlooho sa CSS U ka kopitsa feela-ho beha CSS eo Toon Text Title Generator e u fang eona. Empa ha re shebeng haholoanyane seo e se etsang. Moriti oa mongolo Sheba mofuta oa sehlooho sena ho tsoa karolong ea Augie Doggie "Yuk-Yuk Duck," e nang le litlhaku tse mosehla o mosehla le moriti o lefifi, o thata, o o tlosang ka morao 'me o etsa hore ho be le maikutlo a tebileng.
Mohlomong u se u ntse u tseba hore mongolo-moriti o amohela litekanyetso tse 'ne: (1) tse tšekaletseng le (2) li-offsets tse otlolohileng, (3) blur, le (4) 'mala o ka ba o tiileng kapa o hlakileng. Litekanyetso tseo tsa offset e ka ba tse ntle kapa tse mpe, kahoo nka etsa "Yuk-Yuk Duck" ka ho sebelisa moriti o thata o theoleloang tlase le ho le letona: mmala: #f7f76d; mongolo-moriti: 5px 5px 0 #1e1904;
Ka lehlakoreng le leng, sehlooho sena sa "Pint Giant" se na le maikutlo a fapaneng le moriti oa sona o mobe oa semi-soft: mmala: #c2a872; mongolo-moriti: -7px 5px 0 #b100e, 0 -5px 10px #546c6f;
Ho eketsa botebo bo eketsehileng le ho theha litlamorao tse khahlisang, nka beha meriti e mengata. Bakeng sa "Ha re Letata," ke kopanya meriti e mene: ea pele ke seriti se tiileng se nang le lehlakore le lebe le otlolohileng ho phahamisa mongolo ka morao, 'me se lateloe ke meriti e ntseng e tsoela pele e bonolo ho etsa lerootho ho e potoloha. mmala: #6F4D80; mongolo-moriti: -5px5px 0 #260e1e, /* Shadow 1 */ 0 0 15px #e9ce96, /* Shadow 2 */ 0 0 30px #e9ce96, /* Shadow 3 */ 0 0 30px #e9ce96; /* Moriti 4 */
Meriti ena e bontša hore ho sebelisa mongolo-moriti ha se feela ho theha liphello tsa mabone, kaha li ka boela tsa khabisa le ho eketsa botho. Mongolo oa Stroke Likarete tse ngata tsa sehlooho tsa lipopae li na le litlhaku tse nang le kemiso e matla e etsang hore li hlahelle ka morao. Ke khona ho etsa sena hape ka ho sebelisa mongolo oa mongolo. Ka nako e telele, thepa ena e ne e fumaneha feela ka sehlomathiso sa -webkit-, empa ho boetse ho bolela hore e se e tšehetsoa ho libatli tsa sejoale-joale.
text-stroke ke shorthand bakeng sa thepa tse peli. Ea pele, e bophara ba mongolo, e hula kholumo ho pota-pota litlhaku ka bomong, ha ea bobeli, e bitsoang text-stroke-color, e laola 'mala oa eona. Bakeng sa "Eng kapa eng e eang Pup," ke kentse 4px blue stroke ho mongolo o mosehla: mmala: #eff0cd; -webkit-text-stroke: 4px #7890b5; mongolo-stroke: 4px #7890b5;
Liropo li ka ba molemo haholo ha li kopantsoe le meriti, kahoo bakeng sa "Ho Hōla, Ho Hōla, Ho Felile," ke kentse sekhahla se tšesaane sa 3px ho moriti o sa hlakang oa 1px ho theha phello ena ea mongolo oa mahlakore a mararo: mmala: #fbb999; mongolo-moriti: 3px 5px 1px #5160b1; -webkit-text-stroke: 3px #984336; mongolo-stroke: 3px #984336;
Taelo ea Penta Ho sebelisa text-stroke hase kamehla ho hlahisang sephetho se lebeletsoeng, haholo-holo ka litlhaku tse tšesaane le lichapo tse teteaneng, hobane ka ho sa feleng sebatli se hula sekhahla holim'a ho tlatsa. Ka masoabi, CSS e ntse e sa ntumelle ho fetola boemo ba stroke joalo ka ha ke etsa ho Sketch. Leha ho le joalo, thepa ea ho penta e na le litekanyetso tse ntumellang ho beha leqeba ka morao, ho e-na le ka pele, ho tlatsa.
tatellano ea pente: stroke e penta stroke pele, ebe e tlatsa, athe taelo ea pente: tlatsa e etsa se fapaneng: mmala: #fbb999; pente-taelo: tlatsa; mongolo-moriti: 3px 5px 1px #5160b1; mongolo-stroke-color:#984336; bophara ba mongolo: 3px;
Stroke e sebetsang e etsa hore litlhaku li balehe, li eketsa boima ba 'mele, 'me - ha li kopantsoe le meriti le tatellano ea pente - li fana ka mongolo o bataletseng. Semelo se ka Hare Temana Likarete tse ngata tsa sehlooho tsa lipopae li fetela ka nqane ho 'mala o bataletseng ka ho eketsa moetso, li-gradients, kapa lintlha tse nang le litšoantšo ho mongolo. Ka linako tse ling seo ke sebopeho, ka linako tse ling e ka 'na ea e-ba gradient e nang le phetoho e poteletseng ea tonal. Tepong, ke khona ho bopa phello ena ka ho sebelisa setšoantšo sa bokamorao kapa gradient ka morao ho mongolo, ebe ke e khella ho sebopeho sa litlhaku. Sena se ipapisitse le lisebelisoa tse peli tse sebetsang 'moho: sekoaelo sa morao-rao: mongolo le 'mala oa ho tlatsa mongolo: transparent.
Ntlha ea pele, ke sebelisa semelo ka morao ho temana. Sena e ka ba setšoantšo sa bitmap kapa vector kapa gradient ea CSS. Bakeng sa mohlala ona ho tsoa lenaneong la Quick Draw McGraw "Baba Bait," temana ea sehlooho e na le gradient e poteletseng ea holimo-tlase ho tloha lefifing ho ea ho leseli: bokamorao: linear-gradient(0deg, #667b6a, #1d271a);
Ka mor'a moo, ke qolla semelo seo ho li-glyphs ebe ke etsa hore mongolo o be pepeneneng e le hore bokamorao bo bontše ka: -webkit-background-clip: mongolo; -webkit-text-fill-color: transparent;
Ka mela eo e 'meli feela, bokamorao ha bo sa penta ka morao ho mongolo; ho e-na le hoo, e pentiloe ka hare ho eona. Mokhoa ona o sebetsa hantle haholo ha o kopantsoe le lichapo le meriti. Mothapo o sehiloeng o etsa hore mongolo o be le 'mala le mokhabiso, stroke se boloka mathōko a sona a le bohale, 'me moriti oa o phahamisa ho tloha ka morao. Mmoho, ba bopa chebahalo ea likarete tsa sehlooho tse pentiloeng ka letsoho ba sa sebelise letho haese CSS e nyane. Joalo ka mehla, mongolo o kentsoeng ka hloko ka hloko, kaha li-browser quirks ka linako tse ling li ka ama meriti le phepelo. Ho Arola Sengoloa Ka Litlhaku Ka Mong Ka linako tse ling ha ke batle ho ngola lentsoe kapa sehlooho kaofela. Ke batla ho seta litlhaku ka bomong - ho suthisetsa sebapali sebakeng, ho fa glyph e le 'ngoe boima bo eketsehileng, kapa ho phelisa litlhaku tse 'maloa ka boikemelo. Ka HTML e hlakileng le CSS, ho na le tsela e le 'ngoe feela e tšepahalang ea ho etsa joalo: thatela sebapali se seng le se seng ka karolo ea sona ea span. Ke ne ke khona ho etsa joalo ka letsoho, empa seo se ne se tla fokola, ho le thata ho se hlokomela, 'me se ne se tla senyeha kapele ha kopi e fetoha. Ho e-na le hoo, ha ke hloka taolo ea lengolo ka leng, ke sebelisa laebrari ea ho arola mongolo joaloka splt.js (le hoja litharollo tse ling li le teng). Sena se nka node ea mongolo 'me e phuthela mantsoe kapa litlhaku ka bo eona, e mpha lihakisi tse eketsehileng tsa ho phelisa le mokhoa oa ho ngola ntle le ho senya markup ea ka. Ke mokhoa o bolokang HTML ea ka e baloa le ho utloahala, ha e ntse e mpha taolo e ntle eo ke e hlokang ho etsa typography e sa lekanang, e nang le litlhaku tseo u li bonang likareteng tsa sehlooho tsa lipopae. Leha ho le joalo, mokhoa ona o tsamaea lelitemoso tsa phihlello, kaha babali ba bangata ba skrineng ba bala li-node tsa mongolo ka tatellano. Kahoo sena:
Hum Sweet Hum
... e bala kamoo o neng o ka lebella: Hum e monate e monate
Empa sena:
H u m
…e ka hlalosoa ka tsela e fapaneng ho latela sebatli le sebali sa skrine. Ba bang ba tla kopanya litlhaku ebe ba bala mantsoe ka nepo. Ba bang ba ka khefutsa lipakeng tsa litlhaku, tseo maemong a mabe ka ho fetesisa li ka utloang eka: “H…” “U…” “M…”
Ka masoabi, litharollo tse ling tse arohaneng ha li fane ka sephetho se fumanehang kamehla, ka hona ke ngotse splitter ea ka ea mongolo, splinter.js, eo hajoale e leng beta. Ho Fetola Mangolo a Motho ka Mong Ho kenya tšebetsong Toon Text Splitter ea ka, ke eketsa tšobotsi ea data ho ntho eo ke batlang ho e arola:
Hum Sweet Hum
Taba ea pele, sengoloa sa ka se arola lentsoe le leng le le leng ka litlhaku tse ikemetseng ebe se li phuthela ka karolo ea span e nang le litšoaneleho tsa sehlopha le ARIA tse sebelisitsoeng:
Sengoliloeng se nka litaba tsa mantlha tsa karolo e arohaneng ebe se e eketsa e le tšobotsi ea aria ho thusa ho boloka phihlello:
Ha litšoaneleho tseo tsa sehlopha li sebelisoa, ke khona ho ngola litlhaku ka bomong kamoo ke khethang.
Mohlala, bakeng sa "Hum Sweet Hum," ke batla ho pheta tsela eo litlhaku tsa eona li tlohang ho tloha qalong. Kamora ho sebelisa Toon Text Splitter, ke sebelisitse lintlha tse 'ne tse fapaneng tsa ho fetolela ke sebelisa likhetho tse' maloa tsa :nth-child ho theha chebahalo e sa tloaelehang: /* 4th, 8th, 12th... */ .toon-char:nth-child(4n) { fetolela: 0 -8px; } /* 1st, 5th, 9th... */ .toon-char:nth-child(4n+1) { fetolela: 0 -4px; } /* Ea 2, 6, 10... */ .toon-char:nth-child(4n+2) { fetolela: 0 4px; } /* 3rd, 7th, 11th... */ .toon-char:nth-child(4n+3) { fetolela: 0 8px; }
Empa phetolelo ke ntho e le 'ngoe feela eo nka e sebelisang ho fetola mongolo oa ka oa toon.
Ke ne ke khona ho fetola litlhaku tseo ka bomong bakeng sa chebahalo e ferekaneng le ho feta: /* 4th, 8th, 12th... */ .toon-line .toon-char:nth-child(4n) { potoloha: -4deg; } /* 1st, 5th, 9th... */ .toon-char:nth-child(4n+1) { potoloha: -8deg; } /* Ea 2, 6, 10... */ .toon-char:nth-child(4n+2) { potoloha: 4deg; } /* 3rd, 7th, 11th... */ .toon-char:nth-child(4n+3) { potoloha: 8deg; }
Empa phetolelo ke ntho e le 'ngoe feela eo nka e sebelisang ho fetola mongolo oa ka oa toon. Ke ne ke khona ho fetola litlhaku tseo ka bomong bakeng sa chebahalo e ferekaneng le ho feta: /* 4th, 8th, 12th... */ .toon-line .toon-char:nth-child(4n) { potoloha: -4deg; }
/* 1st, 5th, 9th... */ .toon-char:nth-child(4n+1) { potoloha: -8deg; }
/* Ea 2, 6, 10... */ .toon-char:nth-child(4n+2) { potoloha: 4 deg; }
/* 3rd, 7th, 11th... */ .toon-char:nth-child(4n+3) { ho potoloha: 8 deg; }
'Me, ehlile, nka eketsa lipopae ho fetola litlhaku tseo le ho etsa hore lihlooho tsa ka tsa mongolo oa toon li phele. Taba ea pele, ke thehile animation ea keyframe e potolohang litlhaku:
@keyframes jiggle { 0%, 100% {fetola: potoloha(var(--base-rotate, 0deg)); } 25% {fetola: potoloha (calc (var (--base-rotate, 0deg) + 3deg)); } 50% {fetola: potoloha(calc(var(--base-rotate, 0deg) - 2deg)); } 75% {fetola: potoloha(calc(var(--base-rotate, 0deg) + 1deg)); } }
Pele o e sebelisa ho likarolo tsa span tse entsoeng ke Toon Text Splitter ea ka: .toon-char { animation: jiggle 3s boiketlo bo sa feleng ba ho tsoa; phetoho-tšimoloho: tlase bohareng; }
Qetellong, ho beha palo ea potoloho le tieho pele sebapali se seng le se seng se qala ho sisinyeha: .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-tieho: 0.1s; } .toon-char:nth-child(4n+1) { animation-tieho: 0.3s; } .toon-char:nth-child(4n+2) { animation-tieho: 0.5s; } .toon-char:nth-child(4n+3) { animation-tieho: 0.7s; }
Moralo o le Mong oa ho Etsa Maikutlo Baetsi ba sehlooho sa lipopae ba ne ba e-na le foreimi e le 'ngoe ea ho khahla, 'me typography ea bona e ne e le ea bohlokoa joalo ka litšoantšo tseo ba neng ba li taka. Ho joalo le ka marang-rang. Sehlooho se entsoeng hantle kapa mohalesebaka se hloka ho hlaka, sebopeho, le boits'epo - eseng feela setšoantšo sa bokamorao se felletseng. Ka lisebelisoa tse 'maloa tse khethiloeng ka hloko tsa CSS - meriti, liropo, semelo se khutsitsoeng, le lipopae tse thibetsoeng - re ka etsa ts'ebetso e tšoanang hape. Ke rata mongolo oa toon eseng hobane ke le nostalgic, empa hobane moralo oa ona o ikemiselitse. Etsa likhetho tsa ka boomo, 'me u lumelle mongolo o monyane oa toon typography hore o eketse meralo ea hau.
