Kadib markii aan dhammeeyey mashruuc iga baahday in aan wax kasta oo aan kari karo ka barto CSS iyo animations SVG, waxa aan bilaabay qoritaanka taxanahan oo ku saabsan Animations Smashing iyo "Sida Kartoonada Classic ay u dhiirigeliyaan CSS Casriga ah." Si aan u soo koobo sanadkan, waxaan rabaa in aan ku tuso sida loo isticmaalo CSS-ga casriga ah si aad u abuurto cunsur ka dhigaya Titles Toon mid saameyn leh: qoraalkooda. Cinwaanka Nakhshad Farshaxan Xilligii aamusnaanta ee 1920-meeyadii iyo horraantii ’30-meeyadii, qoraalka kaarka cinwaanka filimku wuxuu abuuray niyadda, wuxuuna dhigay goobta, wuxuuna xasuusiyay daawadayaasha nooca filimka ay lacag ku bixiyeen si ay u daawadaan.
Kaararka ciwaanka kartoonada sidoo kale waxay ahaayeen summad, niyadda, iyo goobta-dejinta, dhammaantoodna mid baa la isku rogay. Sannadihii hore, marka miisaaniyada istuudiyaha waaweyni ay weynaayeen, kaadhadhkan cinwaanku inta badan waxay ahaayeen kuwo sawiran iyo rinjiyeyn ah.
Laakin markii uu talefishinku kor u kacay 1950-meeyadii, miisaaniyada ayaa hoos u dhacday, iyo kaarar ay naqshadeeyeen fanaaniinta sida Lawrence “Art” Goble waxay qaateen luuqad cusub oo muuqaal ah, iyaga oo noqday kuwo garaafyo, qaabaysan, iyo kuwo aad u yar. Fiiro gaar ah: Lawrence "Art" Goble waa mid ka mid ah geesiyaasha inta badan la ilduufay ee qarniyadii dhexe ee animation-ka Mareykanka. Waxa uu ugu horrayn u soo shaqeeyay Hanna-Barbera sannadihii ugu saamaynta badnaa ee 1950-kii iyo 1960-kii. Goble ma ahayn jilaa jile. Doorkiisu wuxuu ahaa inuu abuuro jawi, sidaas darteed wuxuu u qaabeeyay jawiga Flintstones, Huckleberry Hound, Draw Quick McGraw, iyo Yogi Bear, iyo sidoo kale kaararka cinwaanka furitaanka ee dejinaya codka. Kaadhadhkiisa cinwaanka, oo ay ku jiraan sawirro leh calaamad lagu dahaadhay, ayaa gacan ka geystay qeexidda muuqaalka astaanta ah ee Hanna-Barbera. Farshaxanka Goble ee jilayaasha sida Quick Draw McGraw iyo Yogi Bear ayaa wax ku ool u ahaa shaashadaha TV-ga yaryar. Halkii uu ka soo saari lahaa sawir-gacmeedka, waxa uu diiradda saaray soo bandhigida hal fikir oo xooggan - inta badan silhouette - kaas oo qabsaday nuxurkiisa. Gudaha "The Buzzin' Bear," Yogi wuxuu ku dhex guuxayaa diyaarad helikobter ah. Wuu ka soo booday, dambiisha sawir-qaadka ah ee gacanta ku jira, "Bear on Picnic," iyo "Prize Fight Fright," Yogi wuxuu sanduuqa ku dhejiyaa qoraalka cinwaanka.
Iyada oo ay yar tahay ama aanay jirin wax dhaqdhaqaaq ah oo lagu tiirsanaado, Goble's halbeegyadiisa waxay ahayd inay abuuraan niyadda, dejiyaan goobta, oo ay qeexaan sheeko. Waxay tan ku sameeyeen iyagoo isticmaalaya midabyo fidsan, qaabab garaafyo, iyo qoraal qoraal ah oo inta badan lagu dhex daray farshaxanka.
Sida naqshadeeyayaasha ka shaqeeya shabakada, cinwaanada toon waxay ina bari karaan wax badan oo ku saabsan sida loo gudbiyo shakhsiyadda astaanta, samaynta ra'yiga ugu horreeya, iyo dejinta rajooyinka qof khibrad u leh isticmaalka badeecad ama shabakad. Waxaan ka baran karnaa farsamooyinka farshaxanada si aan u abuurno boorar wax ku ool ah, madax-bogga soo degaya, iyo xitaa shaashado fashuuq ah oo qaabaysan. Qoraalka Cinwaanka Toon Kaararka ciwaanka kartoonku waxay muujinayaan sida isku-darka nooca sawirku u bixiyo feerka madaxa ama baahida geesiga. Iyada oo gacan muggeed ah oo hadh-qoraal ah, istaroog-qoraal ah, iyo xeelado beddel, CSS-ga casriga ahi waxa uu kuu ogolaanayaa inaad taabato isla tamartaas.
Dhaliyaha Ciwaanka Qoraalka Toon Qayb ka mid ah qorista maqaalkan, waxaan gartay inay faa'iido leedahay in la helo qalab lagu soo saaro qoraalka qaabaysan sida cinwaannada kartoonada ee aan aad u jeclahay. Markaa mid ayaan sameeyay. Dhaliyaha Ciwaanka Qoraalkayga Toon wuxuu kuu ogolaanayaa inaad tijaabiso midabyo, istaroog, iyo hadhyo badan oo qoraal ah. Waxaad hagaajin kartaa nidaamka rinjiga, codso kala dheeraynta xarfaha, dib u eegi kartaa qoraalkaaga xulashada farta muunada ah, ka dibna waxaad si toos ah ugu koobi kartaa CSS-ga la soo saaray sabuuraddaada si aad ugu isticmaasho mashruuca. Cinwaanka Toon CSS Waxaad si fudud u koobi kartaa-ku dhejin kartaa CSS-ta uu ku sido Generator-ka Ciwaanka Qoraalka Toon. Laakiin aan si dhow u eegno waxa ay qabato. Hooska qoraalka U fiirso nooca cinwaankan qaybta Augie Doggie ee "Yuk-Yuk Duck," oo leh xarfo huruud ah oo cirro leh iyo madow, adag, hooska hoos u dhigaya oo kor u qaadaya asalka oo abuuraya dhalanteedka qoto dheer.
Waxay u badan tahay inaad horeba u ogeyd in hadh-qoraalku aqbalayo afar qiyam: (1) toosan iyo (2) toosan oo toosan, (3) blur, iyo (4) midab noqon kara mid adag ama dhexdhexaad ah. Qiimayaashaas la dhimay waxay noqon karaan kuwo togan ama taban, sidaa darteed waxaan ku soo celin karaa "Yuk-Yuk Duck" anigoo isticmaalaya hoos adag oo hoos iyo dhanka midig: midabka: #f7f76d; hooska qoraalka: 5px 5px 0 # 1e1904;
Dhanka kale, cinwaankan "Pint Giant" wuxuu leeyahay dareen ka duwan hooskiisa jilicsan ee jilicsan: midabka: # c2a872; hooska qoraalka: -7px 5px 0 #b100e, 0 -5px 10px # 546c6f;
Si loo kordhiyo qoto dheer oo dheeraad ah oo loo abuuro saameyn xiiso badan, waxaan lakabayn karaa hadhyo badan. Wixii "Let's Duck Out," Waxaan isku daraa afar hadh: kan ugu horreeya hadh adag oo leh leexasho toosan oo taban si kor loogu qaado qoraalka asalka, oo ay ku xigto hooska jilicsan si tartiib tartiib ah si loo abuuro blur hareerihiisa: midabka: # 6F4D80; hooska qoraalka: -5px5px 0 #260e1e, /* Hooska 1 */ 0 0 15px #e9ce96, /* Hooska 2 */ 0 0 30px #e9ce96, /* Hooska 3 */ 0 0 30px # e9ce96; /* Hooska 4 */
Hooskaani waxay muujinayaan in isticmaalka hooska-qorista aysan ahayn oo kaliya abuurista saamaynta iftiinka, maadaama ay sidoo kale noqon karaan kuwo qurxin oo ku dara shakhsiyad. Qoraalka Stroke Kaarar badan oo kartoon ah ayaa ka kooban xarfo leh xaraf dhiirranaan leh oo ka dhigaya inay xagga dambe ka soo muuqdaan. Waxaan dib u abuuri karaa saamayntan anigoo isticmaalaya-stroke text. Muddo dheer, gurigan waxaa lagu heli karaa oo keliya a -webkit- horgalaha, laakiin sidoo kale waxay la macno tahay in hadda laga taageeray daalacashada casriga ah.
qoraalka-stroke waa gacan-gaaban oo loogu talagalay laba guri. Midka koowaad, ballac-dhaqaaleedka qoraalka, wuxuu ku sawiraa jaan-gooyo xarfo gaar ah, halka kan labaadna, midabka-stroke-ka, uu xakameynayo midabkiisa. Wixii "Wax kastoo Taga Pup," waxaan ku daray 4px istaroog buluug ah qoraalka jaalaha ah: midabka: #ef0cd; -kit-qoraalka-stroke: 4px # 7890b5; qoraalka-stroke: 4px # 7890b5;
Faaliggu wuxuu si gaar ah faa'iido u yeelan karaa marka lagu daro hadhka, marka "Koraca, Koritaanka, Tagaya," Waxaan ku daray istaroog khafiif ah oo 3px ah hooska 1px oo aan mugdi lahayn si loo abuuro saamaynta qoraalkan saddex-geesoodka ah: midabka: #fbb999; hooska qoraalka: 3px 5px 1px # 5160b1; -webkit-text-stroke: 3px # 984336; qoraalka-stroke: 3px # 984336;
Dalabka rinjiga Isticmaalka istaroogga qoraalka had iyo jeer ma soo saaro natiijada la filayo, gaar ahaan xarfo dhuuban iyo istaroog dhumuc leh, sababtoo ah sida caadiga ah browserku wuxuu sawiraa istaroogga buuxinta. Nasiib darrose, CSS wali iima ogola in aan hagaajiyo meelaynta istaroogga sida aan inta badan ku sameeyo Sketch. Si kastaba ha ahaatee, hantida rinjiga-dalabka ayaa leh qiyamyo ii oggolaanaya inaan dhigo istaroogga ka dambeeya, halkii aan ka ahaan lahaa, buuxinta.
rinji-habaynta: istaroog ayaa marka hore rinji istaroogga, ka dibna buuxinta, halka rinjiga-dalabka: buuxintu waxay samaysaa caksi: midabka: #fbb999; rinji-dalabka: buuxin; hooska qoraalka: 3px 5px 1px # 5160b1; qoraalka-stroke-midabka: # 984336; ballac qoraalka-stroke: 3px;
Istaroogga wax ku oolka ah wuxuu hayaa xarfaha la akhrin karo, wuxuu kordhiyaa miisaanka, iyo - marka lagu daro hadhka iyo nidaamka rinjiga - wuxuu siinayaa qoraal siman joogitaanka dhabta ah. Asalkii hore ee qoraalka Kaararka cinwaanka kartoonada badankoodu waxay dhaafaan midab siman iyagoo ku dara qoraal, gradients, ama tafaasiil la sawiray xarfaha. Mararka qaarkood taasi waa qaab-dhismeed, mararka kalena waxay noqon kartaa gradient leh isbeddel tonal ah oo khafiif ah. Shabakadda dhexdeeda, waxaan ku soo celin karaa saamayntan aniga oo isticmaalaya sawirka gadaashiisa ama qoraalka, ka dibna u googooyaa qaabka xarfaha. Tani waxay ku tiirsan tahay laba sifo oo wada shaqeynaya:-goob-dhameedka: qoraalka iyo qoraalka-buuxinta-midabka: hufan.
Marka hore, waxaan dabaqayaa asalka qoraalka. Tani waxay noqon kartaa qariirad-qashin ah ama sawir-qaade ama jaan-qaad CSS ah. Tusaalahan laga soo qaatay dhacdadii Draw McGraw Degdegga ah ee "Baba Bait," qoraalka ciwaanka waxa ku jira jaanis hoose oo hoose oo mugdi ah ilaa iftiin: asalka: linear-gradient (0deg, # 667b6a, # 1d271a);
Marka xigta, waxaan u gooyaa asalkaas glyphs oo waxaan ka dhigayaa qoraalka mid hufan si asalka u muujiyo iyada oo loo marayo: -kit-background-clip: qoraal; -midabka-webkit-qoraalka-buuxinta-midabka: hufan;
Labadaas sadar oo keliya, asalka hadda ma rinji gadaashiisa qoraalka; halkii, waa lagu rinjiyeeyay dhexdeeda. Farsamadan waxay si gaar ah u shaqeysaa marka lagu daro istaroogga iyo hooska. Qalab la jarjaray ayaa xarafka ku siinaya midab iyo muuqaal, istarooggu wuxuu ilaaliyaa geesihiisa fiiqan, hadhkuna wuxuu kor uga qaadaa xagga dambe. Si wada jir ah, waxay dib u abuuraan muuqaalka lakabka leh ee kaararka cinwaanka gacmeed lagu rinjiyeeyay iyagoo isticmaalaya wax ka badan CSS yar. Sida had iyo jeer, u tijaabi qoraalka la jarjaray si taxadar leh, maadaama ciribtirka browser-ku ay mararka qaarkood saameyn karaan hadhyada iyo samaynta. U Kala Qaybinta Qoraalka Jilayaasha Gaarka ah Mararka qaarkood ma rabo inaan habeeyo kelmad dhan ama cinwaan. Waxaan rabaa in aan habeeyo xarfo gaar ah - si aan u jileeceeyo meesheeda, u siiyo hal glyph miisaan dheeraad ah, ama xarfo kooban si madax-bannaan u nooleeyo. HTML cad iyo CSS, waxaa jira hal dariiqo oo la isku halayn karo oo taas lagu sameeyo: ku duub xaraf kasta qaybtiisa dhererkeeda ah. Taas gacanta ayaan ku samayn karaa, laakiin taasi waxay noqon doontaa mid jilicsan, way adag tahay in la ilaaliyo, oo si dhakhso ah u kala daadanaya marka nuqulku isbeddelo. Taa baddalkeeda, markaan u baahdo xakameynta xaraf kasta, waxaan isticmaalaa maktabad qoraal ah sida splt.js (inkastoo xalal kale la heli karo). Tani waxay qaadanaysaa noodhka qoraalka waxayna si toos ah u duubaysaa ereyada ama jilayaasha, waxayna i siinaysaa qabsatooyin dheeraad ah si aan u nooleeyo iyo qaabka aniga oo aan khalkhal galin calaamaddayda. Waa hab ilaalinaya HTML-ga la akhrin karo iyo semantic, iyadoo i siinaya kontoroolka wanaagsan ee aan u baahanahay inaan dib u sameeyo daabacaadda aan sinnayn, ee dabeecadda leh ee aad ku aragto kaararka cinwaannada kartoonada caadiga ah. Si kastaba ha ahaatee, habkan ayaa la socdadigniino la heli karo, sida inta badan akhristayaasha shaashadu si ay u akhriyaan noodhka qoraalka. Hadaba tan:
Hum Sweet Hum
… u akhridaa sidaad filayso: Hum macaan Hum
Laakiin tani:
H u m
… si kala duwan ayaa loo fasiri karaa iyadoo ku xiran browserka iyo akhristaha shaashadda. Qaar baa xarfaha isku xidhi doona oo erayada si sax ah u akhriyi doona. Kuwo kale ayaa laga yaabaa in ay ku hakadaan inta u dhaxaysa xarfaha, kuwaas oo xaalad-xaaladda ugu xun ay u ekaan karto: “H…” “uu…” “M…”
Nasiib darrose, qaar ka mid ah xalalka kala qaybsanaantu ma keenaan natiijo mar walba la heli karo, sidaa darteed waxaan qoray qaybiyaha qoraalkayga, splinter.js, kaas oo hadda ku jira beta. Beddelidda Warqadaha Shaqsiga ah Si aan u dhaqaajiyo Toon Text Splitter, waxaan ku daraa sifo xogta shayga aan rabo inaan kala qaybiyo:
Hum Sweet Hum
Marka hore, qoraalkaygu wuxuu u kala saaraa kelmad kasta xarfo gaar ah oo waxaan ku duubaa qaybo taako ah oo leh sifooyin fasalka iyo ARIA ah:
Qoraalku wuxuu markaa qaadanayaa nuxurka bilowga ah ee qaybta kala qaybsan wuxuuna ku daraa sifo aria ah si ay u caawiso ilaalinta gelitaanka:
Iyada oo sifooyinkaas fasalka lagu dabaqay, waxaan markaas qaabayn karaa jilayaasha gaarka ah sida aan doorto.
Tusaale ahaan, "Hum Sweet Hum," waxaan rabaa in aan ku celceliyo sida xarfaha ay uga guuraan asalka. Ka dib markii aan isticmaalay Toon Text Splitter, waxaan adeegsaday afar qiyam oo kala duwan oo tarjumaad ah aniga oo isticmaalaya dhawr :nth-child dooro si aan u abuuro muuqaal aan kala sooc lahayn: /* 4aad, 8aad, 12aad... */ .toon-char:nth-ilmo(4n) {tarjum: 0 -8px; } /* 1-aad, 5-aad, 9-aad...*/ .toon-char:nth-ilmo(4n+1) {tarjum: 0 -4px; } /* 2aad, 6aad, 10aad... */ .toon-char:nth-ilmo(4n+2) {tarjum: 0 4px; } /* 3aad, 7aad, 11aad... */ .toon-char:nth-ilmo(4n+3) {tarjum: 0 8px; }
Laakin turjumaada waa hal hanti oo aan isticmaali karo si aan u badalo qoraalkayga toon.
Waxa kale oo aan u beddeli karaa jilayaashaas gaarka ah muuqaal fawdo badan leh: /* 4aad, 8aad, 12aad... */ .toon-line .toon-char:nth-child(4n) {rogid: -4deg; } /* 1-aad, 5-aad, 9-aad...*/ .toon-char:nth-ilmo(4n+1) {rogid: -8deg; } /* 2aad, 6aad, 10aad... */ .toon-char:nth-ilmo(4n+2) {rogid: 4deg; } /* 3aad, 7aad, 11aad... */ .toon-char:nth-ilmo(4n+3) {rogid: 8deg; }
Laakin turjumaada waa hal hanti oo aan isticmaali karo si aan u badalo qoraalkayga toon. Waxa kale oo aan u beddeli karaa jilayaashaas gaarka ah muuqaal fawdo badan leh: /* 4aad, 8aad, 12aad... */ toon-line .toon-char:nth-child(4n) { wareeg: -4deg; }
/* 1-aad, 5-aad, 9-aad...*/ .toon-char:nth-ilmo(4n+1) { wareeg: -8deg; }
/* 2aad, 6aad, 10aad... */ .toon-char:nth-ilmo(4n+2) { wareeg: 4deg; }
/* 3aad, 7aad, 11aad... */ .toon-char:nth-ilmo(4n+3) { wareeg: 8deg; }
Iyo, dabcan, waxaan ku dari karaa animations si aan u jilciyo jilayaashaas oo aan u keeno cinwaannada qaabka qoraalkayga nolosha. Marka hore, waxaan sameeyay animation furaha oo wareegta jilayaasha:
@keyframes jiggle { 0%, 100% {isbedel: wareeg(var(--base-roate, 0deg)); } 25%. } 50%. } 75%. } }
Kahor intaadan ku dabaqin qaybaha taagga ah ee uu abuuray Toon Text Splitter: .toon-char { animation: jiggle 3s fudud oo aan xad lahayn; isbeddel-asalka: hoose dhexe; }
Ugu dambayntiina, dejinta qaddarka wareegga iyo dib u dhaca ka hor inta aanu qof kastaa bilaabin inuu jiggle: .toon-char:nth-ilmo(4n) {--base-rogid: -2deg; } .toon-char:nth-ilmo(4n+1) {--base-rogid: -4deg; } .toon-char:nth-ilmo(4n+2) {--saldhig-wareejin: 2deg; } .toon-char:nth-ilmo(4n+3) {--saldhig-wareejin: 4deg; }
toon-char: nth-ilmo(4n) { animation-delay: 0.1s; } toon-char: nth-ilmo(4n+1) { animation-delay: 0.3s; } toon-char: nth-ilmo(4n+2) { animation-delay: 0.5s; } toon-char: nth-ilmo(4n+3) { animation-delay: 0.7s; }
Hal qaab oo lagu sameeyo aragti Farshaxanayaasha Cinwaanka Kartoonka waxa ay lahaayeen hal qaab oo ay ku soo jiitaan, qoraalkooduna waxa uu ahaa mid muhiim u ah sida farshaxanimada ay rinjiyeen. Isla sidaas oo kale ayaa ku jirta shabakadda. Madax ama geesi si wanaagsan loo naqshadeeyeyaaggu waxa uu u baahan yahay hufnaan, dabeecad, iyo kalsooni - ma aha si fudud sawir asal ballac buuxa ah oo libdhay. Iyada oo dhawr si taxadar leh loo doortay guryaha CSS - hooska, istaroogga, asalka go'an, iyo qaar ka mid ah animation-ka - waxaan dib u abuuri karnaa isla saameyntaas. Waxaan jeclahay qoraalka toon ma aha sababtoo ah ma niyad jabay, laakiin sababtoo ah naqshadeynteedu waa ula kac. Samee doorashooyin ula kac ah, oo u ogolow in yar oo qoraal ah oo qoraal ah inay ku darto feerka naqshadahaaga.
