CSS နှင့် SVG ကာတွန်းများအကြောင်း တတ်နိုင်သမျှ လေ့လာရန် လိုအပ်သော ပရောဂျက်တစ်ခုပြီးသောအခါ၊ Smashing Animations နှင့် "ဂန္ထဝင်ကာတွန်းများ ခေတ်မီ CSS ကို မည်ကဲ့သို့ လှုံ့ဆော်သည်" အကြောင်း ဤစီးရီးကို စတင်ရေးသားခဲ့သည်။ ဤနှစ်တွင်၊ Toon Titles သည် အလွန်အကျိုးသက်ရောက်မှုရှိစေမည့် အဆိုပါဒြပ်စင်ကိုဖန်တီးရန် ခေတ်မီ CSS ကိုအသုံးပြုနည်းကို သင်ပြလိုပါသည်။ Title Artwork Design ၊ 1920s နှင့် 30s အစောပိုင်းကာလများတွင် အသံတိတ်ခေတ်တွင်၊ ရုပ်ရှင်ခေါင်းစဉ်ကတ်တစ်ခု၏ စာစီစာရိုက်သည် စိတ်ခံစားချက်ကို ဖန်တီးပေးကာ မြင်ကွင်းကို ဖန်တီးပေးပြီး ၎င်းတို့ကြည့်ရှုလိုသည့် ရုပ်ရှင်အမျိုးအစားကို ပရိသတ်အား သတိပေးစေသည်။
ကာတွန်းခေါင်းစဉ်ကတ်များသည် တံဆိပ်တပ်ခြင်း၊ စိတ်ခံစားချက်နှင့် မြင်ကွင်းဆက်တင်တို့ကိုလည်း တစ်ခုတည်းအဖြစ် ပေါင်းစပ်ထားသည်။ အစောပိုင်းနှစ်များတွင်၊ အဓိကစတူဒီယိုဘတ်ဂျက်များပိုကြီးလာသောအခါ၊ ဤခေါင်းစဉ်ကတ်များသည် မကြာခဏဆိုသလို သရုပ်ဖော်ပုံနှင့် ပန်းချီလက်ရာများဖြစ်သည်။
သို့သော် 1950 ခုနှစ်များအတွင်း ရုပ်မြင်သံကြား ထွန်းကားလာသောအခါတွင် ဘတ်ဂျက်များ ကျဆင်းသွားကာ Lawrence “Art” Goble ကဲ့သို့သော အနုပညာရှင်များက ဒီဇိုင်းထုတ်ထားသော ကတ်များကို ရုပ်မြင်သံကြားဘာသာစကားအသစ်ကို လက်ခံကျင့်သုံးကာ ပိုမိုဂရပ်ဖစ်၊ ပုံစံကျလာပြီး အနုစိတ်နည်းလာသည်။ မှတ်ချက်- Lawrence “Art” Goble သည် ရာစုအလယ်ပိုင်း အမေရိကန် ကာတွန်းရုပ်ရှင်များ၏ မကြာခဏ သတိမမူမိသော သူရဲကောင်းများထဲမှ တစ်ဦးဖြစ်သည်။ သူသည် 1950 နှင့် 1960 နှစ်များအတွင်း ၎င်း၏ သြဇာအရှိဆုံးနှစ်များတွင် Hanna-Barbera အတွက် အဓိကအလုပ်လုပ်ခဲ့သည်။ Goble သည် ဇာတ်ကောင်ကာတွန်းမဟုတ်ခဲ့ပါ။ သူ၏အခန်းကဏ္ဍသည် လေထုဖန်တီးရန်ဖြစ်ပြီး၊ ထို့ကြောင့် The Flintstones၊ Huckleberry Hound၊ Quick Draw McGraw နှင့် Yogi Bear တို့အတွက် ပတ်ဝန်းကျင်များကို ဒီဇိုင်းထုတ်ကာ အသံထွက်စေရန် ခေါင်းစဉ်ကတ်များကို ရေးဆွဲခဲ့သည်။ လိုဂိုထပ်ထိုးထားသော ပန်းချီကားများပါရှိသော သူ၏ ခေါင်းစဉ်ကတ်များသည် Hanna-Barbera ၏ အထင်ကရအသွင်အပြင်ကို သတ်မှတ်ရာတွင် အထောက်အကူဖြစ်စေသည်။ Quick Draw McGraw နှင့် Yogi Bear ကဲ့သို့သော ဇာတ်ကောင်များအတွက် Goble ၏ အနုပညာလက်ရာသည် သေးငယ်သော တီဗီဖန်သားပြင်များတွင် ထိရောက်မှုရှိသည်။ ကာတွန်းထဲက ရုပ်သေးရုပ်ကို ပြန်ထုတ်မယ့်အစား သူ့ရဲ့အနှစ်သာရကို ဖမ်းစားနိုင်တဲ့ တစ်ခုတည်းသော၊ ခိုင်မာတဲ့ စိတ်ကူးတစ်ခုကို တင်ပြဖို့ အာရုံစိုက်ခဲ့တယ်။ "The Buzzin' Bear" တွင် ယောဂီသည် ရဟတ်ယာဉ်ဖြင့် အသံမြည်နေသည်။ သူသည် "Picnic on a Picnic" တွင် လက်ထဲတွင်ရှိသော pic-a-nic ခြင်းတောင်း နှင့် သူ၏ "Prize Fight Fright" အတွက် Yogi သည် ခေါင်းစဉ်စာသားကို ဘောက်စ်တွင် ကပ်ထားသည်။
အားကိုးရန် အနည်းငယ် သို့မဟုတ် လုံးဝမရှိဘဲ၊ Goble ၏ တစ်ခုတည်းသောဘောင်များသည် စိတ်ခံစားချက်ကို ဖန်တီးရန်၊ မြင်ကွင်းကို သတ်မှတ်ရန်နှင့် ဇာတ်လမ်းတစ်ပုဒ်ကို ဖော်ပြရန် လိုအပ်သည်။ ၎င်းတို့သည် ပြားချပ်သောအရောင်များ၊ ဂရပ်ဖစ်ပုံသဏ္ဍာန်များနှင့် စာစီစာရိုက်များကို အနုပညာလက်ရာတွင် မကြာခဏ ပေါင်းစပ်အသုံးပြုထားသည်။
ဝဘ်ပေါ်တွင် အလုပ်လုပ်သော ဒီဇိုင်နာများအနေနှင့် Toon title သည် အမှတ်တံဆိပ်တစ်ခု၏ ကိုယ်ရည်ကိုယ်သွေးကို မည်သို့ဖော်ပြရန်၊ ကုန်ပစ္စည်း သို့မဟုတ် ဝဘ်ဆိုက်ကို အသုံးပြုသည့် တစ်စုံတစ်ဦး၏အတွေ့အကြုံအတွက် မျှော်လင့်ချက်များချမှတ်နည်းတို့ကို သင်ပေးနိုင်သည်။ ထိရောက်သောနဖူးစည်းများ၊ ဆင်းသက်သည့်စာမျက်နှာခေါင်းစီးများနှင့် ကောင်းမွန်သော ခေတ်ဆန်သော splash စခရင်များကိုပင် ဖန်တီးရန် အနုပညာရှင်များ၏ နည်းပညာများမှ သင်ယူနိုင်ပါသည်။ Toon ခေါင်းစဉ် Typography ကာတွန်းခေါင်းစဉ်ကတ်များသည် ပုံများနှင့် အမျိုးအစား ပေါင်းစည်းထားသည့် ခေါင်းစီး သို့မဟုတ် ဟီးရိုး လိုအပ်ချက်များကို ဖြည့်ဆည်းပေးပုံကို ပြသသည်။ စာသားအရိပ်၊ စာသားရိုက်ခြင်းနှင့် လှည့်ကွက်များအသွင်ပြောင်းခြင်း လက်တစ်ဆုပ်စာဖြင့်၊ ခေတ်မီ CSS သည် သင့်အား ထိုတူညီသောစွမ်းအင်သို့ နှိပ်နိုင်မည်ဖြစ်သည်။
Toon Text Title Generator ဤဆောင်းပါးကိုရေးခြင်းဖြင့် တစ်စိတ်တစ်ပိုင်းအားဖြင့် ကျွန်ုပ်အလွန်နှစ်သက်သော ကာတွန်းခေါင်းစဉ်များကဲ့သို့ စာသားပုံစံဖန်တီးရန် ကိရိယာတစ်ခုရှိခြင်းသည် အသုံးဝင်မည်ဖြစ်ကြောင်း ကျွန်ုပ်သဘောပေါက်ခဲ့ပါသည်။ ဒါနဲ့ ကျွန်တော် တစ်ခုလုပ်လိုက်တယ်။ My Toon Text Title Generator သည် သင့်အား အရောင်များ၊ လေဖြတ်ခြင်းနှင့် စာသားအရိပ်များစွာဖြင့် စမ်းသပ်နိုင်စေပါသည်။ သင်သည် ဆေးခြယ်မှုအစီအစဥ်ကို ချိန်ညှိနိုင်ပြီး စာလုံးအကွာအဝေးကို အသုံးချနိုင်သည်၊ နမူနာဖောင့်ရွေးချယ်မှုတွင် သင့်စာသားကို အစမ်းကြည့်ရှုနိုင်ပြီး ပရောဂျက်တစ်ခုတွင် အသုံးပြုရန်အတွက် ထုတ်လုပ်ထားသော CSS ကို သင့်ကလစ်ဘုတ်သို့ တိုက်ရိုက်ကူးယူနိုင်သည်။ Toon Title CSS Toon Text Title Generator မှ သင့်အား ပေးဆောင်သည့် CSS ကို ရိုးရှင်းစွာ ကော်ပီကူးထည့်နိုင်သည်။ ဒါပေမယ့် အဲဒါဘာလုပ်လဲဆိုတာကို ပိုသေချာကြည့်ရအောင်။ စာသားအရိပ် Augie Doggie ၏ "Yuk-Yuk Duck" ဇာတ်လမ်းတွဲမှ အဝါဖျော့ဖျော့စာလုံးများနှင့် နောက်ခံမှဖယ်ရှားပြီး နက်နဲသောထင်ယောင်ထင်မှားဖြစ်စေသည့် မှောင်မိုက်သော၊ မာကျောသော၊ နှိမ်နှင်းသည့်အရိပ်ဖြင့် ဤခေါင်းစဉ်ကို ကြည့်ပါ။
စာသားအရိပ်သည် တန်ဖိုးလေးခုကို လက်ခံသည်- (၁) အလျားလိုက်နှင့် (၂) ဒေါင်လိုက်အော့ဖ်ဆက်များ၊ (၃) မှုန်ဝါးမှုနှင့် (၄) အစိုင်အခဲ သို့မဟုတ် တစ်ဝက်သာမြင်နိုင်သော အရောင်တစ်ခုတို့ကို လက်ခံနိုင်သည်ကို သင်သိပြီးသားဖြစ်ပေမည်။ ထိုအော့ဖ်ဆက်တန်ဖိုးများသည် အပြုသဘော သို့မဟုတ် အနုတ်လက္ခဏာ ဖြစ်နိုင်သည်၊ ထို့ကြောင့် ကျွန်ုပ်သည် ခက်သောအရိပ်ကို ဆွဲချကာ ညာဘက်တွင် "Yuk-Yuk Duck" ကို ပုံတူပွားနိုင်သည်- အရောင်- #f7f76d; စာသားအရိပ်- 5px 5px 0 #1e1904;
အခြားတစ်ဖက်တွင်၊ ဤ "Pint Giant" ခေါင်းစဉ်သည် ၎င်း၏ အပျက်သဘောဆောင်သော ပျော့ပျောင်းသောအရိပ်နှင့် ကွဲပြားသော ခံစားချက်ရှိသည်။ အရောင်- #c2a872; စာသားအရိပ်- -7px 5px 0 #b100e၊ 0 -5px 10px #546c6f;
အပိုအတိမ်အနက်ကိုထည့်ကာ ပိုမိုစိတ်ဝင်စားစရာကောင်းသောအကျိုးသက်ရောက်မှုများဖန်တီးရန်၊ အရိပ်များစွာကို အလွှာပေးနိုင်သည်။ "Let's Duck Out" အတွက် ကျွန်ုပ်သည် အရိပ်လေးခုကို ပေါင်းစပ်ထားသည်- ပထမတစ်ခုက စာသားကို နောက်ခံမှဖယ်ရှားရန် အလျားလိုက်အလျားလိုက် အော့ဖ်ဆက်ဖြင့် အစိုင်အခဲအရိပ်တစ်ခု၊ ၎င်းနောက်တွင် အနီးတစ်ဝိုက်တွင် မှုန်ဝါးလာစေရန် တဖြည်းဖြည်းပျော့ပြောင်းလာသော အရိပ်များဖြင့်- အရောင်- #6F4D80; စာသားအရိပ်- -5px5px 0 #260e1e၊ /* Shadow 1 */ 0 0 15px #e9ce96, /* Shadow 2*/ 0 0 30px #e9ce96, /* Shadow 3*/ 0 0 30px #e9ce96; /*အရိပ် 4*/
ဤအရိပ်များသည် စာသား-အရိပ်ကို အသုံးပြုခြင်းသည် အလှဆင်ခြင်းနှင့် ပင်ကိုယ်စရိုက်ကို ပေါင်းထည့်နိုင်သောကြောင့် အလင်းရောင်ဆိုင်ရာ အထူးပြုလုပ်ချက်များကို ဖန်တီးခြင်းမျှသာမဟုတ်ကြောင်း ပြသသည်။ စာသားလေဖြတ်ခြင်း။ ကာတွန်းခေါင်းစဉ်ကတ်အများအပြားတွင် ၎င်းတို့ကို နောက်ခံမှ ထင်ရှားပေါ်လွင်စေသည့် ရဲရင့်သောကောက်ကြောင်းဖြင့် စာလုံးများပါရှိသည်။ စာသား-စထရိကို အသုံးပြု၍ ဤအကျိုးသက်ရောက်မှုကို ကျွန်ုပ်ပြန်လည်ဖန်တီးနိုင်သည်။ အချိန်အတော်ကြာအောင်၊ ဤပိုင်ဆိုင်မှုသည် -webkit- ရှေ့နောက်ဆက်တွဲမှတစ်ဆင့်သာ ရနိုင်သော်လည်း၊ ၎င်းသည် ယခုအခါ ခေတ်မီဘရောက်ဆာများပေါ်တွင် အသုံးပြုနိုင်ပြီဟု ဆိုလိုသည်။
text-stroke သည် ဂုဏ်သတ္တိနှစ်ခုအတွက် အတိုကောက်ဖြစ်သည်။ ပထမ၊ text-stroke-width သည် စာလုံးတစ်လုံးချင်းစီ၏ ပတ်လည် contour ကိုဆွဲပြီး၊ ဒုတိယ၊ text-stroke-color သည် ၎င်း၏အရောင်ကို ထိန်းချုပ်သည်။ "Whatever Goes Pup" အတွက် ကျွန်ုပ်သည် အဝါရောင်စာသားတွင် 4px အပြာရောင်ကို ထည့်ပေးခဲ့သည်- အရောင်- #eff0cd; -webkit-text-stroke- 4px #7890b5; စာသား-လေဖြတ်ခြင်း- 4px #7890b5;
အရိပ်များနှင့်ပေါင်းစပ်သောအခါတွင် လေဖြတ်ခြင်းများသည် အထူးအသုံးဝင်နိုင်သည်၊ ထို့ကြောင့် "ကြီးထွားလာခြင်း၊ ကြီးထွားလာခြင်း၊ ပျောက်ကွယ်သွားခြင်း" အတွက် ဤသုံးဖက်မြင်စာသားအကျိုးသက်ရောက်မှုကိုဖန်တီးရန်အတွက် 3px လေဖြတ်ခြင်းအား ပါးလွှာသော 3px လေဖြတ်ခြင်းအား ကျွန်ုပ်သည် ဤသုံးဖက်မြင်စာသားအကျိုးသက်ရောက်မှုကိုဖန်တီးရန်- အရောင်- #fbb999; စာသားအရိပ်- 3px 5px 1px #5160b1; -webkit-text-stroke- 3px #984336; စာသားလေဖြတ်ခြင်း- 3px #984336;
ဆေးသုတ်အော် စာသား-လေဖြတ်ခြင်းကို အသုံးပြုခြင်းသည် ပုံမှန်အားဖြင့် ဘရောက်ဆာသည် ဖြည့်စွက်မှုအပေါ် ဒဏ်ချက်ဆွဲပေးသောကြောင့်၊ အထူးသဖြင့် ပိုပါးသောစာလုံးများနှင့် ပိုထူသော လေဖြတ်ခြင်းများဖြင့် မျှော်လင့်ထားသည့်ရလဒ်ကို အမြဲမထုတ်လုပ်နိုင်ပါ။ ဝမ်းနည်းစရာမှာ၊ CSS သည် ကျွန်ုပ်အား Sketch တွင် မကြာခဏပြုလုပ်သကဲ့သို့ လေဖြတ်နေရာချထားမှုကို ချိန်ညှိရန် ခွင့်မပြုသေးပါ။ သို့သော်၊ ဆေးသုတ်ခြင်းဆိုင်ရာ ပိုင်ဆိုင်မှုတွင် ဖြည့်စွက်ချက်၏ရှေ့တွင်မဟုတ်ဘဲ လေဖြတ်ခြင်းကို နောက်တွင်ထားရန်ခွင့်ပြုသည့် တန်ဖိုးများရှိသည်။
paint-order- stroke သည် လေဖြတ်ခြင်းကို ဦးစွာ သုတ်သည်၊ ထို့နောက် ဖြည့်စွက်သည်၊၊ paint-order- fill သည် ဆန့်ကျင်ဘက်ဖြစ်သည်- အရောင်- #fbb999; ဆေးသုတ်ရန်-ဖြည့်စွက်; စာသားအရိပ်- 3px 5px 1px #5160b1; စာသား-လေဖြတ်-ရောင်-#984336; စာသား-လေဖြတ်-အကျယ်- 3px;
ထိရောက်သော လေဖြတ်ခြင်းသည် စာလုံးများကို ဖတ်နိုင်စေပြီး အလေးချိန်ကို တိုးစေပြီး — အရိပ်များနှင့် ဆေးခြယ်မှုအစီအစဥ်ဖြင့် ပေါင်းစပ်သောအခါ — ညီညာသော စာသားအစစ်အမှန်ကို ရရှိစေသည်။ နောက်ခံများ အတွင်းပိုင်းစာသား ကာတွန်းခေါင်းစဉ်ကတ်များစွာသည် စာလုံးပုံစံ၊ အရောင်ခြယ်မှုများ သို့မဟုတ် အသေးစိတ်အချက်များ ပေါင်းထည့်ခြင်းဖြင့် ပြားသောအရောင်ကိုကျော်လွန်သွားပါသည်။ တစ်ခါတစ်ရံ ၎င်းသည် အသွင်အပြင်တစ်ခုဖြစ်ပြီး၊ အခြားအချိန်များတွင် ၎င်းသည် သိမ်မွေ့သော အသံပြောင်းမှုဖြင့် gradient ဖြစ်နိုင်ပါသည်။ ဝဘ်ပေါ်တွင်၊ စာသားနောက်ကွယ်ရှိ နောက်ခံပုံ သို့မဟုတ် gradient ကို အသုံးပြု၍ ဤအကျိုးသက်ရောက်မှုကို ကျွန်ုပ်သည် ပြန်လည်ဖန်တီးနိုင်ပြီး ၎င်းကို စာလုံးများ၏ပုံသဏ္ဍာန်အဖြစ် ဖြတ်တောက်နိုင်သည်။ ၎င်းသည် အတူတကွ လုပ်ဆောင်နိုင်သော ဂုဏ်သတ္တိနှစ်ခုအပေါ် မူတည်သည်- နောက်ခံ-ကလစ်- စာသားနှင့် စာသား-ဖြည့်စွက်-အရောင်- ဖောက်ထွင်းမြင်နိုင်သည်။
အရင်ဆုံး စာသားရဲ့နောက်ကွယ်မှာ နောက်ခံတစ်ခုကို အသုံးချလိုက်ပါ။ ၎င်းသည် bitmap သို့မဟုတ် vector ပုံ သို့မဟုတ် CSS gradient ဖြစ်နိုင်သည်။ Quick Draw McGraw ဇာတ်လမ်းတွဲ “Baba Bait” မှ ဤဥပမာအတွက်၊ ခေါင်းစဉ်စာသားတွင် သိမ်မွေ့သော အပေါ်မှအောက်ခြေသို့ မှောင်မှ အလင်းသို့ အရောင်ပြောင်းခြင်း ပါဝင်သည်- နောက်ခံ- linear-gradient(0deg၊ #667b6a၊ #1d271a);
ထို့နောက်၊ ကျွန်ုပ်သည် ထိုနောက်ခံကို ဂလစ်ဖ်များပေါ်တွင် ညှပ်ပြီး စာသားကို ဖောက်ထွင်းမြင်နိုင်စေရန် နောက်ခံကို ဖြတ်၍ ပြသသည်- -webkit-background-clip- စာသား; -webkit-text-fill-color- ဖောက်ထွင်းမြင်နိုင်သော၊
ထိုမျဉ်းနှစ်ကြောင်းမျှဖြင့်၊ ယင်းအစား ၎င်းကို အတွင်း၌ ခြယ်သထားသည်။ ဤနည်းပညာသည် လေဖြတ်ခြင်းနှင့် အရိပ်များနှင့် ပေါင်းစပ်သောအခါ အထူးသဖြင့် ကောင်းမွန်စွာအလုပ်လုပ်ပါသည်။ ကလစ်ဆွဲထားသော အရောင်အသွေးသည် စာလုံးများကို အရောင်နှင့် အသွေးအသားဖြင့် ပံ့ပိုးပေးသည်၊ လေဖြတ်ခြင်းသည် ၎င်း၏အနားများကို ပြတ်သားစေပြီး အရိပ်တစ်ခုက ၎င်းကို နောက်ခံမှ မြှင့်တင်ပေးသည်။ ၎င်းတို့သည် CSS အနည်းငယ်မှလွဲ၍ ဘာမျှမသုံးဘဲ လက်ခြယ်ထားသော ခေါင်းစဉ်ကတ်များ၏ အလွှာလိုက်ပုံစံကို ပြန်လည်ဖန်တီးကြသည်။ အမြဲလိုလို၊ ဘရောက်ဆာ၏ထူးခြားချက်များသည် တစ်ခါတစ်ရံတွင် အရိပ်များနှင့် rendering ကို သက်ရောက်မှုရှိနိုင်သောကြောင့်၊ အမြဲတမ်းညှပ်ထားသောစာသားကို ဂရုတစိုက်စမ်းသပ်ပါ။ စာသားကို တစ်ဦးချင်း ဇာတ်ကောင်များအဖြစ် ပိုင်းခြားခြင်း။ တစ်ခါတလေမှာ စကားလုံးတစ်လုံးလုံး ဒါမှမဟုတ် ခေါင်းစဉ်ကို မပြောချင်ဘူး။ စာလုံးတစ်လုံးချင်းစီကို ပုံစံတူပြုလုပ်လိုသည် — စာလုံးတစ်လုံးကို နေရာတစ်ခုတွင် ချိန်ညှိရန်၊ ဂရပ်ဖစ်တစ်ခုပိုအလေးချိန်ပေးရန် သို့မဟုတ် စာလုံးအနည်းငယ်ကို လွတ်လပ်စွာ ကာတွန်းဖန်တီးပါ။ ရိုးရိုး HTML နှင့် CSS တွင်၊ ထိုသို့ပြုလုပ်ရန် ယုံကြည်စိတ်ချရသောနည်းလမ်းတစ်ခုသာရှိသည်- ဇာတ်ကောင်တစ်ခုစီကို ၎င်း၏ကိုယ်ပိုင် span element တွင် ထုပ်ပိုးထားသည်။ အဲဒါကို ကျွန်တော် ကိုယ်တိုင်လုပ်နိုင်တယ်၊ ဒါပေမယ့် အဲဒါက ပျက်စီးလွယ်တယ်၊ ထိန်းသိမ်းရခက်တယ်၊ ကော်ပီပြောင်းတဲ့အခါ မြန်မြန်ဆန်ဆန် ကွဲသွားတယ်။ ယင်းအစား၊ ကျွန်ုပ်သည် စာလုံးတစ်လုံးချင်း ထိန်းချုပ်ရန် လိုအပ်သောအခါ၊ ကျွန်ုပ်သည် splt.js ကဲ့သို့သော စာသားခွဲထုတ်ခြင်းစာကြည့်တိုက်ကို အသုံးပြုသည် (အခြားဖြေရှင်းနည်းများ ရှိနိုင်သော်လည်း)။ ၎င်းသည် စာသား node တစ်ခုယူကာ စကားလုံးများ သို့မဟုတ် စာလုံးများကို အလိုအလျောက် ခြုံစေပြီး၊ ကျွန်ုပ်၏ markup ကို မထိခိုက်စေဘဲ ကာတွန်းနှင့် စတိုင်လ်အတွက် အပိုချိတ်များပေးပါသည်။ ၎င်းသည် ကျွန်ုပ်၏ HTML ကို ဖတ်ရလွယ်ကူစေပြီး အဓိပ္ပါယ်သက်ရောက်စေမည့် ချဉ်းကပ်မှုတစ်ခုဖြစ်ပြီး ကျွန်ုပ်အား ဂန္တဝင်ကာတွန်းခေါင်းစဉ်ကတ်များတွင် တွေ့ရသည့် မညီညာသော၊ စာလုံးပုံစံစာစီစာရိုက်ကို ပြန်လည်ဖန်တီးရန် လိုအပ်ပါသည်။ သို့သော်ဤချဉ်းကပ်မှုနှင့်အတူလာစခရင်ဖတ်သူအများစုသည် စာသား node များကို အစဉ်လိုက်ဖတ်သောကြောင့် ဝင်ရောက်နိုင်မှုသတိပေးချက်ဖြစ်သည်။ ဒီတော့ ဒါက
Hum Sweet Hum
... သင်မျှော်လင့်ထားသည့်အတိုင်း ဖတ်ပါ ဟမ် ချိုမြိန်
ဤသည်မှာ-
H u m
… browser နှင့် screen reader ပေါ်မူတည်၍ ကွဲပြားစွာ အဓိပ္ပာယ်ဖွင့်ဆိုနိုင်ပါသည်။ တစ်ချို့က စာလုံးတွေကို ပေါင်းစပ်ပြီး စကားလုံးတွေကို မှန်ကန်စွာ ဖတ်ကြလိမ့်မယ်။ အခြားသူများသည် စာလုံးများကြားတွင် ခဏရပ်နိုင်ပြီး၊ အဆိုးဆုံးအခြေအနေတွင်- “ဟ…” “အို…” “အမ်…”
ဝမ်းနည်းစရာမှာ၊ အချို့သော ခွဲခြမ်းဖြေရှင်းနည်းများသည် အမြဲတမ်းရနိုင်သောရလဒ်ကို မထုတ်ပေးနိုင်သောကြောင့် ကျွန်ုပ်သည် လက်ရှိ beta တွင်ရှိနေသည့် ကျွန်ုပ်၏ကိုယ်ပိုင်စာသားခွဲခြမ်းခြင်း Splinter.js ကို ရေးသားထားပါသည်။ တစ်ဦးချင်းစာများကို အသွင်ပြောင်းခြင်း။ ကျွန်ုပ်၏ Toon Text Splitter ကို အသက်သွင်းရန်၊ ကျွန်ုပ်ခွဲထုတ်လိုသော ဒြပ်စင်သို့ ဒေတာ-ရည်ညွှန်းချက်တစ်ခု ထည့်ပါသည်-
Hum Sweet Hum
ပထမဦးစွာ၊ ကျွန်ုပ်၏ script သည် စကားလုံးတစ်လုံးစီကို အက္ခရာများအဖြစ် ပိုင်းခြားပြီး အတန်းနှင့် ARIA ရည်ညွှန်းချက်များဖြင့် ထည့်သွင်းထားသော အပိုင်းတစ်ခုတွင် ၎င်းတို့ကို အပိုင်းပိုင်းတစ်ခုတွင် ထည့်သွင်းထားသည်။
ထို့နောက် script သည် ခွဲခြမ်းဒြပ်စင်၏ ကနဦးအကြောင်းအရာကို ယူကာ အသုံးပြုနိုင်မှုကို ထိန်းသိမ်းရာတွင် ကူညီရန်အတွက် aria ရည်ညွှန်းချက်အဖြစ် ထည့်သွင်းသည်-
ထိုအတန်း၏ ရည်ညွှန်းချက်များကို အသုံးချခြင်းဖြင့်၊ ထို့နောက် ကျွန်ုပ်ရွေးချယ်သည့်အတိုင်း ဇာတ်ကောင်တစ်ဦးချင်းစီကို ပုံစံထုတ်နိုင်သည်။
ဥပမာအားဖြင့်၊ "Hum Sweet Hum" အတွက်၊ ကျွန်ုပ်သည် ၎င်း၏စာလုံးများသည် အခြေခံစာကြောင်းမှ မည်သို့ပြောင်းသွားသည်ကို ပုံတူကူးဖော်ပြလိုပါသည်။ ကျွန်ုပ်၏ Toon Text Splitter ကိုအသုံးပြုပြီးနောက်၊ တစ်ပိုင်းကျပန်းအသွင်အပြင်ဖန်တီးရန် :nth-child ရွေးချယ်မှုများစွာကို အသုံးပြု၍ မတူညီသောဘာသာပြန်တန်ဖိုးလေးခုကို အသုံးပြုခဲ့သည်- /* ၄ ရက်နေ့၊ ၈ ရက်နေ့၊ ၁၂ ရက်နေ့... */ .toon-char:nth-child(4n) { ဘာသာပြန်ဆိုသည်- 0 -8px; } /* ၁ရက်၊ ၅ရက်၊ ၉ရက်...*/ .toon-char:nth-child(4n+1) { ဘာသာပြန်ဆိုသည်- 0 -4px; } /* ဒုတိယ၊ ၆၊ ၁၀... */ .toon-char:nth-child(4n+2) { translate: 0 4px; } /* ၃ရက်၊ ၇ရက်၊ ၁၁ရက်...*/ .toon-char:nth-child(4n+3) { ဘာသာပြန်ဆိုသည်- 0 8px; }
သို့သော် ဘာသာပြန်ခြင်းသည် ကျွန်ုပ်၏ toon စာသားကို ပြောင်းလဲရန် ကျွန်ုပ်အသုံးပြုနိုင်သည့် ပိုင်ဆိုင်မှုတစ်ခုသာဖြစ်သည်။
ပို၍ပင် ဖရိုဖရဲဖြစ်နေသော အသွင်အပြင်အတွက် ထိုဇာတ်ကောင်တစ်ဦးချင်းစီကိုလည်း လှည့်နိုင်သည်- /* ၄ ရက်နေ့၊ ၈ ရက်နေ့၊ ၁၂ ရက်နေ့... */ .toon-line .toon-char:nth-child(4n) { rotate: -4deg; } /* ၁ရက်၊ ၅ရက်၊ ၉ရက်...*/ .toon-char:nth-child(4n+1) { rotate: -8deg; } /* ဒုတိယ၊ ၆၊ ၁၀... */ .toon-char:nth-child(4n+2) { rotate: 4deg; } /* ၃ရက်၊ ၇ရက်၊ ၁၁ရက်...*/ .toon-char:nth-child(4n+3) { rotate: 8deg; }
သို့သော် ဘာသာပြန်ခြင်းသည် ကျွန်ုပ်၏ toon စာသားကို ပြောင်းလဲရန် ကျွန်ုပ်အသုံးပြုနိုင်သည့် ပိုင်ဆိုင်မှုတစ်ခုသာဖြစ်သည်။ ပိုလို့တောင် ဖရိုဖရဲဖြစ်တာအတွက် အဲဒီဇာတ်ကောင်တွေကို လှည့်ကြည့်နိုင်ပါတယ်။ /* ၄ ရက်နေ့၊ ၈ ရက်နေ့၊ ၁၂ ရက်နေ့... */ .toon-line .toon-char:nth-child(4n) { လှည့်: -4deg; }
/* ၁ရက်၊ ၅ရက်၊ ၉ရက်...*/ .toon-char:nth-child(4n+1) { လှည့်: -8deg; }
/* ဒုတိယ၊ ၆၊ ၁၀... */ .toon-char:nth-child(4n+2) { လှည့်: 4deg; }
/* ၃ရက်၊ ၇ရက်၊ ၁၁ရက်...*/ .toon-char:nth-child(4n+3) { လှည့်: 8deg; }
ပြီးတော့၊ ငါက အဲဒီဇာတ်ကောင်တွေကို တွန်းလှန်ပြီး ငါ့ရဲ့ toon စာသားစတိုင် ခေါင်းစဉ်တွေကို အသက်ဝင်စေဖို့အတွက် ကာတွန်းတွေကို ထည့်နိုင်ခဲ့တယ်။ ဦးစွာ၊ ကျွန်ုပ်သည် ဇာတ်ကောင်များကို လှည့်နိုင်သော သော့ဘောင်ကာတွန်းတစ်ခုကို ဖန်တီးခဲ့သည်-
@keyframes တွန့်လိမ်နေသည် { 0%, 100% { transform: rotate(var(--base-rotate, 0deg)); } 25% { transform: rotate(calc(var(--base-rotate၊ 0deg) + 3deg)); } 50% { transform: rotate(calc(var(--base-rotate၊ 0deg) - 2deg)); } 75% { transform: rotate(calc(var(--base-rotate၊ 0deg) + 1deg)); } }
ကျွန်ုပ်၏ Toon Text Splitter မှ ဖန်တီးထားသော span အစိတ်အပိုင်းများကို အသုံးမပြုမီ- .toon-char { အန်နီမေးရှင်း- 3s အဆုံးမရှိ လွယ်ကူစွာ ဝင်-ထွက်၊ အသွင်ပြောင်း-မူလ- ဗဟိုအောက်ခြေ၊ }
နောက်ဆုံးအနေနှင့်၊ ဇာတ်ကောင်တစ်ခုစီမစတင်မီ လည်ပတ်မှုပမာဏနှင့် နှောင့်နှေးမှုကို သတ်မှတ်ခြင်း- .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) { animation-delay: 0.1s; } .toon-char:nth-child(4n+1) { animation-delay- 0.3s; } .toon-char:nth-child(4n+2) { animation-delay- 0.5s; } .toon-char:nth-child(4n+3) { animation-delay- 0.7s; }
အထင်ကြီးစေမည့် ဘောင်တစ်ခု ကာတွန်းခေါင်းစဉ် ပန်းချီဆရာများသည် အထင်ကြီးစေရန် ဘောင်တစ်ခုစီရှိကြပြီး ၎င်းတို့၏ စာစီစာရိုက်သည် သူတို့ရေးဆွဲသည့် အနုပညာလက်ရာကဲ့သို့ အရေးကြီးသည်။ ဝဘ်ပေါ်မှာလည်း အလားတူပါပဲ။ ကောင်းစွာဒီဇိုင်းထုတ်ထားသော ခေါင်းစီး သို့မဟုတ် ဟီးရိုးဧရိယာသည် ကြည်လင်ပြတ်သားမှု၊ ဇာတ်ကောင်နှင့် ယုံကြည်မှု လိုအပ်သည် — မှိန်ဖျော့နေသော အကျယ်အဝန်းအပြည့်ရှိသော နောက်ခံပုံမဟုတ်ပေ။ ဂရုတစိုက်ရွေးချယ်ထားသော CSS ဂုဏ်သတ္တိများ — အရိပ်များ၊ လေဖြတ်မှုများ၊ ညှပ်ထားသောနောက်ခံများနှင့် အချို့သော ကန့်သတ်ထားသောကာတွန်းများသည် — တူညီသောအကျိုးသက်ရောက်မှုကို ကျွန်ုပ်တို့ဖန်တီးနိုင်သည်။ ကျွန်တော် လွမ်းဆွတ်နေတာကြောင့်မဟုတ်ဘဲ Toon စာသားကို သဘောကျပေမယ့် သူ့ရဲ့ ဒီဇိုင်းက ရည်ရွယ်ချက်ရှိရှိကြောင့်ပါ။ တမင်ရွေးချယ်မှုများ ပြုလုပ်ပြီး တိုနီ စာသား စာစီစာရိုက် အနည်းငယ်ကို သင့်ဒီဇိုင်းများထံ ဖောက်ထွင်းထည့်လိုက်ပါ။
