Nyuma yo kurangiza umushinga wansabye kwiga ibyo nshoboye byose kuri animasiyo ya CSS na SVG, natangiye kwandika uru rukurikirane rwerekeranye na Smashing Animations na "Ukuntu amakarito ya kera ya kera atera CSS igezweho." Kurangiza uyu mwaka, ndashaka kukwereka uburyo wakoresha CSS igezweho kugirango ukore kiriya kintu gituma imitwe ya Toon igira ingaruka: imyandikire yabo. Umutwe Igishushanyo mbonera Mu gihe cyo guceceka cyo mu myaka ya za 1920 no mu ntangiriro ya za 30, imyandikire y'ikarita y'icyubahiro ya filime yateje umwuka, ishyiraho ibibera, kandi yibutsa abari bateraniye aho ubwoko bwa filime bari kwishyura kugira ngo babone.
Ikarita ya titre ya Cartoon nayo yarangaga, imiterere, hamwe nugushiraho, byose byazungurutswe kimwe. Mu myaka ya mbere, iyo ingengo yimari ya sitidiyo nini yari nini, amakarita yumutwe akenshi yashushanyaga kandi ashushanya.
Ariko iyo televiziyo imaze gutera imbere mu myaka ya za 1950, ingengo yimari yagabanutse, kandi amakarita yateguwe n’abahanzi nka Lawrence “Ubuhanzi” Goble yakoresheje imvugo nshya yerekana amashusho, ahinduka ibishushanyo, bishushanya, kandi bitoroshye. Icyitonderwa: Lawrence "Ubuhanzi" Goble nimwe mu ntwari zikunze kwirengagizwa muri animasiyo yo muri Amerika yo hagati. Yabanje gukorera Hanna-Barbera mu myaka ikomeye cyane ya 1950 na 1960. Goble ntabwo yari animateur wimiterere. Uruhare rwe kwari ukurema ikirere, nuko ategura ibidukikije bya Flintstones, Huckleberry Hound, Byihuta Draw McGraw, na Yogi Bear, hamwe namakarita yo gufungura yashyizeho amajwi. Ikarita ye y'icyubahiro, irimo amashusho yanditseho ikirango, yafashije gusobanura ishusho ya Hanna-Barbera. Ibihangano bya Goble kubantu nka Quick Draw McGraw na Yogi Bear byagize akamaro kuri ecran ntoya ya TV. Aho kubyara ikarito, yibanze ku kwerekana igitekerezo kimwe, gikomeye - akenshi muri silhouette - cyafashe ishingiro ryacyo. Muri "Ikidubu cya Buzzin," Yogi arangurura ijwi muri kajugujugu. Yirukanye kure, pic-a-nic mu ntoki, muri “Bear on Picnic,” no kuri “Igihembo cyo Kurwanira Igihembo,” Yogi ashyiramo agasanduku k'umutwe.
Hamwe na bike cyangwa nta cyifuzo cyo gushingiraho, amakadiri imwe ya Goble yagombaga gukora umwuka, gushiraho ibibera, no gusobanura inkuru. Ibyo babikoze bakoresheje amabara meza, ibishushanyo mbonera, hamwe nimyandikire yakunze kwinjizwa mubuhanzi.
Nkabashushanya bakora kurubuga, imitwe ya toon irashobora kutwigisha byinshi kubyerekeranye no kwerekana imiterere yikimenyetso, gukora igitekerezo cya mbere, no gushyiraho ibyifuzo byuburambe bwumuntu ukoresheje ibicuruzwa cyangwa urubuga. Turashobora kwigira kubuhanga bwabahanzi bwo gukora banneri nziza, kumanura-page-imitwe, ndetse nibyiza ol 'bigezweho. Imyandikire Yumutwe Ikarita yerekana ikarita yerekana uburyo guhuza ubwoko hamwe namashusho bitanga punch umutwe cyangwa intwari ikeneye. Hamwe nintoki zinyandiko-igicucu, inyandiko-yerekana, hamwe nuburyo bwo guhindura, CSS igezweho igufasha gukanda muri izo mbaraga.
Toon Umwandiko Umutwe Mugihe cyo kwandika iyi ngingo, nasanze byaba byiza tugize igikoresho cyo kubyara inyandiko zanditse nkizina rya karato nkunda cyane. Nakoze rero. My Toon Text Title Generator igufasha kugerageza amabara, inkoni, hamwe nigicucu cyinshi. Urashobora guhindura irangi, ushireho intera yinyuguti, urebe inyandiko yawe muguhitamo imyandikire yintangarugero, hanyuma ukoporora CSS yakozwe muburyo butaziguye kuri clip clip kugirango ukoreshe mumushinga. Umutwe wa CSS Urashobora gukoporora-komatanya CSS ya Toon Text Title Generator iguha. Ariko reka turebe neza icyo ikora. Igicucu Reba ubwoko buri muri iyi nyito uhereye mu gice cya Augie Doggie cyitwa "Yuk-Yuk Duck," hamwe n'inyuguti z'umuhondo zijimye kandi zijimye, igicucu, igicucu, kizamura inyuma kandi kigatera kwibeshya k'ubujyakuzimu.
Ushobora kuba usanzwe uzi ko inyandiko-igicucu yemera indangagaciro enye: (1) itambitse na (2) ihagaritse, (3) itagaragara, na (4) ibara rishobora gukomera cyangwa igice-kiboneye. Indangagaciro za offset zirashobora kuba nziza cyangwa mbi, kuburyo nshobora kwigana "Yuk-Yuk Duck" nkoresheje igicucu gikomeye cyamanutse kandi iburyo: ibara: # f7f76d; igicucu-igicucu: 5px 5px 0 # 1e1904;
Kurundi ruhande, iyi "Pint Giant" ifite imyumvire itandukanye nigicucu cyayo cyoroshye-cyoroshye: ibara: # c2a872; igicucu: -7px 5px 0 # b100e, 0 -5px 10px # 546c6f;
Kugirango wongere ubujyakuzimu kandi ushireho ingaruka zishimishije, ndashobora gushiraho igicucu kinini. Kuri "Reka Dukuremo," mpuza igicucu bine: icya mbere igicucu gikomeye hamwe na horizontal itambitse kugirango uzamure inyandiko inyuma, hanyuma ukurikire igicucu cyoroheje buhoro buhoro kugirango habeho urujijo: ibara: # 6F4D80; igicucu: -5px5px 0 # 260e1e, / * Igicucu 1 * / 0 0 15px # e9ce96, / * Igicucu 2 * / 0 0 30px # e9ce96, / * Igicucu 3 * / 0 0 30px # e9ce96; Igicucu 4 * /
Igicucu cyerekana ko gukoresha inyandiko-igicucu atari ugukora ingaruka zumucyo gusa, kuko zishobora no gushushanya no kongeramo imiterere. Umwandiko Amakarita menshi yikarito yerekana amakarita afite inyuguti zitinyutse zituma zigaragara inyuma. Nshobora kongera gukora iyi ngaruka nkoresheje inyandiko-stroke. Igihe kinini, uyu mutungo waboneka gusa ukoresheje -webkit- prefix, ariko kandi bivuze ko ubu ushyigikiwe kurubuga rwa kijyambere.
inyandiko-stroke ni amagambo ahinnye kubintu bibiri. Iyambere, inyandiko-stroke-ubugari, ishushanya impande zinyuguti zitandukanye, mugihe iyakabiri, inyandiko-stroke-ibara, igenzura ibara ryayo. Kuri "Ibyo ari byo byose bigenda," nongeyeho 4px y'ubururu ku mwandiko w'umuhondo: ibara: # eff0cd; -webkit-inyandiko-stroke: 4px # 7890b5; inyandiko-stroke: 4px # 7890b5;
Inkoni irashobora kuba ingirakamaro cyane mugihe ihujwe nigicucu, kubwibyo "Gukura, Gukura, Gone," nongeyeho inkoni yoroheje ya 3px mugicucu cya 1px kitagaragara neza kugirango nkore iyi nyandiko yibice bitatu: ibara: # fbb999; igicucu-igicucu: 3px 5px 1px # 5160b1; -webkit-inyandiko-stroke: 3px # 984336; inyandiko-stroke: 3px # 984336;
Itondekanya irangi Gukoresha inyandiko-stroke ntabwo buri gihe bitanga ibisubizo byateganijwe, cyane cyane hamwe ninyuguti zoroshye kandi zinini cyane, kuko mubisanzwe mushakisha ushushanya inkoni hejuru yuzuye. Ikibabaje, CSS iracyanyemerera guhindura imyanya yubwonko nkuko nkunze kubikora mubishushanyo. Nyamara, irangi-gutondekanya imitungo ifite indangagaciro zinyemerera gushyira inkoni inyuma, aho kuba imbere, kuzura.
irangi-gutondekanya: inkoni irangi irangi mbere, hanyuma yuzuze, mugihe irangi-gahunda: kuzuza bikora ibinyuranye: ibara: # fbb999; irangi-gutondekanya: kuzuza; igicucu-igicucu: 3px 5px 1px # 5160b1; inyandiko-stroke-ibara: # 984336; inyandiko-stroke-ubugari: 3px;
Inkoni ikora neza ituma inyuguti zisomeka, ikongeramo uburemere, kandi - iyo ihujwe nigicucu nigitondekanya irangi - itanga inyandiko igaragara neza. Amavu n'amavuko Imbere yinyandiko Amakarita menshi yikarito yamakarita arenze ibara ryongeweho wongeyeho imiterere, gradients, cyangwa ibisobanuro birambuye kumyandikire. Rimwe na rimwe, ibyo ni imiterere, ikindi gihe birashobora kuba gradient hamwe na tone yoroheje. Kurubuga, nshobora kongera gukora iyi ngaruka nkoresheje ishusho yinyuma cyangwa igipimo cyinyuma yinyandiko, hanyuma nkayikata kumiterere yinyuguti. Ibi bishingiye kumitungo ibiri ikorera hamwe: background-clip: inyandiko hamwe ninyandiko-yuzuza-ibara: mucyo.
Ubwa mbere, nkoresha inyuma yinyandiko. Ibi birashobora kuba bitmap cyangwa vector ishusho cyangwa icyiciro cya CSS. Kuri uru rugero ruva mu buryo bwihuse Draw McGraw igice cya "Baba Bait," inyandiko yumutwe ikubiyemo urwego ruto rworoshye - munsi ya gradient kuva mwijimye kugeza kumucyo: inyuma: umurongo-urwego (0deg, # 667b6a, # 1d271a);
Ibikurikira, nkuramo iyo background kuri glyphs kandi nkora inyandiko ibonerana kuburyo inyuma yerekana binyuze: -webkit-background-clip: inyandiko; -webkit-inyandiko-yuzuza-ibara: mucyo;
Hamwe nimirongo ibiri gusa, inyuma ntikiri irangi inyuma yinyandiko; ahubwo, irangi muri yo. Ubu buhanga bukora neza cyane iyo buhujwe na stroke nigicucu. Icyiciro gikata gitanga inyuguti zifite ibara nuburyo, inkoni ikomeza impande zayo, kandi igicucu kikazamura uhereye inyuma. Hamwe na hamwe, barema isura igaragara yamakarita yumutwe wanditseho intoki ntakindi kirenze CSS nto. Nkibisanzwe, igeragezwa ryanditse neza witonze, nkuko mushakisha zishobora rimwe na rimwe guhindura igicucu no gutanga. Gutandukanya inyandiko mu nyuguti z'umuntu ku giti cye Rimwe na rimwe, sinshaka gutunganya ijambo ryose cyangwa umutwe. Ndashaka gutunganya inyuguti kugiti cye - guhuza inyuguti ahantu, guha glyph imwe uburemere bwinyongera, cyangwa gushushanya inyuguti nke mwigenga. Muri HTML isanzwe na CSS, hariho inzira imwe yizewe yo kubikora: kuzinga buri nyuguti mubintu byayo. Nshobora kubikora nkintoki, ariko ibyo byaba byoroshye, bigoye kubungabunga, kandi byahita bitandukana mugihe kopi ihinduka. Ahubwo, iyo nkeneye kugenzura inyuguti imwe, nkoresha isomero rigabanya inyandiko nka splt.js (nubwo ibindi bisubizo birahari). Ibi bifata inyandiko yumutwe hanyuma igahita ipfunyika amagambo cyangwa inyuguti, ikampa udukoryo twinyongera kuri animate nuburyo ntabangamiye marike yanjye. Nuburyo butuma HTML yanjye isomeka kandi ikanasobanurwa, mugihe umpaye kugenzura neza nkeneye gukora imiterere yimyandikire idahwanye, iranga ubona mubikarita ya karito ya karito. Ariko, ubu buryo buzanakugerwaho caveats, nkuko abasomyi benshi ba ecran basoma inyandiko zanditse. Ibi rero:
Hum Sweet Hum
… Soma nkuko ubyiteze: Hum Sweet Hum
Ariko ibi:
H u m
… Birashobora gusobanurwa ukundi bitewe na mushakisha hamwe nabasoma ecran. Bamwe bazahuza inyuguti kandi basome amagambo neza. Abandi barashobora guhagarara hagati yinyuguti, mubihe bibi cyane bishobora kumvikana nka: “H…” “U…” “M…”
Birababaje, ibisubizo bimwe byo gutandukanya ntibitanga ibisubizo byoroshye kuboneka, nuko nanditse inyandiko yanjye bwite itandukanya, splinter.js, ubu iri muri beta. Guhindura inzandiko z'umuntu ku giti cye Kugirango ukoreshe Toon Text Splitter, nongeyeho data- ikiranga kubintu nshaka gutandukanya:
Hum Sweet Hum
Ubwa mbere, inyandiko yanjye itandukanya buri jambo mumabaruwa kugiti cye hanyuma ikazizinga mugice cya span hamwe nicyiciro hamwe nibiranga ARIA ikoreshwa: H u m
Inyandiko noneho ifata ibyibanze byibanze byo gutandukana hanyuma ikongeraho nka aria ikiranga kugirango ifashe gukomeza kugerwaho:
H u m
Hamwe nibi byiciro biranga byashyizwe mu bikorwa, nshobora noneho gutunganya inyuguti zitandukanye nkuko nahisemo.
Kurugero, kuri "Hum Sweet Hum," ndashaka kwigana uburyo inyuguti zayo ziva kumurongo. Nyuma yo gukoresha My Toon Text Splitter, nakoresheje indangagaciro enye zitandukanye zo guhindura nkoresheje byinshi: nth-umwana watoranije gukora igice-kidasanzwe: / * Icya 4, 8, 12 ... * / .toon-char: nth-umwana (4n) {guhindura: 0 -8px; } / * Icya 1, 5, 9 ... * / .toon-char: nth-umwana (4n + 1) {guhindura: 0 -4px; } / * Icya 2, icya 6, icya 10 ... * / .toon-char: nth-umwana (4n + 2) {guhindura: 0 4px; } / * Icya 3, 7, 11 ... * / .toon-char: nth-umwana (4n + 3) {guhindura: 0 8px; }
Ariko guhindura ni umutungo umwe gusa nshobora gukoresha kugirango mpindure inyandiko yanjye.
Nshobora kandi kuzenguruka izo nyuguti kugiti cyarushijeho kuba akajagari: / * Icya 4, 8, 12 ... * / .umurongo -kuri .kuri-char: nth-umwana (4n) {kuzunguruka: -4deg; } / * Icya 1, 5, 9 ... * / .toon-char: nth-umwana (4n + 1) {kuzunguruka: -8deg; } / * Icya 2, icya 6, icya 10 ... * / .toon-char: nth-umwana (4n + 2) {kuzunguruka: 4deg; } / * Icya 3, 7, 11 ... * / .kuri char: nth-umwana (4n + 3) {kuzunguruka: 8deg; }
Ariko guhindura ni umutungo umwe gusa nshobora gukoresha kugirango mpindure inyandiko yanjye. Nshobora kandi kuzenguruka izo nyuguti kugiti cyarushijeho kuba akajagari: / * Icya 4, 8, 12 ... * / .umurongo -kuri .kuri-char: umwana-umwana (4n) { kuzunguruka: -4deg; }
/ * Icya 1, 5, 9 ... * / .kuri char: nth-umwana (4n + 1) { kuzunguruka: -8deg; }
/ * Icya 2, icya 6, icya 10 ... * / .kuri char: nth-umwana (4n + 2) { kuzunguruka: 4deg; }
/ * Icya 3, 7, 11 ... * / .toon-char: nth-umwana (4n + 3) { kuzunguruka: 8deg; }
Kandi, byanze bikunze, nshobora kongeramo animasiyo kugirango mpindure izo nyuguti kandi nzane inyito yimyandikire yimyandikire mubuzima. Ubwa mbere, naremye urufunguzo rwa animasiyo ruzenguruka inyuguti:
@keyframes jiggle { 0%, 100% {guhindura: kuzunguruka (var (- shingiro-kuzunguruka, 0deg)); } 25% {guhindura: kuzunguruka (kubara (var (- shingiro-kuzunguruka, 0deg) + 3deg)); } 50% {guhindura: kuzunguruka (kubara (var (- shingiro-kuzunguruka, 0deg) - 2deg)); } 75% {guhindura: kuzunguruka (kubara (var (- shingiro-kuzunguruka, 0deg) + 1deg)); } }
Mbere yo kubishyira mubikorwa bya span byakozwe na Toon Text Splitter: .toon-char { animasiyo: jiggle 3s itagira iherezo byoroshye-muri-hanze; guhindura-inkomoko: hagati hepfo; }
Hanyuma, gushiraho amafaranga yo kuzenguruka no gutinda mbere yuko buri nyuguti itangira kunyeganyega: .toon-char: nth-umwana (4n) {--base-kuzunguruka: -2deg; } .kuri char: nth-umwana (4n + 1) {--base-kuzunguruka: -4deg; } .toon-char: nth-umwana (4n + 2) {--base-kuzunguruka: 2deg; } .kuri char: nth-umwana (4n + 3) {--base-kuzunguruka: 4deg; }
.toon-char: nth-umwana (4n) {animasiyo-gutinda: 0.1s; } .kuri char: nth-umwana (4n + 1) {animasiyo-gutinda: 0.3s; } .kuri char: nth-umwana (4n + 2) {animasiyo-gutinda: 0.5s; } .kuri char: nth-umwana (4n + 3) {animasiyo-gutinda: 0.7s; }
Ikadiri imwe yo gukora imvugo Abakinnyi ba titre ya Cartoon bari bafite ikadiri imwe kugirango batange ibitekerezo, kandi imyandikire yabo yari ingenzi nkibikorwa bashushanyije. Ni nako bimeze kurubuga. Byateguwe neza umutwe cyangwa intwariAgace gakeneye gusobanuka, imiterere, nicyizere - ntabwo gusa ishusho yuzuye-ubugari bwibishusho. Hamwe nibintu bike byatoranijwe neza CSS - igicucu, inkoni, ibice byaciwe, hamwe na animasiyo yabujijwe - dushobora kongera gukora izo ngaruka. Nkunda inyandiko ya toon sibyo kuko nostalgic, ariko kubera igishushanyo cyayo nkana. Hitamo nkana, kandi ureke inyandiko ntoya yandika yongeweho punch kubishushanyo byawe.
