Pirojektii waa’ee CSS fi SVG animations waanan danda’u hunda akkan baruu na gaafatu erga xumuree booda, waa’ee Smashing Animations fi “How Classic Cartoons Inspire Modern CSS” jedhu barreessuu jalqabe. Bara kana xumuruuf, akkaataa CSS ammayyaa fayyadamuun elementii Mata dureewwan Toon akka malee dhiibbaa uumuu danda'an sana uumuu dandeessan isinitti agarsiisuu barbaada: barreeffama isaanii. Mata duree Dizaayinii Hojii Aartii Bara callisaa bara 1920mootaa fi jalqaba ’30mootaa keessatti, barreeffamni kaardii mata duree fiilmii tokkoo miira uumuun, haala mijeessuun, daawwattoota gosa fiilmii isaan ilaaluuf kaffaltii kaffalan yaadachiise.
Kaartoonni mata duree kaartuuniis maqaa, miiraa fi haala mul’ataa kan qaban yoo ta’u, hundi isaanii tokkotti kan marfaman turan. Waggoota jalqabaa, yeroo baajatni istuudiyoo gurguddoon guddaa ta’etti, kaartoonni mata duree kun yeroo baay’ee fakkeenyaa fi fakkii kaasuun kan hojjetaman turan.
Garuu yeroo televijiiniin bara 1950moota keessa guddachaa ture, baajatni gadi bu’e, kaartoonni artistoota akka Lawrence “Art” Goble’n dizaayiniin hojjetaman afaan mul’ataa haaraa fudhachuun, caalaatti graphic, stylised, fi walxaxaa xiqqaa ta’e. Hubachiisa: Lawrence “Art” Goble gootota animeeshinii walakkeessa jaarraa Ameerikaa yeroo baayyee bira darbaman keessaa tokko. Addatti waggoota dhiibbaa guddaa geessisan bara 1950 fi 1960 keessa Hanna-Barbera keessatti hojjete. Goble’n nama amala namaa sochoosu hin turre. Gaheen isaa haala qilleensaa uumuu waan tureef, naannoowwan The Flintstones, Huckleberry Hound, Quick Draw McGraw, fi Yogi Bear, akkasumas kaardii mata duree baniinsaa sagalee kaa'an dizaayinii godhe. Kaartoonni mata duree isaa fakkiiwwan asxaan itti dibame kan qaban yoo ta'u, bifa mallattoo Haannaa-Barberaa ibsuuf gargaaraniiru. Hojiin aartii Goble taphattoota akka Quick Draw McGraw fi Yogi Bear’f hojjete iskiriinii TV xixiqqoo irratti bu’a qabeessa ture. Kaartuunii irraa still tokko baay'isuu mannaa, yaada tokko, cimaa — yeroo baay'ee silhouette - kan hundee isaa qabate dhiyeessu irratti xiyyeeffate. “The Buzzin’ Bear” keessatti Yogi helikooptaraan ni bubbu’a. Inni utaalee, pic-a-nic basket harkatti qabate, “Bear on a Picnic” keessatti, fi “Prize Fight Fright” isaaf, Yogi barreeffama mata duree saanduqa.
Sochii xiqqoo ykn homaa hin qabneef, furmaata tokkicha Goble’s miira uumuu, haala mijeessuu fi seenaa tokko ibsuu qabu turan. Kana kan godhan halluu diriiraa, boca giraafikii fi taayipoogiraafii yeroo baayyee hojii aartii keessatti walitti makamu fayyadamuun.
Akka dizaayinarota weeb irratti hojjetanitti, mata dureen toon akkaataa dhuunfaa maqaa daldalaa tokkoo itti dabarsinu, yaada jalqabaa uumuu fi muuxannoo nama tokkoo oomisha ykn marsariitii fayyadamuu irraa eegamu kaa’uu dandeenyu waan baay’ee nu barsiisuu danda’a. Tooftaalee artistoota irraa barachuun baanaroota bu’a qabeessa ta’an, mata duree fuula landing-page, fi illee good ol’ fashioned splash screens uumuu dandeenya. Toon Mata Duree Taayipoogiraafii Kaartoonni mata duree kaartuunii akkaataa akaakuu fakkii waliin walitti makuun punch mata duree ykn gootni barbaadu akka kennu agarsiisu. Tooftaalee barruu-gaaddidduu, barruu-dhiibbaa, fi jijjiirraa muraasaan, CSS ammayyaa anniisaa walfakkaatu sana akka tuqxu si taasisa.
Mata Duree Barruu Toon Barreeffama kana barreessuu koo gartokkoon, meeshaa barreeffama akka mata dureewwan kaartuunii ani baay’ee jaalladhutti akkaataa barreeffama maddisiisuu danda’u qabaachuun faayidaa akka qabu hubadheera. Kanaaf tokko hojjedhe. Mata duree Barruu Toon koo halluuwwan, dhiibbaa, fi golgaa barruu hedduu akka yaaltu si gargaara. Tartiiba halluu sirreessuu dandeessa, addaan fageenya qubee hojiirra oolchuu dandeessa, barruu kee filannoo qubee fakkeenyaa keessatti dursitee ilaaluu dandeessa, kana booda CSS uumame kallattiin gara gabatee kiliiptii keetii waraabuu dandeessa piroojektii keessatti fayyadamuuf. Toon Mata duree CSS Salphaatti CSS kan Mata Duree Barruu Toon siif kennu waraabbii-maxxansuu dandeessa. Garuu waan hojjetu sirriitti haa ilaallu. Gaaddidduu barruu Gosa mata duree kana keessa jiru kutaa Augie Doggie’s “Yuk-Yuk Duck” irraa ilaalaa, qubeewwan keelloo xixiqqoo fi gaaddidduu dukkanaa’aa, jabaa, ofseet kan duuba irraa kaasuun gadi fageenya fakkeessaa uumu.
Barruu-gaaddidduun gatiiwwan afur akka fudhatu dursitee beekta: (1) ofseetota qajeelaa fi (2) ofseetota qajeeloo fi (2) jajjaboo, fi (4) halluu kan jabaa yookiin walakkaa iftoomina ta'uu danda'u. Gatiin ofseeti sun pozaatiivii ykn negaatiivii ta’uu danda’a, kanaaf gaaddidduu jabaa gadi harkifamee fi gara mirgaatti fayyadamuun “Yuk-Yuk Duck” fakkeessuu nan danda’a: halluu: #f7f76d; barruu-gaaddidduu: 5px 5px 0 #1e1904;
Gama biraatiin, mata dureen “Pint Giant” kun gaaddidduu walakkaa lallaafaa hamaa ta’een miira adda ta’e qaba: halluu: #c2a872; barruu-gaaddidduu: -7px 5px 0 #b100e, . 0 -5px 10px #546c6f kan jedhu;
Gad fageenya dabalataa dabaluu fi bu'aa hawwataa ta'e uumuuf, golboo hedduu laayibarii gochuu nan danda'a. “Let’s Duck Out” tiif, golboo afur walitti fida: inni jalqabaa gaaddidduu jabaa ofseeti qajeelaa negaatiivii qabu barruu duuba irraa kaasuuf, itti aansuunis gaaddidduuwwan tartiibaan lallaafaa ta’an naannoo isaa jajjaboo uumuuf: halluu: #6F4D80; barruu-gaaddidduu: -5px5px 0 #260e1e, /* Gaaddidduu 1 */ . 0 0 15px #e9ce96, /* Gaaddidduu 2ffaa */ . 0 0 30px #e9ce96, /* Gaaddidduu 3ffaa */ . 0 0 30px #e9ce96 irratti kan argamu; /* Gaaddidduu 4ffaa */ .
Gaaddidduuwwan kunniin barruu-gaaddidduu fayyadamuun bu’aa ibsaa uumuu qofa akka hin taane agarsiisu, sababiin isaas faaya ta’uu fi dhuunfaa dabaluu danda’a. Barreeffama Istirookii Kaartoonni mata duree kaartuunii hedduun qubeewwan sarara jajjaboo qaban kan duuba irraa adda taʼan qabu. Bu'aa kana barruu-dhiibbaa fayyadamuun irra deebi'ee uumuu nan danda'a. Yeroo dheeraaf, qabeenyi kun karaa durtii -webkit- qofa argama ture, garuu amma biraawzaroota ammayyaa hunda irratti deeggarameera jechuudha.
text-stroke jechuun gabaabduu qabeentota lamaati. Inni jalqabaa, bal'ina-barruu-dhiibbaa, naannoo qubeewwan dhuunfaatti kontooraa kan kaasu yoo ta'u, inni lammaffaan, halluu barruu-dhiibbaa, halluu isaa to'ata. “Whatever Goes Pup” tiif, barreeffama keelloo irratti 4px blue stroke dabaleera: halluu: #eff0cd; -webkit-barruu-dhiibbaa: 4px #7890b5; barruu-dhiibbaa: 4px #7890b5;
Keessattuu yeroo gaaddidduu wajjin walitti makaman istirookii faayidaa qabaachuu danda’u, kanaaf “Growing, Growing, Gone” tiif, bu’aa barruu diimeshinii sadii kana uumuuf gaaddidduu 1px kan baay’ee jajjaboo ta’etti dhiibbaa 3px haphii dabaleera: halluu: #fbb999; barruu-gaaddidduu: 3px 5px 1px #5160b1; -webkit-barruu-dhiibbaa: 3px #984336; barruu-dhiibbaa: 3px #984336;
Tartiiba Dibu Barruu-dhiibbaa fayyadamuun yeroo hunda bu’aa eegamu hin argamsiisu, keessumaa qubee haphii fi dha’annaa furdaa ta’een, sababni isaas akka durtiitti biraawzariin dhangala’aa guutinsa irratti harkisa. Kan nama gaddisiisu, CSS ammallee akkan yeroo baayyee Sketch keessatti godhu bakka stroke placement akkan sirreessuu naaf hin hayyamu. Haa ta'u malee, qabeentiin tartiiba halluu gatiiwwan akkan istirookii guutinsa fuuldura osoo hin taane, duuba akkan kaa'u na dandeessisan qaba.
paint-order: stroke dursee stroke, sana booda guutinsa dibu, paint-order: fill ammoo faallaa kanaa hojjeta: halluu: #fbb999; tartiiba dibu: guutuu; barruu-gaaddidduu: 3px 5px 1px #5160b1; halluu-barruu-dhiibbaa:#984336; bal'ina-barruu-dhiibbaa: 3px;
Istirookiin bu'a qabeessa ta'e qubeewwan akka dubbifaman taasisa, ulfaatina dabalata, fi — yeroo gaaddidduu fi tartiiba halluu wajjin walitti makamu — barruu diriiraa argama dhugaa kenna. Duubbee Barreeffama Keessaa Kaartoonni mata duree kaartuunii hedduun qubeewwan irratti uwwisa, garagalcha ykn balʼina fakkii qabu dabaluudhaan halluu diriiraa bira darba. Yeroo tokko tokko sun teekchara yoo ta’u, yeroo biraa immoo garagalcha jijjiirama sagalee xixiqqoo qabu ta’uu danda’a. Weeb irratti, fakkii duubbee ykn garagalcha barruu duuba fayyadamuun, fi sana booda gara boca qubeewwanitti cicciruudhaan, bu'aa kana irra deebi'ee uumuu nan danda'a. Kunis qabeentota lama waliin hojjetan irratti hirkata: background-clip: barruu fi barruu-guutuu-halluu: iftoomina.
Jalqaba, barreeffamicha duuba duubbee hojiirra oolcha. Kun bitmap ykn fakkii veektarii ykn garagalcha CSS ta'uu danda'a. Fakkeenya kanaaf kutaa Quick Draw McGraw “Baba Bait” irraa, barreeffamni mata duree dukkana irraa gara ifaatti garagalcha gubbaa–jalaa xixiqqoo of keessatti qabata: duubbee: sarara-giraadiyeentii (0deg, # 667b6a, # 1d271a);
Itti aansuudhaan, duubbee sana gara gilgaalotaatti nan cicciree barruu iftoomina akka ta'u nan godha akka duubbee karaa: -webkit-background-clip: barruu; -webkit-barruu-guutuu-halluu: iftoomina;
Sararoota lamaan sana qofaan, kana booda duubni barreeffamicha duuba hin dibamu; kanaa mannaa, keessa isaa dibame. Tooftaan kun keessumaa yeroo stroke fi shadow wajjin walitti makamu akka gaariitti hojjeta. Giraadiyeentiin ciccirame qubee halluu fi uwwisa kenna, dhiibbaan qarqara isaa qara akka ta'u taasisa, gaaddidduun immoo duubbee irraa ol kaasa. Waliin ta'uun, CSS xiqqoo malee homaa hin fayyadamne, ilaalcha laayibarii kaardii mata duree harkaan diimame irra deebi'anii uumu. Akkuma yeroo hunda, barruu ciccirame of eeggannoodhaan qoradhu, sababiin isaas quirks biraawzari yeroo tokko tokko golgaa fi agarsiisa irratti dhiibbaa uumuu danda'a. Barruu Gara Arfiilee Dhuunfaa Qooduun Yeroo tokko tokko jecha guutuu ykn mata duree tokko style gochuu hin barbaadu. Qubeewwan dhuunfaa akkaataa itti gochuu barbaada — arfii tokko bakka isaatti dhiibuuf, giliifii tokkoof ulfaatina dabalataa kennuudhaaf, ykn qubeewwan muraasa of danda'ee sochoosuuf. HTML fi CSS ifa ta’e keessatti, karaan amanamaan tokko qofatu jira: tokkoon tokkoon arfii elementii span mataa isaatiin marsi. Sana harkaan gochuu nan danda'a ture, garuu sun dadhaboo, kunuunsuun rakkisaa fi yeroo waraabbii jijjiiramu dafee ni kufa. Inumaayyuu, yeroon too'annoo qubee tokkoof barbaadu, mana kitaabaa barruu qoqqooduun akka splt.js fayyadama (furmaatonni biroo jiraatanis). Kun noodi barruu fudhatee ofumaan jechoota ykn arfiilee marsa, mallattoo koo osoo hin jeeqin akkan sochoosuu fi akkaataa itti hookkoo dabalataa naaf kenna. Innis mala HTML koo dubbifamaa fi hiika akka qabaatu kan godhu yoo ta’u, to’annoo midhaan xiqqaa ta’e kan ani barbaachisu kan naaf kennu, kan ani kan na barbaachisu taayipogiraafii wal qixa hin taane, amala kan qabu kan kaardii mata duree kaartuunii kalaasikii keessatti argitan. Haa ta'u malee, malan kun waliin dhufaakeekkachiisa dhaqqabummaa, akkuma dubbistoonni iskiriinii baay'een isaanii noodota barruu tartiiba dubbisan. Kanaafuu kun:
Hum Hum Mi'aawaa
...akkuma isin eegdan dubbisa: Hum Mi'aawaa Hum
Garuu kun:
jechuun ni danda'ama H jedhu u jechuun ni danda’ama m jedhamuun beekama
jechuun ni danda’ama...browser fi screen reader irratti hundaa'uun haala adda addaatiin hiikamuu danda'a. Gariin qubeewwan walitti hidhuun jechoota sirritti dubbisu. Kaan immoo qubee gidduutti xiqqoo dhaabachuu dandaʼu, kunis haala hamaa taʼeen akkas fakkaachuu dandaʼa: “H...” “U...” “M...”
Kan nama gaddisiisu, furmaatni qoqqoodinsa tokko tokko bu’aa yeroo hunda dhaqqabamaa ta’e hin kennan, kanaaf qoqqoodinsa barruu mataa kootii, splinter.js, kan yeroo ammaa beetaa keessa jiru barreesseen jira. Xalayaa Dhuunfaa Jijjiiruu Qoqqoodduu Barruu Toon koo hojiitti hiikuuf, elementii ani qoodu barbaadutti amaloota deetaa nan dabala:
Hum Mi'aawaa Hum
Tokkoffaa, iskiriiptiin koo tokkoon tokkoon jechaa qubee dhuunfaatti addaan baasee elementii span keessatti amaloota gitaa fi ARIA hojiirra oolan waliin marsa: H u m
Sana booda iskiriiptiin qabiyyee jalqabaa qaama qoqqoodame fudhatee akka amaloota ariaatti dabalee dhaqqabummaa eeguuf gargaara:
H u m
jechuun ni danda’amaAmaloota gitaa sana hojiirra oolan, sana booda arfiilee dhuunfaa akkan filadhetti akkaataa gochuu nan danda'a.
Fakkeenyaaf, “Hum Sweet Hum” tiif, akkaataa qubeewwan isaa sarara bu’uuraa irraa fagaatan fakkeessuu barbaada. Erga Toon Text Splitter koo fayyadamee booda, filannoowwan :nth-child hedduu fayyadamuun gatiiwwan hiikkaa adda addaa afur hojii irra oolche, ilaalcha walakkaa tasaa uume: /* 4ffaa, 8ffaa, 12ffaa... */ .toon-char:nth-mucaa (4n) { hiikuu: 0 -8px; } . /* 1ffaa, 5ffaa, 9ffaa... */ .toon-char:nth-mucaa (4n+1) { hiikuu: 0 -4px; } . /* 2ffaa, 6ffaa, 10ffaa... */ .toon-char:nth-mucaa (4n+2) { hiikuu: 0 4px; } . /* 3ffaa, 7ffaa, 11ffaa... */ .toon-char:nth-mucaa (4n+3) { hiikuu: 0 8px; } .
Garuu hiikuun qabeentaa tokko qofa kan ani barruu toon koo jijjiiruuf itti fayyadamuu danda'udha.
Akkasumas arfiilee dhuunfaa sana naanneffachuu nan danda'a ture, ilaalcha daran jeequmsa qabuuf: /* 4ffaa, 8ffaa, 12ffaa... */ .toon-sarara .toon-char:nth-mucaa (4n) { naannessu: -4deg; } . /* 1ffaa, 5ffaa, 9ffaa... */ .toon-char:nth-mucaa (4n + 1) { naanneffachuu: -8deg; } . /* 2ffaa, 6ffaa, 10ffaa... */ .toon-char:nth-mucaa (4n + 2) { naanneffachuu: 4deg; } . /* 3ffaa, 7ffaa, 11ffaa... */ .toon-char:nth-mucaa (4n + 3) { naanneffachuu: 8deg; } .
Garuu hiikuun qabeentaa tokko qofa kan ani barruu toon koo jijjiiruuf itti fayyadamuu danda'udha. Akkasumas arfiilee dhuunfaa sana naanneffachuu nan danda'a ture, ilaalcha daran jeequmsa qabuuf: /* 4ffaa, 8ffaa, 12ffaa... */ .toon-sarara .toon-char:nth-mucaa(4n) { . naanneffachuu: -4deg; } .
/* 1ffaa, 5ffaa, 9ffaa... */ .toon-char:mucaa-nffaa(4n+1) { . naanneffachuu: -8deg; } .
/* 2ffaa, 6ffaa, 10ffaa... */ .toon-char:mucaa-nffaa(4n+2) { . naanneffachuu: 4deg; } .
/* 3ffaa, 7ffaa, 11ffaa... */ .toon-char:mucaa-nffaa(4n+3) { . naanneffachuu: 8deg; } .
Akkasumas, beekamaadha, arfiilee sana jiggle gochuuf animeeshinii dabaluu fi mata dureewwan akkaataa barreeffama toon koo jireenyatti fiduu nan danda'a ture. Jalqaba, sochii furtuu furtuu kan arfiilee naannessu uume:
@furkii furtuuwwan jiggle { . 0%, 100% { jijjiirraa: naannessu (var (--bu'uura-naanna'uu, 0deg)); } . 25% { jijjiirraa: naannessu (calc (var (--bu'uura-naanna'uu, 0deg) + 3deg)); } . 50% { jijjiirraa: naannessu (calc (var (--bu'uura-naanna'uu, 0deg) - 2deg)); } . 75% { jijjiirraa: naannessu (calc (var (--bu'uura-naanna'uu, 0deg) + 1deg)); } . } .
Qaamolee span kan Toon Text Splitter kootiin uumaman irratti hojii irra oolchuu dura: .toon-char { . animation: jiggle 3s daangaa hin qabne salphaatti-ba'uu; jijjiirraa-ka’umsa: giddugaleessa jalaa; } .
Akkasumas dhumarratti, hamma naanneffamuu fi harkifannaa osoo tokkoon tokkoon arfii jiggle hin jalqabin saaguu: .toon-char:nth-mucaa (4n) { --bu'uura-naanna'uu: -2deg; } . .toon-char:nth-mucaa (4n + 1) { --bu'uura-naanna'uu: -4deg; } . .toon-char:nth-mucaa (4n + 2) { --bu'uura-naanna'uu: 2deg; } . .toon-char:nth-mucaa (4n + 3) { --bu'uura-naanna'uu: 4deg; } .
.toon-char:nth-child(4n) { sochii-harkifannaa: 0.1s; } . .toon-char:nth-child(4n+1) { sochii-harkifannaa: 0.3s; } . .toon-char:nth-child(4n+2) { sochii-harkifannaa: 0.5s; } . .toon-char:nth-child(4n+3) { sochii-harkifannaa: 0.7s; } .
Fureemii Tokko Yaada Uummata Artistoonni mata duree kaartuunii yaada namaa kakaasuuf furmaata tokko kan qaban siʼa taʼu, barreeffamni isaanii akkuma hojii aartii isaan diban barbaachisaa ture. Weebsaayitii irrattis kanuma. Mata duree ykn goota akka gaariitti qophaa'enaannoon ifa, amala, fi ofitti amanamummaa barbaada — fakkii duubbee bal'ina guutuu faded qofa miti. Amaloota CSS of eeggannoodhaan filataman muraasaan — gaaddidduu, dhiibbaa, duubbee ciccirame, fi sochii qaamaa daangeffame tokko tokko — dhiibbaa walfakkaatu sana irra deebi'uun uumuu dandeenya. Barreeffama toon kanan jaalladhu waanan nostalgic ta’eef osoo hin taane, dizaayiniin isaa itti yaadamee waan ta’eef. Filannoo itti yaaddee godhi, akkasumas barruu toon xiqqoo taayipogiraafiin dizaayinoota kee irratti punch haa dabalu.
