Bayan kammala aikin da ya buƙaci in koyi duk abin da zan iya game da CSS da raye-rayen SVG, na fara rubuta wannan silsilar game da Smashing Animations da “Yadda Classic Cartoons Inspire Modern CSS.” Don kammala wannan shekara, ina so in nuna muku yadda ake amfani da CSS na zamani don ƙirƙirar wannan ɓangaren da ke sa taken Toon yayi tasiri sosai: rubutun su. Taken Zane-zane A lokacin shiru na shekarun 1920 da farkon ’30s, rubutun katin taken fim ya haifar da yanayi, ya saita yanayin, kuma ya tunatar da masu sauraro irin fim ɗin da za su biya don gani.
Katunan taken zane-zane kuma suna yin alama, yanayi, da saitin wuri, duk sun birgima zuwa ɗaya. A cikin shekarun farko, lokacin da manyan kasafin kuɗaɗen ɗakin karatu suka fi girma, waɗannan katunan taken galibi suna kwatantawa da zane-zane.
Amma lokacin da talabijin ya yi girma a cikin shekarun 1950, kasafin kuɗi ya ragu, kuma katunan da masu fasaha irin su Lawrence "Art" Goble suka tsara sun karbi sabon harshe na gani, ya zama mafi hoto, mai salo, da ƙananan ƙwarewa. Lura: Lawrence “Art” Goble yana ɗaya daga cikin jaruman da ba a manta da su ba na wasan kwaikwayo na tsakiyar ƙarni na Amurka. Ya yi aiki da farko ga Hanna-Barbera a cikin shekarunta mafi tasiri na 1950s da 1960s. Goble ba ɗan wasan kwaikwayo ba ne. Matsayinsa shine ƙirƙirar yanayi, don haka ya tsara mahalli don Flintstones, Huckleberry Hound, Quick Draw McGraw, da Yogi Bear, da katunan taken buɗewa waɗanda suka saita sautin. Katunan takensa, da ke nuna zane-zane da tambari da aka lullube, sun taimaka wajen ayyana yanayin kyan gani na Hanna-Barbera. Ayyukan zane-zane na Goble don haruffa kamar Quick Draw McGraw da Yogi Bear sun yi tasiri akan ƙananan allon TV. Maimakon sake fitar da harsashi daga zane mai ban dariya, ya mai da hankali kan gabatar da ra'ayi guda ɗaya, mai ƙarfi - galibi a cikin silhouette - wanda ya ɗauki ainihin sa. A cikin "The Buzzin' Bear," Yogi ya fashe a cikin jirgi mai saukar ungulu. Ya birkice, kwandon pic-a-nic a hannu, a cikin "Bear on a Picnic," da kuma "Prize Fight Fright," Yogi ya kwalaye rubutun take.
Tare da ɗan ƙaramin motsi ko babu motsi don dogaro da su, firam ɗin Goble guda ɗaya dole ne su haifar da yanayi, saita yanayin, da bayyana labari. Sun yi wannan ta amfani da launuka masu lebur, sifofi, da rubutun rubutu waɗanda akai-akai akan haɗa su cikin zane-zane.
A matsayin masu zanen kaya waɗanda ke aiki akan yanar gizo, taken toon na iya koya mana abubuwa da yawa game da yadda ake isar da halayen alama, yin ra'ayi na farko, da saita tsammanin ƙwarewar wani ta amfani da samfur ko gidan yanar gizo. Za mu iya koyo daga dabarun masu fasaha don ƙirƙirar banners masu inganci, masu kai shafi na saukowa, har ma da kyakykyawan kyamarorin fantsama. Rubutun Taken Toon Katunan taken zane mai ban dariya suna nuna yadda nau'in haɗawa tare da hoto ke ba da naushin buƙatun kai ko jarumi. Tare da inuwar inuwar rubutu, bugun rubutu, da kuma canza dabaru, CSS na zamani yana ba ku damar shiga wannan kuzarin.
The Toon Text Generator Ta hanyar rubuta wannan labarin, na gane zai zama da amfani don samun kayan aiki don ƙirƙirar rubutu da aka tsara kamar taken zane mai ban dariya da nake so sosai. Don haka na yi daya. Generator na Rubutu na Toon yana ba ku damar yin gwaji tare da launuka, bugun jini, da inuwar rubutu da yawa. Kuna iya daidaita odar fenti, yi amfani da tazarar haruffa, samfotin rubutunku a cikin zaɓin samfuran font, sannan kwafi CSS da aka ƙirƙira kai tsaye zuwa allon allo don amfani da shi a cikin aikin. Taken Toon CSS Kuna iya kawai kwafi-manna CSS ɗin da Toon Text Title Generator ya ba ku. Amma bari mu dubi abin da yake yi. Inuwa rubutu Dubi nau'in a cikin wannan taken daga shirin Augie Doggie na "Yuk-Yuk Duck," tare da kodadde rawaya haruffa da duhu, mai wuya, inuwa mai lalacewa wanda ke dauke shi daga bango kuma yana haifar da zurfin zurfin.
Wataƙila kun riga kun san cewa inuwar rubutu tana karɓar dabi'u huɗu: (1) a kwance da (2) daidaitawa a tsaye, (3) blur, da (4) launi wanda zai iya zama mai ƙarfi ko ɗan haske. Waɗannan dabi'un da aka kashe na iya zama tabbatacce ko mara kyau, don haka zan iya yin kwafin "Yuk-Yuk Duck" ta amfani da inuwa mai wuya da aka ja da zuwa dama: launi: #f7f76d; rubutu-inuwa: 5px 5px 0 #1e1904;
A gefe guda, wannan taken "Pint Giant" yana da ji daban tare da inuwar sa mai laushi mara kyau: launi: # c2a872; inuwa rubutu: -7px 5px 0 #b100e, 0 -5px 10px # 546c6f;
Don ƙara ƙarin zurfin da ƙirƙirar ƙarin tasiri mai ban sha'awa, Zan iya shimfiɗa inuwa da yawa. Don "Bari Mu Duck Out," Na haɗa inuwa guda huɗu: na farko inuwa mai ƙarfi tare da rashin daidaituwa mara kyau don ɗaga rubutun daga bango, tare da inuwa mai laushi mai laushi don haifar da blur kewaye da shi: launi: # 6F4D80; inuwa rubutu: -5px5px 0 #260e1e, /* Shadow 1 */ 0 0 15px #e9ce96, /* Shadow 2 */ 0 0 30px #e9ce96, /* Shadow 3 */ 0 0 30px # e9ce96; /* Inuwa 4 */
Wadannan inuwa suna nuna cewa yin amfani da rubutu-inuwa ba kawai game da haifar da tasirin hasken wuta ba, saboda suna iya zama kayan ado da kuma ƙara hali. Rubutun bugun jini Yawancin katunan taken zane mai ban dariya suna nuna haruffa tare da ƙaƙƙarfan shaci wanda ke sa su fice daga bango. Zan iya sake haifar da wannan tasirin ta amfani da bugun rubutu. Na dogon lokaci, ana samun wannan kadarorin ta hanyar prefix -webkit-, amma wannan kuma yana nufin yanzu ana samun goyan bayan ta a cikin masu bincike na zamani.
buguwar rubutu gajeriyar hannu ce don kaddarori biyu. Na farko, faɗin rubutu- bugun jini, yana zana kwane-kwane kewaye da haruffa guda ɗaya, yayin da na biyu, launin rubutu-stroke, yana sarrafa launinsa. Don “Duk abin da ke Ciki,” Na ƙara bugun shuɗi 4px zuwa rubutun rawaya: launi: #eff0cd; -rubutu-bugu: 4px #7890b5; bugun rubutu: 4px #7890b5;
Ciwon bugun jini na iya zama da amfani musamman idan aka haɗe su da inuwa, don haka don “Growing, Growing, Gone,” Na ƙara daɗaɗɗen bugun jini na 3px na bakin ciki zuwa inuwar 1px da kyar don ƙirƙirar wannan tasirin rubutu mai girma uku: launi: #fbb999; rubutu-inuwa: 3px 5px 1px #5160b1; -webkit-rubutu-bugu: 3px #984336; bugun rubutu: 3px # 984336;
Odar fenti Yin amfani da bugun rubutu ba koyaushe yana haifar da sakamakon da ake tsammani ba, musamman tare da ƙananan haruffa da bugun jini mai kauri, saboda ta tsohuwa mai binciken yana zana bugun jini akan cika. Abin baƙin ciki, CSS har yanzu ba ya ba ni izinin daidaita wuri na bugun jini kamar yadda na saba yi a cikin Sketch. Duk da haka, kayan aikin fenti yana da ƙimar da ke ba ni damar sanya bugun jini a baya, maimakon a gaba, cikawa.
odar fenti: bugun jini yana fenti bugun bugun farko, sannan cikawa, alhalin odar fenti: cika yana yin akasin haka: launi: #fbb999; odar fenti: cika; rubutu-inuwa: 3px 5px 1px #5160b1; kalar rubutu-bugun jini: # 984336; fadin-bugun rubutu: 3px;
Ingantacciyar bugun jini yana kiyaye haruffa masu karantawa, yana ƙara nauyi, kuma - lokacin da aka haɗa su da inuwa da tsarin fenti - yana ba da rubutu mai faɗi a zahiri. Bayanan Ciki Rubutu Yawancin katunan zane mai ban dariya sun wuce launi mai laushi ta ƙara rubutu, gradients, ko kwatancen dalla-dalla ga rubutun. Wani lokaci wannan nau'in rubutu ne, wasu lokuta yana iya zama gradient tare da canjin sautin dabara. A kan gidan yanar gizo, Zan iya sake haifar da wannan tasirin ta amfani da hoton bango ko gradient a bayan rubutun, sannan a yanka shi zuwa siffar haruffa. Wannan ya dogara da kaddarorin guda biyu suna aiki tare: faifan bango: rubutu da rubutu-cika-launi: m.
Na farko, na yi amfani da bango a bayan rubutun. Wannan na iya zama hoton bitmap ko vector ko gradient CSS. Don wannan misalin daga cikin Saurin Zana McGraw "Baba Bait," rubutun taken ya haɗa da ƙwaƙƙwaran saman-kasa daga duhu zuwa haske: baya: madaidaiciya-gradient (0deg, #667b6a, #1d271a);
Na gaba, Ina zazzage wancan bangon zuwa glyphs kuma in sanya rubutun a bayyane ta yadda bayanan ke nunawa ta: -webkit-background-clip: rubutu; -webkit-rubutu-cika-launi: m;
Da waɗancan layukan biyu kawai, ba a sake zana bangon bayan rubutun ba; maimakon haka, an fentin shi a ciki. Wannan dabarar tana aiki sosai idan an haɗa shi da bugun jini da inuwa. Yanke gradient yana samar da harafin tare da launi da rubutu, bugun jini yana kiyaye gefunansa masu kaifi, kuma inuwa yana ɗaga shi daga bango. Tare, suna sake ƙirƙira siffa mai launi na katunan taken fentin hannu ba tare da amfani da komai ba sai ƙaramar CSS. Kamar ko da yaushe, gwada gunkin rubutu a hankali, kamar yadda quirks browser na iya shafar wani lokaci inuwa da nunawa. Rarraba Rubutu Zuwa Haruffa ɗaya Wani lokaci ba na so in tsara kalma ɗaya ko kan gaba. Ina so in tsara haruffa guda ɗaya - don karkatar da hali zuwa wuri, ba da ƙarin nauyi glyph ɗaya, ko raya ƴan haruffa daban-daban. A cikin HTML da CSS a sarari, akwai amintacciyar hanya ɗaya kawai don yin hakan: kunsa kowane hali a cikin ɓangaren sa. Zan iya yin hakan da hannu, amma hakan zai zama mai rauni, mai wuyar kiyayewa, kuma zai lalace da sauri lokacin kwafin canje-canje. Madadin haka, lokacin da nake buƙatar sarrafa kowane-wasika, Ina amfani da ɗakin karatu mai rarraba rubutu kamar splt.js (ko da yake akwai sauran mafita). Wannan yana ɗaukar kumburin rubutu kuma yana nannade kalmomi ko haruffa ta atomatik, yana ba ni ƙarin ƙugiya don yin rai da salo ba tare da lalata alamara ba. Hanya ce da ke kiyaye HTML ɗina ana iya karantawa da ma'ana, yayin da yake ba ni iko mai kyau da nake buƙatar sake ƙirƙira mara daidaituwa, ingantaccen rubutun da kuke gani a cikin manyan katunan taken zane mai ban dariya. Duk da haka, wannan hanya ta zo dafa'idodin samun dama, kamar yadda yawancin masu karatun allo ke karanta nodes ɗin rubutu cikin tsari. Don haka:
Hum Sweet Hum
... karanta kamar yadda kuke tsammani: Hum Sweet Hum
Amma wannan:
H u m
ku…za a iya fassara ta daban-daban dangane da mai lilo da mai karanta allo. Wasu za su haɗa haruffa kuma su karanta kalmomin daidai. Wasu na iya tsayawa tsakanin haruffa, wanda a cikin mafi munin yanayi zai iya zama kamar: "H..." "U..." "M..."
Abin baƙin ciki, wasu rarrabuwar hanyoyin ba sa isar da sakamako mai sauƙi koyaushe, don haka na rubuta mai raba rubutu na, splinter.js, wanda ke cikin beta a halin yanzu. Canza Wasiƙun Mutum Don kunna Toon Text Splitter dina, na ƙara sifa na bayanai zuwa kashi da nake son raba:
Hum Sweet Hum
Na farko, rubutuna yana raba kowace kalma zuwa haruffa guda ɗaya kuma yana nannade su a cikin wani ɗan gajeren lokaci tare da halayen aji da ARIA:
Rubutun sannan ya ɗauki abun ciki na farko na tsaga kashi kuma yana ƙara shi azaman sifa na aria don taimakawa ci gaba da samun dama:
ku
Tare da waɗancan halayen ajin da aka yi amfani da su, zan iya sayan haruffa ɗaya kamar yadda na zaɓa.
Misali, don "Hum Sweet Hum," Ina so in maimaita yadda haruffansa ke motsawa daga tushe. Bayan amfani da Toon Text Splitter na, na yi amfani da dabi'u daban-daban na fassara guda huɗu ta amfani da zaɓin :nth-child da yawa don ƙirƙirar kamannin bazuwar: /* 4 ta, 8, ta 12... toon-char:nth-child(4n) {fassara: 0 -8px; } /* 1, 5, ta 9... toon-char:nth-child(4n+1) {fassara: 0 -4px; } /* Na 2, 6, 10... */ toon-char:nth-child(4n+2) {fassara: 0 4px; } /* 3, 7, 11...*/ toon-char:nth-child(4n+3) {fassara: 0 8px; }
Amma fassara dukiya ɗaya ce kawai da zan iya amfani da ita don canza rubutun nawa.
Hakanan zan iya jujjuya waɗancan haruffa guda ɗaya don ma fi kama da hargitsi: /* 4 ta, 8, ta 12... .toon-line .toon-char:nth-child(4n) {juya: -4deg; } /* 1, 5, ta 9... .toon-char:nth-child(4n+1) {juya: -8deg; } /* Na 2, 6, 10... */ toon-char:nth-child(4n+2) {juya: 4deg; } /* 3, 7, 11...*/ toon-char:nth-child(4n+3) {juya: 8deg; }
Amma fassara dukiya ɗaya ce kawai da zan iya amfani da ita don canza rubutun nawa. Hakanan zan iya jujjuya waɗancan haruffa guda ɗaya don ma fi kama da hargitsi: /* 4 ta, 8, ta 12... toon-line .toon-char:nth-child(4n) { juya: -4deg; }
/* 1, 5, ta 9... toon-char:nth-child(4n+1) { juya: -8deg; }
/* Na 2, 6, 10... */ toon-char:nth-child(4n+2) { juya: 4deg; }
/* 3, 7, 11...*/ toon-char:nth-child(4n+3) { juya: 8deg; }
Kuma, ba shakka, zan iya ƙara raye-raye don jujjuya waɗancan haruffan kuma in kawo taken salon rubutu na toon zuwa rayuwa. Na farko, na ƙirƙiri raye-rayen maɓalli wanda ke juya haruffa:
@keyframes jiggle { 0%, 100% {canji: juya (var (--base-juyawa, 0deg)); } 25% {canji: juya (calc (var (--base-juyawa, 0deg) + 3deg)); } 50% {canji: juya (calc (var (--base-juyawa, 0deg) - 2deg)); } 75% {canji: juya (calc (var (--base-juyawa, 0deg) + 1deg)); } }
Kafin a yi amfani da shi zuwa abubuwan da ke da alaƙa da Toon Text Splitter na ya ƙirƙira: .toon-char { rayarwa: jiggle 3s sauƙi-in-fita mara iyaka; canza-asalin: tsakiyar kasa; }
Kuma a ƙarshe, saita adadin juyawa da jinkiri kafin kowane hali ya fara jiggle: .toon-char:nth-child(4n) {-base-juyawa: -2deg; } .toon-char:nth-child(4n+1) {--base-juyawa: -4deg; } toon-char: nth-child (4n+2) {--tushe-juya: 2deg; } .toon-char: nth-child (4n+3) {--tushe-juya: 4deg; }
.toon-char:nth-child(4n) {jinkiri-jinkiri: 0.1s; } toon-char:nth-child(4n+1) {jinkitar rai: 0.3s; } .toon-char:nth-child(4n+2) {jinkitar rai: 0.5s; } .toon-char:nth-child(4n+3) {jinkiri-jinkiri: 0.7s; }
Frame ɗaya Don Yin Ta'aziyya Masu zane-zane na zane-zane suna da firam guda ɗaya don yin tasiri, kuma rubutunsu yana da mahimmanci kamar zane-zanen da suka zana. Haka lamarin yake akan yanar gizo. Kyakkyawan zane ko gwarzoyanki yana buƙatar tsabta, ɗabi'a, da amincewa - ba wai kawai dusashe cikakken hoton bangon baya ba. Tare da ƴan zaɓaɓɓun kaddarorin CSS a hankali - inuwa, bugun jini, guntuwar bango, da wasu ƙayyadaddun raye-raye - za mu iya sake haifar da irin wannan tasirin. Ina son rubutun toon ba don ba ni da hankali ba, amma saboda ƙirar sa na ganganci ne. Yi zaɓi na gangan, kuma bari ɗan ƙaramin rubutun rubutu ya ƙara naushi ga ƙirarku.
