Emva kokugqiba iprojekthi ebifuna ukuba ndifunde yonke into endinokuyenza malunga noopopayi be-CSS kunye ne-SVG, ndiye ndaqala ukubhala olu ngcelele malunga nokuSmashing oopopayi kunye “neNdlela iiKhathuni zeClassic ezikhuthaza ngayo i-CSS yanamhlanje.” Ukuqukumbela kulo nyaka, ndifuna ukukubonisa indlela yokusebenzisa i-CSS yangoku ukwenza into eyenza izihloko zeToon zibe nefuthe: ukuchwetheza kwazo. Uyilo loMzobo wesihloko Kwixesha elithe cwaka lee-1920s nakwiminyaka yokuqala yee-1930, ukuchwethezwa kwekhadi lesihloko sefilimu kwadala isimo sengqondo, kwamisela indawo, kwaza kwakhumbuza abaphulaphuli ngohlobo lwefilimu abahlawule ukuba bayibone.
Amakhadi esihloko seekhathuni nawo ayenophawu, imo, kunye nokusetwa kwescene, zonke ziqengqeleke zaba yinto enye. Kwiminyaka yokuqala, xa uhlahlo lwabiwo-mali olukhulu lwestudio lwalukhudlwana, la makhadi esihloko ayehlala ebonisa kwaye epeyinta.
Kodwa xa umabonwakude wahambela phambili ngeminyaka yee-1950, uhlahlo lwabiwo-mali lwehla, kwaye amakhadi ayilwe ngamagcisa afana noLawrence “Art” Goble amkela ulwimi olutsha olubonakalayo, oluba yimizobo ngakumbi, olubhalwe ngesitayile, kwaye lungantsonkothanga kakhulu. Qaphela: ULawrence “Ubugcisa” Goble lelinye lamagorha ahlala engahoywa opopayi wenkulungwane yaseMelika. Eyona nto wayeyisebenzela uHanna-Barbera ngeyona minyaka inempembelelo kakhulu ngeminyaka yoo-1950 kunye noo-1960. UGoble wayengengomntu obonisa umlinganiswa. Indima yakhe yayikukudala umoya, ngoko ke wayila indawo ezingqongileyo zeFlintstones, iHuckleberry Hound, iQuick Draw McGraw, kunye neYogi Bear, kunye namakhadi esihloko sokuvula abeka ithoni. Amakhadi akhe esihloko, anemizobo enophawu olugqunyiweyo, anceda ukuchaza inkangeleko yemifanekiso kaHanna-Barbera. Umzobo kaGoble wabalinganiswa abanje ngoKhawulezayo Draw McGraw kunye neYogi Bear wawusebenza kwizikrini ezincinci zikamabonwakude. Endaweni yokuphinda avelise i-cartoon, wagxila ekuboniseni umbono omnye, owomeleleyo - uhlala ukwi-silhouette-ethimbe eyona nto iphambili kuyo. Kwi “Buzzin’ Bear,” uYogi ubhadula ngehelikopta. Uyagxumela kude, i-pic-a-nic basket esandleni, kwi-"Bear on a Piknic," kunye "neBhaso lokuLwa uloyiko," i-Yogi ifaka iibhokisi zesihloko.
Ngomnyakazo omncinci okanye ongenakho ukuthembela kuwo, iifreyimu zeGoble enye kwafuneka zenze imo, zisete indawo, kwaye zichaze ibali. Bakwenza oku besebenzisa imibala ecaba, iimilo zegraphic, kunye nokuchwetheza okuhlala kudityaniswa kumsebenzi wobugcisa.
Njengabayili abasebenza kwiwebhu, izihloko ze-toon zinokusifundisa okuninzi malunga nendlela yokudlulisela ubuntu bophawu, ukwenza umbono wokuqala, kunye nokuseta okulindelweyo kumava omntu usebenzisa imveliso okanye iwebhusayithi. Sinokufunda kubuchule bamagcisa ukwenza iibhena ezisebenzayo, iiheader zamaphepha okufikela, kunye nezikrini ezilungileyo zokutshiza zefashoni. Toon Title Typography Amakhadi esihloko sekhathuni abonisa indlela ukudibanisa uhlobo olunemifanekiso ehambisa ngayo iheader okanye iimfuno zeqhawe. Ngesandla-sithunzi sombhalo, i-text-stroke, kunye nokuguqula amaqhinga, i-CSS yanamhlanje ikuvumela ukuba ungene kwaloo mandla.
I-Toon Text Generator Ngamafutshane ngokubhala eli nqaku, ndiye ndabona ukuba kuya kuba luncedo ukuba nesixhobo sokwenza isicatshulwa esinesitayile esifana nezihloko zeekhathuni endizithanda kakhulu. Ndiye ndenza enye. Ijenereyitha yeSihlokwana sam seToon ikuvumela ukuba ulinge ngemibala, imivumbo, kunye nezithunzela zokubhaliweyo ezininzi. Ungayihlengahlengisa iodolo yepeyinti, ufake izithuba zoonobumba, ujonge kuqala isicatshulwa sakho kukhetho lweefonti zesampulu, emva koko ukope iCSS eyenziweyo ngqo kwibhodi eqhotyoshwayo ukuze uyisebenzise kwiprojekthi. Toon Isihloko CSS Ungakhuphela ngokulula-uncamathisele iCSS obonelelwa yiToon Text Isihloko seSihlokweni. Kodwa makhe sijonge ngakumbi kwinto eyenzayo. Isithunzi sombhalo Jonga uhlobo kwesi sihloko esivela kwisiqendu sika-Augie Doggie esithi "Yuk-Yuk Duck," ngoonobumba baso abamthubi kunye nomnyama, oqinileyo, nesithunzi esisisusayo esisisusa ngasemva kwaye senze inkohliso yobunzulu.
Mhlawumbi sele uyazi ukuba umbhalo-isithunzi samkela amaxabiso amane: (1) ngokuthe tye kunye (2) neeseti ezithe nkqo, (3) ukufiphala, kunye (4) nombala onokuba ngqindilili okanye ongekho ngaphaya. Lawo maxabiso okulinganisa anokuba alungile okanye angalunganga, ke ndiyakwazi ukuphindaphinda "i-Yuk-Yuk Duck" ndisebenzisa isithunzi esiqinileyo esitsalwe phantsi nasekunene: umbala: #f7f76d; umbhalo-isithunzi: 5px 5px 0 #1e1904;
Kwelinye icala, esi sihloko "Pint Giant" sinemvakalelo eyahlukileyo kunye nesithunzi saso esibi semi-soft: umbala: #c2a872; umbhalo-isithunzi: -7px 5px 0 #b100e, 0 -5px 10px #546c6f;
Ukongeza ubunzulu obongezelelweyo kunye nokwenza iziphumo ezinomdla ngakumbi, ndinokubeka izithunzi ezininzi. Kuthi “Masiphume,” ndidibanisa izithunzi ezine: esokuqala isithunzi esiqinileyo esine-offset ethe tyaba ethe tyaba ukuphakamisa isicatshulwa ngasemva, silandelwe sisithunzi esithe chu ngokuqhubekayo ukwenza ukufiphala ngakuso: 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 */
Le mithunzi ibonisa ukuba ukusebenzisa i-text-shadow akukhona nje ukudala iziphumo zokukhanyisa, njengoko ziyakwazi ukuhlobisa kunye nokongeza ubuntu. ISitrowu sokubhaliweyo Amakhadi amaninzi eekhathuni abonisa oonobumba abanolwandlalo olungqindilili olubenza bavele ngasemva. Ndiyakwazi ukwenza kwakhona esi siphumo usebenzisa i-text-stroke. Ixesha elide, le ndawo ibifumaneka kuphela nge--webkit- isimaphambili, kodwa oko kuthetha ukuba ngoku iyaxhaswa kwiziphequluli zanamhlanje.
text-stroke sisishunqulelo seempawu ezimbini. Eyokuqala, i-text-stroke-width, izoba i-contour ejikeleze i-letter nganye, ngelixa eyesibini, i-text-stroke-color, ilawula umbala wayo. Kuyo "Nantoni na ehambayo," ndongeze i-4px eluhlaza okwesibhakabhaka kumbhalo omthubi: umbala: #eff0cd; -webkit-text-stroke: 4px #7890b5; umbhalo-stroke: 4px #7890b5;
Imivimbo inokuba luncedo ngakumbi xa zidityaniswe nethunzi, ke ngoko "Ukukhula, Ukukhula, Ukuhamba," ndongeze ukubetha kwe-3px ebhityileyo kwisithunzi esingacacanga se-1px ukwenza le mpembelelo yombhalo-ntathu: umbala: #fbb999; umbhalo-isithunzi: 3px 5px 1px #5160b1; -webkit-text-stroke: 3px #984336; umbhalo-stroke: 3px #984336;
Peyinta Umyalelo Ukusebenzisa i-text-stroke ayisoloko ivelisa umphumo olindelekileyo, ngokukodwa ngoonobumba abancinci kunye nemivimbo enzima, kuba ngokungagqibekanga isikhangeli sidonsa i-stroke phezu kokuzaliswa. Ngelishwa, i-CSS ayikandivumeli ukuba ndihlengahlengise ukubekwa kwestroke njengoko ndihlala ndisenza kwiSketch. Nangona kunjalo, ipropati yomyalelo wepeyinti inexabiso elindivumela ukuba ndibeke i-stroke ngasemva, kunokuba phambi, ukugcwaliswa.
ulandelelwano lwepeyinti: i-stroke ipeyinta i-stroke kuqala, emva koko izalise, ngelixa ipeyinti-odolo: gcwalisa yenza okuchaseneyo: umbala: #fbb999; ipeyinti-odolo: gcwalisa; umbhalo-isithunzi: 3px 5px 1px #5160b1; umbhalo-stroke-umbala: # 984336; text-stroke-width: 3px;
I-stroke esebenzayo igcina oonobumba befundeka, yongeza ubunzima, kwaye-xa idityaniswe nezithunzi kunye nocwangco lwepeyinti - inika umbhalo osicaba ubukho bokwenyani. Imvelaphi Ngaphakathi Kwesicatshulwa Amakhadi amaninzi esihloko seekhathuni agqitha ngaphaya kombala osicaba ngokongeza ukuthungwa, iigradient, okanye ingcaciso enemifanekiso kumbhalo. Ngamanye amaxesha oko kukuthungwa, ngamanye amaxesha kunokuba yigradient kunye nokutshintsha kwetoni efihlakeleyo. Kwiwebhu, ndingenza kwakhona esi siphumo ngokusebenzisa umfanekiso ongasemva okanye igradient ngasemva kokubhaliweyo, kwaye emva koko ndiyinqumle ukuya kubume boonobumba. Oku kuxhomekeke kwiipropathi ezimbini ezisebenza kunye: ikliphu yangasemva: umbhalo kunye nokubhaliweyo-ukuzalisa-umbala: transparent.
Okokuqala, ndisebenzisa imvelaphi emva kwesicatshulwa. Oku kunokuba yi-bitmap okanye umfanekiso wevektha okanye udidi lweCSS. Kulo mzekelo ukwisiqendu se-Quick Draw McGraw "Baba Bait," isicatshulwa sesihloko sibandakanya umphezulu-osezantsi ofihlakeleyo ukusuka kumnyama ukuya ekukhanyeni: imvelaphi: i-linear-gradient (0deg, #667b6a, #1d271a);
Okulandelayo, ndisika imvelaphi kwiiglyphs kwaye ndenze isicatshulwa sicace ukuze imvelaphi ibonise: -webkit-background-clip: umbhalo; -webkit-text-fill-umbala: transparent;
Ngaloo migca mibini nje, imvelaphi ayisapeyintwa ngasemva kwesicatshulwa; endaweni yoko, ipeyintiwe ngaphakathi kwayo. Olu buchule lusebenza ngokukodwa xa ludibaniswe nemivimbo kunye nezithunzi. Igradient echetyiweyo ibonelela ngombala kunye nombala, i-stroke igcina imiphetho yayo ibukhali, kwaye isithunzi siyayiphakamisa ukusuka ngasemva. Ngokudibeneyo, baphinda baphinda bajongane namakhadi esihloko apeyintwe ngesandla bengasebenzisi nto ngaphandle kweCSS encinci. Njengesiqhelo, vavanya isicatshulwa esichetyiweyo ngononophelo, njengoko isikhangeli quirks ngamanye amaxesha sinokuchaphazela izithunzi kunye nonikezelo. Ukwahlula Isiqendu Ngoonobumba Ngamnye Ngamanye amaxesha andifuni ukubhala igama elipheleleyo okanye isihloko. Ndifuna ukwenza isitayile oonobumba ngabanye - ukugungqisa umlinganiswa endaweni, ukunika iglyph enye ubunzima obongezelelweyo, okanye ukuphilisa oonobumba abambalwa ngokuzimeleyo. Kwi-HTML ecacileyo kunye ne-CSS, inye kuphela indlela ethembekileyo yokwenza oko: ukusonga umlinganiswa ngamnye kwinto yakhe yespan. Ndingayenza loo nto ngesandla, kodwa oko kuya kuba buthathaka, kunzima ukuyigcina, kwaye kuya kukhawuleza kuqhekeke xa ikopi itshintsha. Endaweni yoko, xa ndifuna ulawulo lweleta nganye, ndisebenzisa ilayibrari yokwahlulahlula okubhaliweyo njenge splt.js (nangona ezinye izisombululo zikhona). Oku kuthatha indawo yokubhaliweyo kwaye isonga amagama okanye amagama ngokuzenzekelayo, kundinika iihuka ezongezelelweyo ukuze ndiphilise kunye nesimbo ngaphandle kokuphazamisa uphawu lwam. Yindlela egcina i-HTML yam ifundeka kunye nesemantic, ngelixa indinika ulawulo olucokisekileyo endiludingayo ukuze ndiphinde ndiphinde ndingalinganiyo, i-typography enophawu olubonayo kumakhadi esihloko sekhathuni. Nangona kunjalo, le ndlela ihamba nayoukufikeleleka, njengoko uninzi lwabafundi besikrini befunda iinowudi zombhalo ngokulandelelana. Ngoko oku:
Hum Sweet Hum
…ufunda njengoko ubunokulindela: Hum Sweet Hum
Kodwa oku:
H u m
…inokutolikwa ngokwahlukileyo ngokuxhomekeke kwisikhangeli kunye nesifundi sesikrini. Abanye baya kuhlanganisa oonobumba kwaye bafunde amagama ngokuchanekileyo. Abanye banokunqumama phakathi koonobumba, apho imeko imbi kakhulu inokuvakala ngathi: “H…” “U…” “M…”
Ngokudabukisayo, ezinye izisombululo zokwahlula azinikezeli iziphumo ezisoloko zifikeleleka, ngoko ke ndibhale eyam i-splitter yombhalo, i-splinter.js, okwangoku ikwi-beta. Ukuguqula Iileta Zomntu Ngamnye Ukwenza i-Toon Text Splitter yam isebenze, ndongeza i-data-uphawu kwinto endifuna ukuyahlula:
Hum Sweet Hum
Okokuqala, iskripthi sam sahlula igama ngalinye ngoonobumba ngabanye kwaye zisongelwe kwindawo yespan ngeklasi kunye neempawu zeARIA ezisetyenzisiweyo:
Iskripthi emva koko sithatha umxholo wokuqala wento eyahlulayo kwaye uyongeze njengophawu lwe-aria ukunceda ukugcina ukufikeleleka:
Ngezo mpawu zeklasi zisetyenzisiweyo, ndinokuthi emva koko nditayile abalinganiswa ngabanye njengoko ndikhetha.
Umzekelo, kwi-"Hum Sweet Hum," ndifuna ukuphinda indlela oonobumba abasuka ngayo kwisiseko. Emva kokusebenzisa i-Toon Text Splitter yam, ndisebenzise amaxabiso amane awohlukeneyo oguqulo ndisebenzisa uninzi lwabakhethi babantwana be-nth ukwenza inkangeleko engacwangciswanga: /* 4th, 8th, 12th... */ .toon-char:nth-child(4n) {guqulela: 0 -8px; } /* 1st, 5th, 9th... */ .toon-char:nth-child(4n+1) {guqulela: 0 -4px; } /* 2nd, 6th, 10th... */ .toon-char:nth-child(4n+2) {guqulela: 0 4px; } /* 3rd, 7th, 11th... */ .toon-char:nth-child(4n+3) {guqulela: 0 8px; }
Kodwa uguqulo yinto enye kuphela endinokuyisebenzisa ukuguqula iteksi yam yetoon.
Ndingaphinda ndijikelezise abo balinganiswa ukuze babonakale besiphithiphithi ngakumbi: /* 4th, 8th, 12th... */ .toon-line .toon-char:nth-child(4n) {jikelezisa: -4deg; } /* 1st, 5th, 9th... */ .toon-char:nth-umntwana(4n+1) {jikelezisa: -8deg; } /* 2nd, 6th, 10th... */ .toon-char:nth-umntwana (4n+2) {jikelezisa: 4deg; } /* 3rd, 7th, 11th... */ .toon-char:nth-umntwana(4n+3) {jikelezisa: 8deg; }
Kodwa uguqulo yinto enye kuphela endinokuyisebenzisa ukuguqula iteksi yam yetoon. Ndingaphinda ndijikelezise abo balinganiswa ukuze babonakale besiphithiphithi ngakumbi: /* 4th, 8th, 12th... */ .toon-line .toon-char:nth-child(4n) { jikelezisa: -4deg; }
/* 1st, 5th, 9th... */ .toon-char:nth-umntwana(4n+1) { jikelezisa: -8deg; }
/* 2nd, 6th, 10th... */ .toon-char:nth-umntwana(4n+2) { jikelezisa: 4deg; }
/* 3rd, 7th, 11th... */ .toon-char:nth-umntwana(4n+3) { jikelezisa: 8deg; }
Kwaye, ewe, ndingongeza oopopayi ukuze baguqule abo balinganiswa kwaye ndizise izihloko zesitayile sam setoon ebomini. Okokuqala, ndenze oopopayi be-keyframe ejikelezisa abalinganiswa:
@keyframes jiggle { 0%, 100% { guqula: jikeleza (var (--base-rotate, 0deg)); } 25% {ukuguqula: jikeleza (calc (var (--base-rotate, 0deg) + 3deg)); } 50% {ukuguqula: jikeleza (calc (var (--base-rotate, 0deg) - 2deg)); } 75% {ukuguqula: jikeleza (calc (var (--base-rotate, 0deg) + 1deg)); } }
Ngaphambi kokuba uyisebenzise kwizinto ze-span ezenziwe yi-Toon Text Splitter yam: .toon-char { oopopayi: Jiggle 3s infinite-in-out-out; inguqu-imvelaphi: embindini ezantsi; }
Kwaye okokugqibela, ukuseta isixa sokujikeleza kunye nokulibaziseka ngaphambi kokuba umlinganiswa ngamnye aqale ukushukuma: .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) {ukulibaziseka kopopayi: 0.1s; } .toon-char:nth-child(4n+1) { ukulibaziseka kopopayi: 0.3s; } .toon-char:nth-child(4n+2) { ukulibaziseka kopopayi: 0.5s; } .toon-char:nth-child(4n+3) { ukulibaziseka kopopayi: 0.7s; }
Isakhelo esinye sokwenza umbono Abazobi besihloko sekhathuni babenesakhelo esinye sokwenza umzobo, kwaye ukuchwetheza kwabo kwakubaluleke njengomsebenzi wobugcisa abawupeyintileyo. Kunjalo nakwiwebhu. Intloko eyenziwe kakuhle okanye iqhaweindawo ifuna ukucaca, umlinganiswa, kunye nokuzithemba — hayi nje umfanekiso ongasemva ocinyiweyo obanzi. Ngeempawu ezimbalwa ze-CSS ezikhethwe ngononophelo - izithunzi, imivumbo, imvelaphi echetyiweyo, kunye noopopayi abathintelweyo - sinokwenza kwakhona kwaloo mpembelelo inye. Ndiyawuthanda umbhalo we-toon hayi ngenxa yokuba ndingenangqondo, kodwa ngenxa yokuba uyilo lwayo lwenziwe ngabom. Yenza ukhetho lwangabom, kwaye uvumele isicatshulwa esincinci sokuchwetheza songeze i-punch kuyilo lwakho.
