Baada ya kumaliza mradi ambao ulinihitaji kujifunza kila kitu nilichoweza kuhusu uhuishaji wa CSS na SVG, nilianza kuandika mfululizo huu kuhusu Uhuishaji wa Kubomoa na "Jinsi Katuni za Kawaida Zinahamasisha CSS ya Kisasa." Ili kumalizia mwaka huu, ninataka kukuonyesha jinsi ya kutumia CSS ya kisasa kuunda kipengele kinachofanya Toon Titles kuwa na athari kubwa: uchapaji wao. Ubunifu wa Kichwa cha Sanaa Katika enzi ya ukimya ya miaka ya 1920 na mwanzoni mwa miaka ya 1930, uchapaji wa kadi ya kichwa cha filamu uliunda hali, kuweka mandhari, na kuwakumbusha watazamaji aina ya filamu ambayo wamelipia kutazama.
Kadi za kichwa za katuni pia zilikuwa za chapa, hali, na mpangilio wa matukio, zote zikiwa moja. Katika miaka ya mapema, wakati bajeti kuu za studio zilikuwa kubwa, kadi hizi za kichwa mara nyingi zilikuwa za kielelezo na za kuchora.
Lakini televisheni ilipovuma katika miaka ya 1950, bajeti ilishuka, na kadi zilizoundwa na wasanii kama vile Lawrence "Art" Goble zilichukua lugha mpya ya kuona, na kuwa ya picha zaidi, ya mtindo, na isiyo ngumu zaidi. Kumbuka: Lawrence "Sanaa" Goble ni mmoja wa mashujaa wa uhuishaji wa Amerika ya katikati ya karne ambayo hupuuzwa. Kimsingi alifanya kazi kwa Hanna-Barbera wakati wa miaka yake yenye ushawishi mkubwa zaidi ya miaka ya 1950 na 1960. Goble hakuwa kihuishaji wa wahusika. Jukumu lake lilikuwa kuunda mazingira, kwa hivyo alitengeneza mazingira ya The Flintstones, Huckleberry Hound, Quick Draw McGraw, na Yogi Bear, pamoja na kadi za kichwa za ufunguzi ambazo ziliweka sauti. Kadi zake za mada, zilizo na picha za kuchora zenye nembo iliyofunikwa, zilisaidia kufafanua mwonekano mzuri wa Hanna-Barbera. Mchoro wa Goble wa wahusika kama vile Quick Draw McGraw na Yogi Bear ulikuwa mzuri kwenye skrini ndogo za TV. Badala ya kutoa tena picha tulivu kutoka kwenye katuni, alilenga kuwasilisha wazo moja, dhabiti - mara nyingi katika hariri - ambalo lilinasa kiini chake. Katika "Buzzin' Bear," Yogi anazungumza kwa helikopta. Anaruka, kikapu cha picha mkononi, katika "Bear on Picnic," na kwa "Fright yake ya Kupambana na Tuzo," Yogi huweka maandishi ya kichwa.
Kwa mwendo mdogo au bila kutegemea, muafaka mmoja wa Goble ulilazimika kuunda hali, kuweka tukio, na kuelezea hadithi. Walifanya hivi kwa kutumia rangi bapa, maumbo ya picha, na uchapaji ambao uliunganishwa mara kwa mara kwenye mchoro.
Kama wabunifu wanaofanya kazi kwenye wavuti, mada za toon zinaweza kutufundisha mengi kuhusu jinsi ya kuwasilisha sifa za chapa, kuonekana kwa mara ya kwanza, na kuweka matarajio ya matumizi ya mtu fulani kwa kutumia bidhaa au tovuti. Tunaweza kujifunza kutoka kwa mbinu za wasanii kuunda mabango, vichwa vya kurasa za kutua, na hata skrini nzuri za mtindo wa ol. Uchapaji wa Kichwa cha Toon Kadi za kichwa cha katuni zinaonyesha jinsi kuunganisha aina na taswira kunavyoleta hitaji la kichwa au shujaa. Ukiwa na vivuli vichache vya maandishi, kupotosha maandishi na kubadilisha mbinu, CSS ya kisasa hukuruhusu kugusa nishati hiyo hiyo.
Jenereta ya Kichwa cha Maandishi ya Toon Baada ya kuandika makala haya, niligundua itakuwa muhimu kuwa na zana ya kutengeneza maandishi yenye mtindo kama vile vichwa vya katuni ninavyopenda sana. Kwa hivyo nilifanya moja. Jenereta ya Kichwa cha Maandishi Yangu ya Toon hukuruhusu kujaribu rangi, mipigo, na vivuli vingi vya maandishi. Unaweza kurekebisha mpangilio wa rangi, kuweka nafasi ya herufi, kuhakiki maandishi yako katika uteuzi wa sampuli za fonti, kisha unakili CSS iliyozalishwa moja kwa moja kwenye ubao wako wa kunakili ili utumie katika mradi. Kichwa cha Toon CSS Unaweza kunakili-kubandika CSS ambayo Jenereta ya Kichwa cha Maandishi ya Toon hukupa. Lakini hebu tuangalie kwa karibu kile kinachofanya. Kivuli cha maandishi Angalia aina katika mada hii kutoka kwa kipindi cha Augie Doggie "Yuk-Yuk Duck," chenye herufi zake za manjano iliyokolea na kivuli cheusi, kigumu, kinachoiondoa chinichini na kuunda udanganyifu wa kina.
Labda tayari unajua kuwa kivuli cha maandishi kinakubali maadili manne: (1) mlalo na (2) vipunguzo wima, (3) ukungu, na (4) rangi ambayo inaweza kuwa thabiti au uwazi nusu. Thamani hizo za kukabiliana zinaweza kuwa chanya au hasi, kwa hivyo ninaweza kunakili "Yuk-Yuk Bata" kwa kutumia kivuli kigumu kilichovutwa chini na kulia: rangi: #f7f76d; maandishi-kivuli: 5px 5px 0 #1e1904;
Kwa upande mwingine, kichwa hiki cha "Pint Giant" kina hisia tofauti na kivuli chake hasi cha nusu-laini: rangi: #c2a872; kivuli cha maandishi: -7px 5px 0 #b100e, 0 -5px 10px #546c6f;
Ili kuongeza kina cha ziada na kuunda athari za kupendeza zaidi, naweza kuweka vivuli vingi. Kwa "Hebu Tutoe Bata," ninachanganya vivuli vinne: cha kwanza kivuli dhabiti na mwonekano hasi wa mlalo ili kuinua maandishi kutoka chinichini, kikifuatwa na vivuli laini zaidi vinavyoendelea kuunda ukungu kuzunguka: rangi: # 6F4D80; kivuli cha maandishi: -5px5px 0 #260e1e, /* Kivuli 1 */ 0 0 15px #e9ce96, /* Kivuli 2 */ 0 0 30px #e9ce96, /* Kivuli 3 */ 0 0 30px #e9ce96; /* Kivuli 4 */
Vivuli hivi vinaonyesha kuwa kutumia kivuli cha maandishi sio tu kuunda athari za taa, kwani zinaweza pia kuwa mapambo na kuongeza utu. Maandishi Stroke Kadi nyingi za mada za katuni zina herufi zilizo na muhtasari mzito unaozifanya zitokee chinichini. Ninaweza kuunda tena athari hii kwa kutumia maandishi-kiharusi. Kwa muda mrefu, kipengele hiki kilipatikana tu kupitia -webkit- kiambishi awali, lakini hiyo pia inamaanisha kuwa sasa kinatumika kwenye vivinjari vya kisasa.
maandishi-kiharusi ni mkato wa sifa mbili. Ya kwanza, upana wa maandishi-kiharusi, huchora contour kuzunguka herufi mahususi, huku ya pili, rangi ya maandishi-kiharusi, inadhibiti rangi yake. Kwa "Chochote Kinachoendelea," niliongeza kipigo cha bluu cha 4px kwenye maandishi ya manjano: rangi: #eff0cd; -webkit-text-stroke: 4px #7890b5; maandishi-kiharusi: 4px #7890b5;
Mipigo inaweza kuwa muhimu haswa ikiwa imeunganishwa na vivuli, kwa hivyo kwa "Kukua, Kukua, Kutoweka," niliongeza kipigo chembamba cha 3px kwenye kivuli cha 1px ambacho hakijatiwa ukungu ili kuunda athari hii ya maandishi ya pande tatu: rangi: #fbb999; maandishi-kivuli: 3px 5px 1px #5160b1; -webkit-text-stroke: 3px #984336; maandishi-kiharusi: 3px #984336;
Agizo la rangi Kutumia maandishi-kiharusi sio daima hutoa matokeo yanayotarajiwa, hasa kwa herufi nyembamba na viboko vizito, kwa sababu kwa chaguo-msingi kivinjari huchota kiharusi juu ya kujaza. Cha kusikitisha, CSS bado hainiruhusu kurekebisha uwekaji wa kiharusi kama mimi mara nyingi hufanya kwenye Mchoro. Walakini, mali ya kuagiza rangi ina maadili ambayo huniruhusu kuweka kiharusi nyuma, badala ya mbele ya, kujaza.
mpangilio wa rangi: kiharusi hupaka kiharusi kwanza, kisha kujaza, ambapo mpangilio wa rangi: kujaza hufanya kinyume: rangi: #fbb999; utaratibu wa rangi: kujaza; maandishi-kivuli: 3px 5px 1px #5160b1; rangi ya maandishi-kiharusi:#984336; upana wa maandishi-kiharusi: 3px;
Kiharusi kinachofaa huweka herufi kusomeka, huongeza uzito, na - ikiunganishwa na vivuli na mpangilio wa rangi - hutoa maandishi bapa uwepo halisi. Asili Ndani ya Maandishi Kadi nyingi za mada za katuni hupita zaidi ya rangi bapa kwa kuongeza umbile, gradient, au maelezo yaliyoonyeshwa kwenye herufi. Wakati mwingine hiyo ni muundo, wakati mwingine inaweza kuwa gradient na mabadiliko ya hila ya toni. Kwenye wavuti, ninaweza kuunda tena athari hii kwa kutumia taswira ya usuli au upinde rangi nyuma ya maandishi, na kisha kuibana kwa umbo la herufi. Hii inategemea sifa mbili zinazofanya kazi pamoja: klipu ya usuli: maandishi na rangi ya kujaza maandishi: uwazi.
Kwanza, ninatumia usuli nyuma ya maandishi. Hii inaweza kuwa picha ya bitmap au vekta au gradient ya CSS. Kwa mfano huu kutoka kipindi cha Quick Draw McGraw "Baba Bait," maandishi ya kichwa yanajumuisha upinde rangi wa juu-chini kutoka giza hadi mwanga. background: linear-gradient(0deg, #667b6a, #1d271a);
Ifuatayo, mimi huweka msingi huo kwa glyphs na kufanya maandishi kuwa wazi ili mandharinyuma ionekane kupitia: -webkit-background-clip: maandishi; -webkit-text-kujaza-rangi: uwazi;
Kwa mistari hiyo miwili tu, mandharinyuma haijachorwa tena nyuma ya maandishi; badala yake, imechorwa ndani yake. Mbinu hii inafanya kazi vizuri ikiwa imejumuishwa na viboko na vivuli. Upinde rangi uliokatwa hupeana uandishi rangi na umbile, kiharusi huweka kingo zake kuwa kali, na kivuli huiinua kutoka chinichini. Kwa pamoja, wanaunda upya mwonekano wa safu wa kadi za kichwa zilizopakwa kwa mikono bila kutumia chochote zaidi ya CSS kidogo. Kama kawaida, jaribu maandishi yaliyokatwa kwa uangalifu, kwani shida za kivinjari wakati mwingine zinaweza kuathiri vivuli na uwasilishaji. Kugawanya Maandishi Katika Herufi Binafsi Wakati mwingine sitaki kuweka neno zima au kichwa. Ninataka kuweka muundo wa herufi mahususi - kumsogeza mhusika mahali pake, kumpa glyph moja uzito wa ziada, au kuhuisha herufi chache kwa kujitegemea. Katika HTML wazi na CSS, kuna njia moja tu ya kuaminika ya kufanya hivyo: funga kila herufi katika kipengele chake cha muda. Ningeweza kufanya hivyo kwa mikono, lakini hiyo ingekuwa dhaifu, ngumu kutunza, na ingeanguka haraka wakati nakala inabadilika. Badala yake, ninapohitaji udhibiti wa kila herufi, mimi hutumia maktaba ya kugawanya maandishi kama vile splt.js (ingawa masuluhisho mengine yanapatikana). Hii inachukua nodi ya maandishi na hufunika maneno au vibambo kiotomatiki, na kunipa ndoano za ziada ili kuhuisha na mtindo bila kuharibu lebo yangu. Ni mbinu inayofanya HTML yangu isomeke na kueleweka, huku ikinipa udhibiti madhubuti ninaohitaji kuunda upya uchapaji usio na usawa, unaoonekana kwenye kadi za mada za katuni. Walakini, mbinu hii inakuja natahadhari za ufikivu, kwani visoma skrini vingi husoma nodi za maandishi kwa mpangilio. Kwa hivyo hii:
Hum Hum Tamu
... inasoma kama unavyotarajia: Hum Tamu Hum
Lakini hii:
H u m
...inaweza kufasiriwa tofauti kulingana na kivinjari na kisoma skrini. Wengine wataunganisha herufi na kusoma maneno kwa usahihi. Wengine wanaweza kusitisha kati ya herufi, ambayo katika hali mbaya zaidi inaweza kusikika kama: “H…” “U…” “M…”
Cha kusikitisha ni kwamba baadhi ya suluhu za kugawanyika hazitoi matokeo yanayopatikana kila mara, kwa hiyo nimeandika splitter yangu ya maandishi, splinter.js, ambayo kwa sasa iko kwenye beta. Kubadilisha Barua za Mtu binafsi Ili kuamilisha Mgawanyiko wangu wa Maandishi ya Toon, ninaongeza data- sifa kwa kitu ninachotaka kugawanya:
Hum Sweet Hum
Kwanza, hati yangu hutenganisha kila neno kwa herufi za kibinafsi na kuzifunga kwa sehemu ya darasa na sifa za ARIA zinatumika:
Hati kisha huchukua yaliyomo awali ya kipengee cha mgawanyiko na kuiongeza kama sifa ya aria kusaidia kudumisha ufikiaji:
Nikiwa na sifa hizo za darasa kutumika, basi ninaweza kuweka wahusika wa kibinafsi kama ninavyochagua.
Kwa mfano, kwa "Hum Sweet Hum," ninataka kuiga jinsi herufi zake huhama kutoka kwa msingi. Baada ya kutumia Toon Text Splitter yangu, nilitumia thamani nne tofauti za kutafsiri kwa kutumia viteuzi kadhaa vya :nth-child kuunda mwonekano wa nusu nasibu: /* 4, 8, 12... */ .toon-char:nth-child(4n) { translate: 0 -8px; } /* 1, 5, 9... */ .toon-char:nth-child(4n+1) { translate: 0 -4px; } /* 2, 6, 10... */ .toon-char:nth-child(4n+2) { translate: 0 4px; } /* 3, 7, 11... */ .toon-char:nth-child(4n+3) { translate: 0 8px; }
Lakini kutafsiri ni sifa moja tu ninayoweza kutumia kubadilisha maandishi yangu ya toon.
Ningeweza pia kuzungusha herufi hizo za kibinafsi kwa sura mbaya zaidi: /* 4, 8, 12... */ .toon-line .toon-char:nth-child(4n) {zungusha: -4deg; } /* 1, 5, 9... */ .toon-char:nth-child(4n+1) { zungusha: -8deg; } /* 2, 6, 10... */ .toon-char:nth-child(4n+2) { zungusha: 4deg; } /* 3, 7, 11... */ .toon-char:nth-child(4n+3) { zungusha: 8deg; }
Lakini kutafsiri ni sifa moja tu ninayoweza kutumia kubadilisha maandishi yangu ya toon. Ningeweza pia kuzungusha herufi hizo za kibinafsi kwa sura mbaya zaidi: /* 4, 8, 12... */ .toon-line .toon-char:nth-child(4n) { mzunguko: -4deg; }
/* 1, 5, 9... */ .toon-char:nth-child(4n+1) { mzunguko: -8deg; }
/* 2, 6, 10... */ .toon-char:nth-child(4n+2) { mzunguko: 4deg; }
/* 3, 7, 11... */ .toon-char:nth-child(4n+3) { mzunguko: 8deg; }
Na, bila shaka, ningeweza kuongeza uhuishaji ili kuchezea wahusika hao na kuleta uzima wa vichwa vyangu vya mitindo ya maandishi ya toon. Kwanza, niliunda uhuishaji wa fremu muhimu ambao huzungusha wahusika:
@keyframes jiggle { 0%, 100% {badilisha: zungusha(var(--base-rotate, 0deg)); } 25% {badilisha: zungusha(calc(var(--base-rotate, 0deg) + 3deg)); } 50% {badilisha: zungusha(calc(var(--base-rotate, 0deg) - 2deg)); } 75% {badilisha: zungusha(calc(var(--base-rotate, 0deg) + 1deg)); } }
Kabla ya kuitumia kwa vipengee vya span iliyoundwa na Toon Text Splitter yangu: .toon-char { uhuishaji: jiggle 3s urahisi-kutoka nje; kubadilisha-asili: katikati ya chini; }
Na mwishowe, kuweka kiasi cha mzunguko na kucheleweshwa kabla ya kila mhusika kuanza kutetereka: .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) { kucheleweshwa kwa uhuishaji: 0.1s; } .toon-char:nth-child(4n+1) { kucheleweshwa kwa uhuishaji: 0.3s; } .toon-char:nth-child(4n+2) { kucheleweshwa kwa uhuishaji: 0.5s; } .toon-char:nth-child(4n+3) { kucheleweshwa kwa uhuishaji: 0.7s; }
Fremu Moja ya Kufanya Maonyesho Wasanii wa mada za katuni walikuwa na fremu moja ya kuvutia, na uchapaji wao ulikuwa muhimu kama mchoro waliochora. Vile vile ni kweli kwenye wavuti. Kichwa kilichoundwa vizuri au shujaaeneo linahitaji uwazi, mhusika, na kujiamini - sio tu picha ya mandharinyuma iliyofifia ya upana kamili. Kwa sifa chache za CSS zilizochaguliwa kwa uangalifu - vivuli, mipigo, mandharinyuma yaliyopunguzwa, na uhuishaji fulani uliozuiliwa - tunaweza kuunda upya athari sawa. Ninapenda maandishi ya toon sio kwa sababu sina akili, lakini kwa sababu muundo wake ni wa kukusudia. Fanya chaguo za makusudi, na uruhusu uchapaji wa maandishi ya toon uongeze nguvu kwenye miundo yako.
