Ngemva kokuphothula iphrojekthi eyayidinga ukuthi ngifunde konke engangingakwenza mayelana ne-CSS ne-SVG animations, ngaqala ukubhala lolu chungechunge olumayelana ne-Smashing Animations kanye “Nendlela Opopayi Bakudala Abakhuthaza Ngayo I-CSS Yesimanje.” Ukuqeda kulo nyaka, ngifuna ukukukhombisa ukuthi ungasebenzisa kanjani i-CSS yesimanje ukuze udale leyo ngxenye eyenza izihloko ze-Toon zibe nomthelela omkhulu: ukuthayipha kwazo. Isihloko Idizayini Yobuciko Enkathini ethule yama-1920s nasekuqaleni kwawo-1930, ukunyatheliswa kwekhadi lesihloko sefilimu kwadala isimo sengqondo, kwamisa isimo, futhi kwakhumbuza izethameli ngohlobo lwefilimu ezikhokhe ukuze ziyibone.
Amakhadi esihloko sekhathuni nawo abengamabhrendi, ukuma kwenhliziyo, kanye nokuhlelwa kwesigameko, konke kuhlanganiswe ndawonye. Eminyakeni yokuqala, lapho amabhajethi amakhulu estudio ayemakhulu, lawa makhadi esihloko ayevame ukuba yimifanekiso futhi ependa.
Kodwa lapho ithelevishini idlondlobala ngawo-1950, isabelomali sehla, futhi amakhadi aklanywe amaciko afana no-Lawrence “Art” Goble amukela ulimi olusha olubonakalayo, oluba ingcaca, olunesitayela, futhi lube lukhuni kancane. Qaphela: U-Lawrence “Art” Goble ungomunye wamaqhawe avame ukunganakwa opopayi baseMelika bamaphakathi nekhulu leminyaka. Usebenzele kakhulu i-Hanna-Barbera phakathi neminyaka yayo eyayinethonya elikhulu ngeminyaka yawo-1950 nawo-1960. U-Goble wayengeyena umlingisi ogqwayizayo. Indima yakhe kwakuwukudala umoya, ngakho waklama izindawo ze-The Flintstones, i-Huckleberry Hound, i-Quick Draw McGraw, ne-Yogi Bear, kanye namakhadi esihloko sokuvula abeka ithoni. Amakhadi akhe esihloko, afaka imidwebo enophawu olumboziwe, asize ukuchaza ukubukeka kwesithonjana kuka-Hanna-Barbera. Umsebenzi wobuciko ka-Goble wezinhlamvu ezifana ne-Quick Draw McGraw kanye ne-Yogi Bear ubusebenza kahle kuzikrini ze-TV ezincane. Kunokuba akhiqize kabusha isithombe esimile esivela kukhathuni, wagxila ekwethuleni umbono owodwa, oqinile - ngokuvamile owenziwe nge-silhouette - owathwebula ingqikithi yawo. Ku-“The Buzzin’ Bear,” u-Yogi ubhuza ngendiza enophephela emhlane. Uyagxuma, ubhasikidi we-pic-a-nic esandleni, kokuthi “Bear on a picnic,” kanye nethi “Prize Fight Fright,” i-Yogi ifaka amabhokisi ombhalo wesihloko.
Ngomnyakazo omncane noma ongenakho ukuthembela kuwo, ozimele be-Goble bekufanele bakhe isimo, bamise isigameko, futhi bachaze indaba. Lokhu bakwenze ngokusebenzisa imibala eyisicaba, ubujamo bezithombe, kanye ne-typography eyayivame ukuhlanganiswa emsebenzini wobuciko.
Njengabaklami abasebenza kuwebhu, izihloko ze-toon zingasifundisa okuningi mayelana nendlela yokudlulisa ubuntu bomkhiqizo, ukwenza umbono wokuqala, futhi sibeke okulindelekile kokuhlangenwe nakho kothile kusetshenziswa umkhiqizo noma iwebhusayithi. Singafunda kumasu amaciko okudala izibhengezo ezisebenzayo, izihloko zekhasi lokubikezela, kanye nezikrini ezinhle ze-splash zemfashini. I-Toon Title Typography Amakhadi esihloko sekhathuni abonisa indlela ukuhlanganisa uhlobo nesithombe okuletha ngayo inhlokweni noma edingwa yiqhawe. Ngesithunzi sombhalo esimbalwa, i-text-stroke, namaqhinga okuguqula, i-CSS yesimanje ikuvumela ukuthi ungene kulawo mandla afanayo.
I-Toon Text Title Generator Ngemva kokubhala lesi sihloko, ngabona ukuthi kungaba usizo ukuba nethuluzi lokukhiqiza umbhalo obhalwe njengezihloko zekhathuni engizithanda kakhulu. Ngakho ngenza eyodwa. I-My Toon Text Title Generator ikuvumela ukuthi uhlole imibala, imivimbo, nezithunzi zombhalo eziningi. Ungalungisa ukuhleleka kopende, usebenzise isikhala sezinhlamvu, uhlole kuqala umbhalo wakho ekukhethweni kwamafonti esampula, bese ukopisha i-CSS ekhiqiziwe ngokuqondile ebhodini lakho lokunamathisela ukuze uyisebenzise kuphrojekthi. Isihloko se-Toon CSS Ungamane ukopishe-unamathisele i-CSS ohlinzekwa yi-Toon Text Title Generator. Kodwa ake sibhekisise ukuthi lenzani. Isithunzi sombhalo Bheka uhlobo olukulesi sihloko esiqeshini sika-Augie Doggie esithi “Yuk-Yuk Duck,” esinezinhlamvu zalo eziphuzi ngokuphaphathekile nesithunzi esimnyama, esiqinile, esisisusayo esisisusa ngemuva futhi sidale inkohliso yokujula.
Cishe usuyazi kakade ukuthi isithunzi sombhalo samukela amanani amane: (1) ama-horizontal kanye (2) nama-offset aqondile, (3) ukufiphala, kanye (4) nombala ongaba oqinile noma okhanye kancane. Lawo manani e-offset angaba positive noma abe negethivu, ngakho ngingakwazi ukuphindaphinda okuthi “Yuk-Yuk Duck” ngisebenzisa isithunzi esiqinile esidonswe phansi kwesokudla: umbala: #f7f76d; umbhalo-isithunzi: 5px 5px 0 #1e1904;
Ngakolunye uhlangothi, lesi sihloko esithi "Pint Giant" sinomuzwa ohlukile nesithunzi saso esingesihle esithambile: umbala: #c2a872; umbhalo-isithunzi: -7px 5px 0 #b100e, 0 -5px 10px #546c6f;
Ukwengeza ukujula okwengeziwe nokudala imiphumela ethakazelisa kakhulu, ngingakwazi ukubeka izithunzi eziningi. Kokuthi “Ake Sikhiphe,” ngihlanganisa izithunzi ezine: esokuqala isithunzi esiqinile esinegethikhi evundlile yokususa umbhalo ukuze sisuse umbhalo ngemuva, silandelwe izithunzi ezithambile eziqhubekayo ukuze zenze ukufiphala okusizungezile: umbala: #6F4D80; umbhalo-isithunzi: -5px5px 0 #260e1e, /* Isithunzi 1 */ 0 0 15px #e9ce96, /* Isithunzi 2 */ 0 0 30px #e9ce96, /* Isithunzi 3 */ 0 0 30px #e9ce96; /* Isithunzi 4 */
Lezi zithunzi zibonisa ukuthi ukusebenzisa i-text-shadow akukona nje ukudala imiphumela yokukhanyisa, njengoba kungase kube ukuhlobisa futhi kwengeze ubuntu. I-Stroke yombhalo Amakhadi amaningi esihloko sekhathuni afaka izinhlamvu ezinohlaka olugqamile oluzenza zihluke ngemuva. Ngingaphinda ngidale lo mphumela ngisebenzisa i-text-stroke. Isikhathi eside, lesi sakhiwo besitholakala kuphela ngesiqalo se-webkit-, kodwa lokho futhi kusho ukuthi manje sesiyasekelwa kuzo zonke iziphequluli zesimanje.
i-text-stroke isifinyezo sezakhiwo ezimbili. Eyokuqala, ububanzi be-text-stroke-width, idweba ikhonsathi ezungeze uhlamvu ngalunye, kanti eyesibili, umbala we-text-stroke, ilawula umbala wayo. Kuthi “Noma yini Ehambayo,” ngengeze i-4px eluhlaza okwesibhakabhaka embhalweni ophuzi: umbala: #eff0cd; -webkit-text-stroke: 4px #7890b5; umbhalo-stroke: 4px #7890b5;
Imivimbo ingaba wusizo ikakhulukazi uma ihlanganiswe nethunzi, ngakho-ke kokuthi "Ukukhula, Ukukhula, Ukuhamba," ngengeze i-stroke encane engu-3px emthunzini ongekho mnyama ongu-1px ukuze ngidale lo mphumela wombhalo onezinhlangothi ezintathu: umbala: #fbb999; umbhalo-isithunzi: 3px 5px 1px #5160b1; -webkit-text-stroke: 3px #984336; umbhalo-stroke: 3px #984336;
I-oda Lokupenda Ukusebenzisa i-text-stroke akukhiqizi ngaso sonke isikhathi umphumela olindelekile, ikakhulukazi ngezinhlamvu ezincane kanye nemivimbo emikhulu, ngoba ngokuzenzakalelayo isiphequluli sidonsa i-stroke phezu kokugcwalisa. Ngokudabukisayo, i-CSS namanje ayingivumeli ukuthi ngilungise ukubekwa kwe-stroke njengoba ngivame ukwenza ku-Sketch. Kodwa-ke, impahla ye-oda lopende inamanani angivumela ukuthi ngibeke i-stroke ngemuva, kunokuba phambi, ukugcwaliswa.
i-paint order: i-stroke ipenda i-stroke kuqala, bese igcwalisa, kanti i-paint-order: fill yenza okuphambene: umbala: #fbb999; upende-oda: gcwalisa; umbhalo-isithunzi: 3px 5px 1px #5160b1; umbhalo-stroke-umbala:#984336; ububanzi be-text-stroke: 3px;
I-stroke esebenzayo igcina izinhlamvu zifundeka, zengeze isisindo, futhi - uma kuhlanganiswa nezithunzi nokuhleleka kopende - kunikeza umbhalo oyisicaba ubukhona bangempela. Ingemuva Ngaphakathi Kombhalo Amakhadi amaningi esihloko sekhathuni adlula umbala oyisicaba ngokungeza ukuthungwa, ama-gradient, noma imininingwane enemifanekiso ekubhaleni kwamagama. Ngezinye izikhathi lokho kuwukuthungwa, ngezinye izikhathi kungase kube i-gradient enokushintshashintsha kwethoni okucashile. Kuwebhu, ngingakwazi ukuphinda ngidale lo mphumela ngokusebenzisa isithombe sangemuva noma i-gradient ngemuva kombhalo, bese ngiwunamathisela umumo wezinhlamvu. Lokhu kuncike ezintweni ezimbili ezisebenza ndawonye: isiqeshana sangemuva: umbhalo nombala wokugcwalisa umbhalo: obala.
Okokuqala, ngisebenzisa isizinda ngemuva kombhalo. Lokhu kungaba isithombe se-bitmap noma i-vector noma i-CSS gradient. Kulesi sibonelo esivela kusiqephu se-Quick Draw McGraw esithi “Baba Bait,” umbhalo wesihloko uhlanganisa igradient ecashile phezulu-phansi ukusuka kokumnyama kuye ekukhanyeni: ingemuva: i-linear-gradient(0deg, #667b6a, #1d271a);
Okulandelayo, nginamathisela leso sizinda kuma-glyphs futhi ngenze umbhalo ubonakale ukuze ingemuva libonise: -webkit-background-clip: umbhalo; -webkit-text-fill-color: transparent;
Ngaleyo migqa emibili nje, ingemuva alisapendiwe ngemuva kombhalo; kunalokho, kupendwe ngaphakathi kwayo. Le nqubo isebenza kahle ikakhulukazi uma ihlanganiswe nemivimbo nezithunzi. I-gradient eqoshiwe inikeza ukubhala ngombala nokuthungwa, i-stroke igcina imiphetho yayo ibukhali, futhi isithunzi siyayiphakamisa ukusuka ngemuva. Ndawonye, bakha kabusha ukubukeka okunengqimba kwamakhadi esihloko apendwe ngesandla bengasebenzisi lutho ngaphandle kwe-CSS encane. Njengenjwayelo, hlola umbhalo osikiwe ngokucophelela, njengoba izinkinga zesiphequluli kwesinye isikhathi zingathinta izithunzi nokunikezwayo. Ukuhlukanisa Umbhalo Ngezinhlamvu Zomuntu Ngamunye Kwesinye isikhathi angifuni ukwenza igama lonke noma isihloko. Ngifuna ukwenza isitayela izinhlamvu ngazinye - ukugudluzela uhlamvu endaweni, ukunikeza iglyph eyodwa isisindo esengeziwe, noma ukuphilisa izinhlamvu ezimbalwa ngokuzimela. Ku-HTML ne-CSS esobala, kunendlela eyodwa kuphela enokwethenjelwa yokwenza lokho: ukugoqa uhlamvu ngalunye ngesici salo se-span. Bengingakwenza lokho mathupha, kodwa lokho kungaba ntekenteke, kube nzima ukukugcina, futhi kuzohlukana ngokushesha uma ikhophi ishintsha. Kunalokho, lapho ngidinga ukulawula uhlamvu ngalunye, ngisebenzisa umtapo wolwazi wokuhlukanisa umbhalo njenge-splt.js (yize ezinye izixazululo zitholakala). Lokhu kuthatha inodi yombhalo futhi kusonga amagama noma izinhlamvu ngokuzenzakalelayo, kunginikeze amahhuku engeziwe ukuze ngiphilise nesitayela ngaphandle kokumosha umaki wami. Kuyindlela egcina i-HTML yami ifundeka futhi ye-semantic, kuyilapho inginika ukulawula okuhle engikudingayo ukuze ngidale kabusha ukuthayipha okungalingani, okunezinhlamvu okubona emakhadini esihloko sekhathuni yakudala. Nokho, le ndlela ihambisanaizixwayiso zokufinyeleleka, njengoba abafundi abaningi besikrini befunda amanodi ombhalo ngokulandelana kwawo. Ngakho lokhu:
Hum Ihum Elimnandi
…ifunda ngendlela obungayilindela: Hum Omnandi
Kodwa lokhu:
H u m
…kungahunyushwa ngokwehlukile kuye ngesiphequluli nesifundi sesikrini. Abanye bazohlanganisa izinhlamvu futhi bafunde amagama ngendlela efanele. Abanye bangase bame kancane phakathi kwezinhlamvu, lapho esimweni esibi kakhulu kungase kuzwakale njengokuthi: “H…” “U…” “M…”
Ngokudabukisayo, ezinye izixazululo ezihlukanisayo azilethi umphumela ofinyeleleka ngaso sonke isikhathi, ngakho-ke ngibhale eyami i-splitter yombhalo, i-splinter.js, okumanje iku-beta. Ukuguqula Izinhlamvu Zomuntu Ngamunye Ukwenza kusebenze i-Toon Text Splitter yami, ngengeza isibaluli sedatha entweni engifuna ukuyihlukanisa:
Hum Sweet Hum
Okokuqala, iskripthi sami sihlukanisa igama ngalinye libe yizinhlamvu ngazinye bese zisonga ngento ye-span esetshenziswa ikilasi kanye nezibaluli ze-ARIA:
Umbhalo ube usuthatha okuqukethwe kokuqala kwe-elementi ehlukanisiwe futhi uyengeza njengesibaluli se-aria ukusiza ukugcina ukufinyeleleka:
Uma kusetshenziswe lezo zibaluli zekilasi, ngingakwazi-ke isitayela izinhlamvu ngazinye ngendlela engikhetha ngayo.
Isibonelo, ku-"Hum Sweet Hum," ngifuna ukuphindaphinda ukuthi izinhlamvu zakho zisuka kanjani kusukela kwesisekelo. Ngemva kokusebenzisa i-Toon Text Splitter yami, ngisebenzise amanani amane ahlukene okuhumusha ngisebenzisa izikhethi ezimbalwa ze-:nth-child ukuze ngidale ukubukeka okungahleliwe: /* 4th, 8th, 12th... */ .toon-char:nth-child(4n) { translate: 0 -8px; } /* 1st, 5th, 9th... */ .toon-char:nth-child(4n+1) { translate: 0 -4px; } /* 2nd, 6th, 10th... */ .toon-char:nth-child(4n+2) { translate: 0 4px; } /* 3rd, 7th, 11th... */ .toon-char:nth-child(4n+3) { translate: 0 8px; }
Kodwa ukuhumusha kuyisici esisodwa kuphela engingasisebenzisa ukuze ngiguqule umbhalo wami we-toon.
Ngingakwazi futhi ukuzungezisa lezo zinhlamvu ngazinye ukuze ngibukeke ngendlela exakile: /* 4th, 8th, 12th... */ .toon-line .toon-char:nth-child(4n) { zungeza: -4deg; } /* 1st, 5th, 9th... */ .toon-char:nth-child(4n+1) { zungeza: -8deg; } /* 2nd, 6th, 10th... */ .toon-char:nth-child(4n+2) { zungeza: 4deg; } /* 3rd, 7th, 11th... */ .toon-char:nth-child(4n+3) { zungeza: 8deg; }
Kodwa ukuhumusha kuyisici esisodwa kuphela engingasisebenzisa ukuze ngiguqule umbhalo wami we-toon. Ngingakwazi futhi ukuzungezisa lezo zinhlamvu ngazinye ukuze ngibukeke ngendlela exakile: /* 4th, 8th, 12th... */ .toon-line .toon-char:nth-child(4n) { phenduka: -4deg; }
/* 1st, 5th, 9th... */ .toon-char:nth-child(4n+1) { phenduka: -8deg; }
/* 2nd, 6th, 10th... */ .toon-char:nth-child(4n+2) { ukujikeleza: 4deg; }
/* 3rd, 7th, 11th... */ .toon-char:nth-child(4n+3) { ukujikeleza: 8deg; }
Futhi, kunjalo, ngingengeza ukugqwayiza ukuze nginyakaze lezo zinhlamvu futhi ngiphilise izihloko zami zesitayela sombhalo we-toon. Okokuqala, ngidale upopayi wozimele ongukhiye ozungezisa izinhlamvu:
@keyframes jiggle { 0%, 100% {guqula: zungezisa(var(--base-rotate, 0deg)); } 25% {guqula: zungeza(calc(var(--base-rotate, 0deg) + 3deg)); } 50% {guqula: zungeza(calc(var(--base-rotate, 0deg) - 2deg)); } 75% {guqula: zungezisa(calc(var(--base-rotate, 0deg) + 1deg)); } }
Ngaphambi kokuyisebenzisa ezintweni ze-span ezidalwe i-Toon Text Splitter yami: .toon-char { upopayi: jiggle 3s infinite-in-out; i-transform-origin: ngezansi maphakathi; }
Futhi ekugcineni, ukusetha inani lokuzungezisa nokubambezeleka ngaphambi kokuba uhlamvu ngalunye luqale ukunyakazisa: .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) {ukubambezeleka kopopayi: 0.1s; } .toon-char:nth-child(4n+1) {ukubambezeleka kopopayi: 0.3s; } .toon-char:nth-child(4n+2) {ukubambezeleka kopopayi: 0.5s; } .toon-char:nth-child(4n+3) {ukubambezeleka kopopayi: 0.7s; }
Uhlaka Olulodwa Lokwenza Imibono Abadwebi besihloko sekhathuni babenohlaka olulodwa lokwenza okuhlaba umxhwele, futhi ukuthayipha kwabo kwakubaluleke njengomsebenzi wobuciko abawupenda. Kungokufanayo kuwebhu. Unhlokweni oklanywe kahle noma iqhaweindawo idinga ukucaca, uhlamvu, kanye nokuzethemba — hhayi nje isithombe esingemuva esinobubanzi obugcwele esifiphele. Ngezakhiwo ezimbalwa ze-CSS ezikhethwe ngokucophelela - izithunzi, imivimbo, ingemuva elisikiwe, nokunye opopayi obuvinjelwe - singaphinda sidale lowo mthelela ofanayo. Ngiyawuthanda umbhalo we-toon hhayi ngoba ngine-nostalgic, kodwa ngoba umklamo wawo uhloselwe. Yenza izinqumo ngamabomu, futhi uvumele i-toon text typography ingeze ubuciko kumiklamo yakho.
