မကြာသေးမီက ကျွန်ုပ်သည် ကျွန်ုပ်၏ဝဘ်ဆိုက်ရှိ ကာတွန်းဂရပ်ဖစ်များကို ဇာတ်ညွှန်းအသစ်နှင့် ရှေ့ဆောင်ဇာတ်ကောင်အုပ်စုတစ်ခုဖြင့် ပြန်လည်ဆန်းသစ်ထားပြီး၊ ဤစီးရီးတွင် ကျွန်ုပ်မျှဝေထားသော နည်းပညာများစွာကို လက်တွေ့လုပ်ဆောင်ခဲ့သည်။ ကျွန်ုပ်၏ ကာတွန်းအချို့သည် တစ်စုံတစ်ဦးနှင့် တုံ့ပြန်သည့်အခါ သို့မဟုတ် တစ်နေ့တာ၏ မတူညီသောအချိန်များတွင် ပြောင်းလဲသွားပါသည်။
ကျွန်ုပ်၏ဘလော့စာမျက်နှာများပေါ်ရှိ ဂရပ်ဖစ်ရောင်များသည် နေ့စဉ် နံနက်မှ ညအထိ ပြောင်းလဲပါသည်။ ထို့နောက်၊ နှင်းမုဒ်တွင် အေးစက်သောအရောင်များနှင့် ဆောင်းရာသီအပြင်အဆင်၊ ထပ်ဆင့်အလွှာနှင့် ရောစပ်ထားသည့်မုဒ်ကို ရည်ညွှန်းသည့် နှင်းမုဒ်ရှိပါသည်။
၎င်းကိုလုပ်ဆောင်နေစဉ်တွင် CSS နှိုင်းရအရောင်တန်ဖိုးများသည် လုပ်ငန်းစဉ်ကိုရိုးရှင်းစေပြီး လုပ်ငန်းစဉ်ကိုရိုးရှင်းစေပြီး ပိုမိုထိန်းချုပ်နိုင်မှုရှိမရှိ တွေးတောလာပါသည်။ မှတ်ချက်- ဤသင်ခန်းစာတွင်၊ ဂရပ်ဖစ်နှင့် ကာတွန်းရုပ်ပုံများကို ပုံဖော်ရန်အတွက် OKLCH အရောင်တန်ဖိုးများနှင့် ဆက်စပ်အရောင်များကို ကျွန်ုပ်အာရုံစိုက်ပါမည်။ အကယ်၍ သင်သည် နှိုင်းရအရောင်သို့ နက်ရှိုင်းစွာ ငုပ်လျှိုးလိုပါက၊ Ahmad Shadeed သည် အလွန်ကောင်းမွန်သော အပြန်အလှန်တုံ့ပြန်မှုလမ်းညွှန်တစ်ခုကို ဖန်တီးခဲ့သည်။ အရောင်ကွက်လပ်များ၊ gamuts နှင့် OKLCH အတွက်၊ ကျွန်ုပ်တို့၏ကိုယ်ပိုင် Geoff Graham က ၎င်းတို့အကြောင်း ရေးသားခဲ့သည်။
ဒြပ်စင်များကို ထပ်ခါတလဲလဲ အသုံးပြုခြင်းသည် အဓိကကျသည်။ တူညီသောအနုပညာလက်ရာမှ ပြကွက်အသစ်များကို ဖန်တီးပေးခြင်းဖြင့် နောက်ခံများကို တတ်နိုင်သမျှ ပြန်လည်အသုံးပြုနိုင်ပါသည်။ ၎င်းသည် လိုအပ်ချက်များမှ မွေးဖွားလာသော်လည်း တစ်ဦးချင်း မြင်ကွင်းများထက် ဇာတ်လမ်းတွဲများ၏ တွေးခေါ်မှုကိုလည်း အားပေးခဲ့သည်။ Color Palette များကို ကိုယ်တိုင်မွမ်းမံခြင်းဖြင့် ပြဿနာ ငါ့ရဲ့စိန်ခေါ်မှုကို တည့်တည့်သွားရအောင်။ ဤကဲ့သို့သော Toon ခေါင်းစဉ်များတွင် — 1959 Yogi Bear Show အပိုင်း “Lullabye-Bye Bear” ကိုအခြေခံ၍ — နှင့် ကျွန်ုပ်၏အလုပ်သည် ယေဘုယျအားဖြင့် palettes များကို ရွေးချယ်ထားသောအရောင်အနည်းငယ်သာရှိသည်။
အရောင်ထပ်မထည့်ဘဲ palette ကိုချဲ့ရန် ကျွန်ုပ်၏ "ဖောင်ဒေးရှင်း" ဟုခေါ်သည့် အရောင်မှ အရိပ်များနှင့် အရောင်များကို ဖန်တီးပါသည်။
Sketch တွင်၊ ကျွန်ုပ်သည် HSL အရောင်အာကာသတွင် အလုပ်လုပ်သည်၊ ထို့ကြောင့် ဤလုပ်ငန်းစဉ်တွင် ကျွန်ုပ်၏ဖောင်ဒေးရှင်းအရောင်၏ အလင်းအမှောင်တန်ဖိုးကို တိုးမြှင့်ခြင်း သို့မဟုတ် လျှော့ချခြင်းတို့ ပါဝင်ပါသည်။ ရိုးရိုးသားသားပြောရလျှင် ၎င်းသည် ခက်ခဲသောအလုပ်မဟုတ်ပါ — သို့သော် မတူညီသောအခြေခံအုတ်မြစ်အရောင်ကိုရွေးချယ်ရာတွင် အရိပ်များနှင့် အရောင်အစုံအသစ်တစ်ခုကို ဖန်တီးရန် လိုအပ်ပါသည်။ ၎င်းကို ကိုယ်တိုင်၊ အဖန်ဖန် အထပ်ထပ် လုပ်ခြင်းသည် လျင်မြန်စွာ ပင်ပန်းမှု ဖြစ်လာသည်။
HSL—H (အသွေးအရောင်), S (saturation), နှင့် L (အလင်းရောင်) — အရောင်နေရာလွတ်ကို ဖော်ပြခဲ့သည်၊ သို့သော် ၎င်းသည် အရောင်ဖော်ပြရန် နည်းလမ်းများစွာထဲမှ တစ်ခုသာဖြစ်သည်။ RGB — R (အနီရောင်), G (အစိမ်းရောင်), B (အပြာ) — သည် အနည်းဆုံး ၎င်း၏ Hex ပုံစံဖြင့် အရင်းနှီးဆုံးဖြစ်နိုင်သည်။ LAB — L (အလင်း)၊ A (စိမ်း-နီ)၊ B (အပြာ-အဝါ) — နှင့် အသစ်များပါရှိသော်လည်း ယခုအခါတွင် LCH—L (အလင်း)၊ C (chroma)၊ H (အသွေး) — ၎င်း၏ OKLCH ပုံစံဖြင့် မော်ဒယ်ကို ကျယ်ပြန့်စွာ ပံ့ပိုးထားသည်။ LCH ဖြင့် — အထူးသဖြင့် CSS တွင် OKLCH — ကျွန်ုပ်သည် ကျွန်ုပ်၏ ဖောင်ဒေးရှင်းအရောင်၏ အလင်းတန်ဖိုးကို ချိန်ညှိနိုင်သည်။
ဒါမှမဟုတ် သူ့ရဲ့ chroma ကို ပြောင်းနိုင်ပါတယ်။ LCH chroma နှင့် HSL saturation နှစ်ခုစလုံးသည် အရောင်တစ်ခု၏ ပြင်းထန်မှု သို့မဟုတ် ကြွယ်ဝမှုကို ဖော်ပြသော်လည်း ၎င်းတို့သည် မတူညီသောနည်းလမ်းများဖြင့် ပြုလုပ်ကြသည်။ LCH သည် အရောင်များကြားတွင် ပိုမိုကျယ်ပြန့်ပြီး ခန့်မှန်းနိုင်သော ရောစပ်မှုကို ပေးပါသည်။
တူညီသောအလင်းနှင့် chroma တန်ဖိုးများကို မျှဝေသည့်အရောင်များကို ဖန်တီးရန် အသွေးအရောင်ကိုလည်း ပြောင်းလဲနိုင်သည်။ HSL နှင့် LCH နှစ်မျိုးလုံးတွင်၊ အရောင်အသွေးရောင်စဉ်သည် အနီရောင်မှ စတင်သည်၊ အစိမ်းရောင်နှင့် အပြာရောင်မှတဆင့် ရွေ့လျားပြီး အနီရောင်သို့ ပြန်သွားသည်။
ဘာကြောင့် OKLCH က အရောင်အကြောင်း စဉ်းစားပုံပြောင်းတာလဲ။ OKLCH အရောင်နေရာအတွက် ဘရောက်ဆာ ပံ့ပိုးမှုသည် ယခုအခါတွင် ကျယ်ကျယ်ပြန့်ပြန့် ဖြစ်နေသော်လည်း၊ Sketch အပါအဝင် ဒီဇိုင်းကိရိယာများ — မဖမ်းမိသေးပါ။ ကံကောင်းထောက်မစွာ၊ ၎င်းသည် သင့်အား OKLCH ကို အသုံးပြုခြင်းမှ ရပ်တန့်သင့်သည်။ ဘရောက်ဆာများသည် Hex၊ HSL၊ LAB နှင့် RGB တန်ဖိုးများကို သင့်အတွက် OKLCH အဖြစ် ပျော်ရွှင်စွာ ပြောင်းလဲပေးပါမည်။ Hex အပါအဝင် နေရာလွတ်တိုင်းတွင် အခြေခံအရောင်ဖြင့် CSS စိတ်ကြိုက်ပိုင်ဆိုင်မှုကို သတ်မှတ်နိုင်သည်။ /*ဖောင်ဒေးရှင်းအရောင်*/ --foundation- #5accd6;
၎င်းမှရရှိသော မည်သည့်အရောင်မဆို OKLCH အဖြစ် အလိုအလျောက် ပြောင်းလဲသွားပါမည်။ --foundation-light- oklch(from var(--foundation) [...]; } --foundation-mid- oklch(var(--ဖောင်ဒေးရှင်းမှ) […]; } --foundation-dark- oklch(from var(--foundation) [...]; }
Relative Color As A Design စနစ် "ဤအရောင်ကိုယူပါ၊ ညှိပါ၊ ထို့နောက်ရလဒ်ကိုပေးပါ။" အရောင်တစ်ခုအား ချိန်ညှိရန် နည်းလမ်းနှစ်ခုရှိသည်- လုံးဝပြောင်းလဲမှုများနှင့် အချိုးကျပြောင်းလဲမှုများ။ ၎င်းတို့သည် ကုဒ်တွင် ဆင်တူသော်လည်း အခြေခံအရောင်များကို စတင်လဲလှယ်ပြီးသည်နှင့် အလွန်ကွဲပြားပါသည်။ ခြားနားချက်ကို နားလည်ခြင်းသည် နှိုင်းရအရောင်ကို အသုံးပြု၍ စနစ်တစ်ခုသို့ ပြောင်းလဲနိုင်သည် ။ /*ဖောင်ဒေးရှင်းအရောင်*/ --foundation- #5accd6;
ဥပမာအားဖြင့်၊ ကျွန်ုပ်၏ ဖောင်ဒေးရှင်းအရောင်၏ အလင်းအမှောင်တန်ဖိုးမှာ 0.7837 ဖြစ်ပြီး အမှောင်ဗားရှင်းသည် 0.5837 တန်ဖိုးရှိသည်။ ကွာခြားချက်ကို တွက်ချက်ရန်၊ ကျွန်ုပ်သည် အထက်တန်ဖိုးမှ အောက်တန်ဖိုးကို နုတ်ပြီး calc() လုပ်ဆောင်ချက်ကို အသုံးပြု၍ ရလဒ်ကို အသုံးပြုပါ- --foundation-dark- oklch(var(--ဖောင်ဒေးရှင်းမှ) calc(l - 0.20) c h);
ပေါ့ပါးသောအရောင်ရရှိရန်၊ ကျွန်ုပ်အစား ခြားနားချက်ကို ထည့်ပါ- --အုတ်မြစ်အလင်း- oklch(var(--ဖောင်ဒေးရှင်းမှ) calc(l + 0.10) c h);
Chromaချိန်ညှိချက်များသည် တူညီသောလုပ်ငန်းစဉ်ကို လိုက်နာသည်။ ကျွန်ုပ်၏ ဖောင်ဒေးရှင်းအရောင်၏ ပြင်းထန်မှုကို 0.1035 မှ 0.0035 သို့ လျှော့ချရန်၊ အခြားတန်ဖိုးတစ်ခုမှ ကျွန်ုပ်နုတ်ယူပါသည်- oklch(var(--ဖောင်ဒေးရှင်းမှ) l calc(c - 0.10) h);
အဝါရောင် palette တစ်ခုဖန်တီးရန်၊ ကျွန်ုပ်၏ ဖောင်ဒေးရှင်းအရောင် (200) နှင့် ကျွန်ုပ်၏ အရောင်အသစ် (260) တို့၏ အဝါရောင်တန်ဖိုး ကွာခြားချက်ကို တွက်ချက်ပါသည်။ oklch(var(--ဖောင်ဒေးရှင်းမှ) l c calc(h+60));
ထိုတွက်ချက်မှုများသည် လုံးဝဖြစ်သည်။ သတ်မှတ်ထားတဲ့ပမာဏကို နုတ်တဲ့အခါ “ဒီပမာဏကို အမြဲနုတ်ပါ” လို့ ထိထိရောက်ရောက် ပြောတာပါ။ ပုံသေတန်ဖိုးများကို ထည့်သည့်အခါ အလားတူပင် အကျုံးဝင်သည်- calc(c - 0.10) calc(c+0.10)
ဒီချဉ်းကပ်မှုရဲ့ ကန့်သတ်ချက်တွေကို ခက်ခက်ခဲခဲ လေ့လာခဲ့ရတယ်။ ပုံသေ chroma တန်ဖိုးများကို နုတ်ခြင်းအပေါ် အားကိုးသောအခါ၊ အခြေခံအုတ်မြစ်ကို ပြောင်းပြီးသည်နှင့် မီးခိုးရောင်သို့ အရောင်များ ပြိုကျသွားသည်။ အရောင်တစ်ခုအတွက် လုပ်ဆောင်ပေးသော palette တစ်ခုသည် အခြားတစ်ခုအတွက် ကွဲသွားပါသည်။ မြှောက်ခြင်းသည် ကွဲပြားစွာ ပြုမူသည်။ ကျွန်ုပ် chroma ကို ပွားသောအခါ၊ ကျွန်ုပ်သည် ဘရောက်ဆာအား ပြောနေသည်- "ဤအရောင်၏ ပြင်းထန်မှုကို အချိုးအစားဖြင့် လျှော့ချပါ။" အခြေခံအုတ်မြစ်ပြောင်းလဲသွားသည့်တိုင် အရောင်များကြားက ဆက်နွှယ်မှု မပျက်မစီးရှိနေသည်- calc(c*0.10)
My Move It, Scale It, Rotate It Rules
အလင်းကို ရွှေ့ပါ (ထည့်ရန် သို့မဟုတ် နုတ်ခြင်း)၊ စကေးခရိုမာ (အဆ)၊ အသွေးအရောင်ကို လှည့်ပါ (ဒီဂရီထည့်ရန် သို့မဟုတ် နုတ်ပါ)။
အခြေခံအရောင်နှင့် အချိုးကျနေစေရန် ပြင်းထန်မှုပြောင်းလဲမှုကို လိုချင်သောကြောင့် ခရိုမာကို အတိုင်းအတာဖြင့် တိုင်းတာပါသည်။ အရောင်အသွေး ဆက်ဆံရေးများသည် လှည့်ပတ်ခြင်းဖြစ်သောကြောင့် အသွေးအရောင်ကို မြှောက်ခြင်းသည် အဓိပ္ပါယ်မရှိပေ။ အလင်းသည် အသိဥာဏ်နှင့် အကြွင်းမဲ့ဖြစ်သည် — ၎င်းကို မြှောက်ခြင်းဖြင့် မကြာခဏ ထူးထူးခြားခြား ရလဒ်များကို ထုတ်ပေးသည်။
အရောင်တစ်ရောင်မှ အပြင်အဆင်တစ်ခုလုံးအထိ နှိုင်းရရောင်သည် ဖောင်ဒေးရှင်းအရောင်ကို သတ်မှတ်ရန်နှင့် လိုအပ်သည့် အခြားအရောင်တိုင်း—ဖြည့်စွက်ခြင်း၊ လေဖြတ်ခြင်း၊ gradient stops၊ shadows—တို့ကို ၎င်းမှ ဖန်တီးနိုင်စေပါသည်။ ထိုအချိန်တွင် အရောင်သည် ပျဉ်ချပ်တစ်ခုအဖြစ် ရပ်သွားပြီး စနစ်တစ်ခုဖြစ်လာသည်။ SVG သရုပ်ဖော်ပုံများသည် ဖြည့်စွက်မှုများ၊ လေဖြတ်ခြင်းနှင့် gradients များတွင် တူညီသောအရောင်အနည်းငယ်ကို ပြန်သုံးလေ့ရှိသည်။ နှိုင်းရရောင်သည် သင့်အား ထိုဆက်ဆံရေးများကို တစ်ကြိမ်တည်းသတ်မှတ်ပြီး နေရာတိုင်းတွင် ပြန်လည်အသုံးပြုခွင့်ပေးသည် — ကာတွန်းများသည် မြင်ကွင်းအသစ်များဖန်တီးရန်အတွက် နောက်ခံများကို ပြန်လည်အသုံးပြုသည်နှင့်တူသည်။
ဖောင်ဒေးရှင်းအရောင်ကို တစ်ကြိမ်ပြောင်းပြီး မည်သည့်အရာမှ လက်ဖြင့် မတွက်ချက်ဘဲ ရရှိလာသော အရောင်တိုင်းသည် အလိုအလျောက် အပ်ဒိတ်လုပ်ပါသည်။ ကာတွန်းဂရပ်ဖစ်အပြင်၊ ခလုတ်များနှင့် လင့်ခ်များကဲ့သို့ အပြန်အလှန်အကျိုးသက်ရောက်သော ဒြပ်စင်များအတွက် အရောင်များကို သတ်မှတ်ရန် ဤတူညီသောချဉ်းကပ်မှုကို ကျွန်ုပ်အသုံးပြုနိုင်ပါသည်။ ကျွန်ုပ်၏ "Lullabye-Bye Bear" Toon Title တွင် ကျွန်တော်သုံးခဲ့သော အခြေခံအရောင်သည် စိမ်းပြာရောင်နှင့် အပြာရောင်ဖြစ်သည်။ နောက်ခံသည် ကျွန်ုပ်၏ဖောင်ဒေးရှင်းနှင့် ပိုနက်သောဗားရှင်းကြားတွင် အချင်းများသောအရောင်ခြယ်မှုဖြစ်သည်။
လုံးဝကွဲပြားသော စိတ်ခံစားချက်များဖြင့် အခြားဗားရှင်းများကို ဖန်တီးရန်အတွက် အခြေခံအုတ်မြစ်အရောင်ကို ပြောင်းလဲရန် လိုအပ်ပါသည်။ --foundation- #5accd6; --grad-end- var(--ဖောင်ဒေးရှင်း); --grad-start- oklch(var(--ဖောင်ဒေးရှင်းမှ) calc(l - 0.2357) calc(c*0.833) h);
ထိုစိတ်ကြိုက်ဂုဏ်သတ္တိများကို ကျွန်ုပ်၏ SVG gradient တွင် အရောင်တန်ဖိုးများမပွားဘဲ၊ ကျွန်ုပ်သည် hard-coded stop-color တန်ဖိုးများကို inline ပုံစံများဖြင့် အစားထိုးခဲ့သည်-
ထို့နောက်၊ ကျွန်ုပ်၏ Toon စာသားသည် ကျွန်ုပ်ရွေးချယ်သော အခြေခံအုတ်မြစ်အရောင်နှင့် အမြဲဆန့်ကျင်နေရန် လိုအပ်ပါသည်။ 180deg အသွေးအရောင် လှည့်ခြင်းသည် သေချာပေါက် ထွက်ပေါ်လာသည့် ပေါင်းစပ်အရောင်ကို ထုတ်ပေးသည် — သို့သော် စိတ်မသက်မသာ တုန်ခါနိုင်သည်- .စာသား-အလင်း { ဖြည့်စွက်ခြင်း- oklch(var(--ဖောင်ဒေးရှင်းမှ) l c calc(h + 180)); }
90° shift သည် အပြည့်အ၀ဖြည့်စွက်ခြင်းမရှိဘဲ ကွက်ကွက်ကွင်းကွင်း ဒုတိယအရောင်ကို ထုတ်ပေးသည်- .စာသား-အလင်း { ဖြည့်စွက်ခြင်း- oklch(var(--ဖောင်ဒေးရှင်းမှ) l c calc(h - 90)); }
Quick Draw McGraw ၏ 1959 Toon Title “El Kabong” ၏ အပန်းဖြေမှုသည် တူညီသောနည်းပညာများကို အသုံးပြုသော်လည်း ပိုမိုကွဲပြားသော palette ဖြင့် အသုံးပြုပါသည်။ ဥပမာအားဖြင့်၊ ဖောင်ဒေးရှင်းအရောင်နှင့် နက်မှောင်သောအရိပ်ကြားတွင် အခြားသော အစွန်းအထင်းအရောင်ခြယ်မှုတစ်ခု ရှိသေးသည်။
အဆောက်အဦး နှင့် သစ်ပင် တို့သည် အခြေခံအုတ်မြစ်အရောင် တူညီသော အရိပ်များ ကွဲပြားသည်။ ထိုလမ်းများအတွက် ကျွန်ုပ်သည် နောက်ထပ်ဖြည့်စွက်အရောင်နှစ်ရောင် လိုအပ်ပါသည်။ .bg-mid { ဖြည့်စွက်ခြင်း- oklch(var(--ဖောင်ဒေးရှင်းမှ) calc(l - 0.04) calc(c*0.91) h); }
.bg-dark { ဖြည့်စွက်ခြင်း- oklch(var(--ဖောင်ဒေးရှင်းမှ) calc(l - 0.12) calc(c*0.64) h); }
ဖောင်ဒေးရှင်းများ စတင်ရွေ့လျားသောအခါ အခုထိ၊ ငါပြထားတဲ့အရာအားလုံးဟာ တည်ငြိမ်နေခဲ့ပါပြီ။ တစ်စုံတစ်ယောက်သည် ဖောင်ဒေးရှင်းအရောင်ပြောင်းရန် အရောင်ရွေးချယ်သည့်ကိရိယာကို အသုံးပြုသည့်အခါတွင်ပင်၊ ထိုပြောင်းလဲမှုသည် ချက်ချင်းဖြစ်လိမ့်မည်။ သို့သော် ကာတွန်းဂရပ်ဖစ်သည် ရပ်တန့်ခဲသည် — သဲလွန်စသည် နာမည်တွင်ရှိသည်။ ထို့ကြောင့် အရောင်သည် စနစ်၏ တစ်စိတ်တစ်ပိုင်းဖြစ်ပါက၊ ၎င်းသည်လည်း သက်ဝင်လှုပ်ရှားရန် အကြောင်းပြချက် မရှိပါ။ ဖောင်ဒေးရှင်းအရောင်ကို လှုပ်ရှားရန်၊ ၎င်းကို ၎င်း၏ OKLCH ချန်နယ်များအဖြစ် ပထမဆုံး ပိုင်းခြားရန် လိုအပ်ပါသည်။- အလင်း၊ ခရိုမာနှင့် အသွေးအရောင်။ ဒါပေမယ့် အရေးကြီးတဲ့ ထပ်ဆင့်အဆင့်တစ်ခု ရှိပါသေးတယ်- ကျွန်ုပ်သည် ထိုတန်ဖိုးများကို ရိုက်ထည့်ထားသော စိတ်ကြိုက်ဂုဏ်သတ္တိများအဖြစ် မှတ်ပုံတင်ရန် လိုအပ်ပါသည်။ ဒါပေမယ့် အဲဒါက ဘာကိုဆိုလိုတာလဲ။ မူရင်းအားဖြင့်၊ CSS စိတ်ကြိုက်ပိုင်ဆိုင်မှုတန်ဖိုးသည် အရောင်၊ အလျား၊ နံပါတ် သို့မဟုတ် အခြားအရာတစ်ခုကို လုံးလုံးလျားလျားကိုယ်စားပြုခြင်းရှိမရှိ ဘရောက်ဆာမှ မသိပါ။ ကာတွန်းရိုက်ကူးနေစဉ်အတွင်း ၎င်းတို့ကို ချောမွေ့စွာ ပေါင်းစပ်မရနိုင်ကြောင်း မကြာခဏဆိုလိုပြီး တန်ဖိုးတစ်ခုမှ နောက်တစ်ခုသို့ ခုန်တက်သွားခြင်းကို ဆိုလိုသည်။ စိတ်ကြိုက်ပိုင်ဆိုင်မှုတစ်ခုကို မှတ်ပုံတင်ခြင်းသည် ဘရောင်ဇာကို ကိုယ်စားပြုသည့်တန်ဖိုးအမျိုးအစားနှင့် အချိန်နှင့်အမျှ မည်သို့ပြုမူသင့်သည်ကို ပြောပြသည်။ ဤကိစ္စတွင်၊ ကျွန်ုပ်သည် ဘရောက်ဆာအား ကျွန်ုပ်၏အရောင်ချန်နယ်များကို နံပါတ်များအဖြစ် ဆက်ဆံစေလိုသောကြောင့် ၎င်းတို့ကို ချောမွေ့စွာ လှုပ်ရှားနိုင်စေပါသည်။ @property --f-l { အထားအသို- "<နံပါတ်>"; အမွေဆက်ခံ: မှန်သော၊ ကနဦးတန်ဖိုး- 0.40; }
@property --f-c { အထားအသို- "<နံပါတ်>"; အမွေဆက်ခံ: မှန်သော၊ ကနဦးတန်ဖိုး- 0.11; }
@property --f-h { အထားအသို- "<နံပါတ်>"; အမွေဆက်ခံ: မှန်သော၊ ကနဦးတန်ဖိုး- 305; }
စာရင်းသွင်းပြီးသည်နှင့် ဤစိတ်ကြိုက်ဂုဏ်သတ္တိများသည် မူရင်း CSS ကဲ့သို့ လုပ်ဆောင်သည်။ ဘရောင်ဇာသည် ၎င်းတို့ကို frame-by-frame ဖြင့် ပေါင်းစပ်နိုင်သည်။ ထို့နောက် ထိုချန်နယ်များမှ ဖောင်ဒေးရှင်းအရောင်ကို ကျွန်ုပ် ပြန်လည်တည်ဆောက်ပါသည်။ --foundation- oklch(var(--f-l) var(--f-c) var(--f-h));
၎င်းသည် အခြားဂဏန်းတန်ဖိုးများကဲ့သို့ပင် အုတ်မြစ်အရောင်ကို လှုပ်ရှားနိုင်စေသည်။ ဤသည်မှာ အချိန်ကြာလာသည်နှင့်အမျှ ပေါ့ပါးမှုကို ညင်သာစွာ ပြောင်းလဲပေးသည့် ရိုးရှင်းသော "အသက်ရှူခြင်း" ကာတွန်းကား။ @keyframes ရှူ { 0%, 100% { --f-l: 0.36; } 50% { --f-l: 0.46; } }
.toon-title { ကာတွန်း- အသက် 10s သက်တောင့်သက်သာ-ဝင်-ထွက် အဆုံးမရှိ; }
ဖြည့်စွက်ခြင်း၊ အရောင်ဖျော့ခြင်းနှင့် လေဖြတ်ခြင်းများတွင် အခြားအရောင်တိုင်းသည် --foundation မှ ဆင်းသက်လာသောကြောင့် ၎င်းတို့အားလုံး အတူတကွ လှုပ်ရှားသက်ဝင်ကြပြီး မည်သည့်အရာကိုမျှ ကိုယ်တိုင်မွမ်းမံရန် မလိုအပ်ပါ။ ကာတွန်းတစ်ရောင်၊ သက်ရောက်မှုများစွာ ဤလုပ်ငန်းစဉ်၏အစတွင်၊ CSS နှိုင်းရအရောင်တန်ဖိုးများသည် ၎င်းတို့ကို အကောင်အထည်ဖော်ရန် ပိုမိုလွယ်ကူစေပြီး အကောင်အထည်ဖော်ရန် ပိုမိုလွယ်ကူစေသည်ဆိုသည်ကို ကျွန်ုပ်တွေးမိပါသည်။ မကြာသေးမီက ကျွန်ုပ်သည် ကျွန်ုပ်၏ဝဘ်ဆိုဒ်၏ ဆက်သွယ်ရန်စာမျက်နှာသို့ ရွှေတွင်းနောက်ခံအသစ်ကို ထည့်သွင်းခဲ့ပြီး ပထမအကြိမ်တွင် တောက်ပပြီး လွှဲနေသော ဆီမီးများ ပါဝင်ပါသည်။
CSS နှိုင်းရအရောင်များကို လှုပ်ရှားသက်ဝင်နေသော မီးချောင်းများမှ အရောင်များဖြင့် အရောင်ခြယ်ခြင်းဖြင့် မိုင်းအတွင်းပိုင်းကို ပိုမိုလက်တွေ့ကျအောင် မည်သို့လုပ်ဆောင်နိုင်သည်ကို စူးစမ်းလိုပါသည်။ သူတို့ပတ်ဝန်းကျင်က ကမ္ဘာကြီးကို သက်ရောက်မှုရှိစေချင်တယ်၊ တကယ့်အလင်းရောင် ပေးသလိုပါပဲ။ ထို့ကြောင့်၊ အရောင်မျိုးစုံကို လှုပ်ရှားနေမည့်အစား တစ်ရောင်တည်းသာ သက်ဝင်လှုပ်ရှားစေမည့် သေးငယ်သောအလင်းရောင်စနစ်တစ်ခုကို ငါတည်ဆောက်ခဲ့သည်။
ကျွန်ုပ်၏ ပထမဆုံးတာဝန်မှာ နောက်ခံနှင့် ကျွန်ုပ်၏ မီးချောင်းများကြား ထပ်ဆင့်အလွှာကို အပေါက်ချရန်ဖြစ်သည်။ <ပြောမယ်။ id="အထပ်ထပ်" fill="var(--overlay-tint)" […] style="mix-blend-mode: အရောင်" />
ပေါင်းစပ်-ရောနှော-မုဒ်ကို ကျွန်တော်အသုံးပြုခဲ့သည်- အောက်ခြေအလင်းရောင်ကို ထိန်းသိမ်းထားစဉ်တွင် ၎င်းသည် အောက်ခံအရောင်ကို အရောင်တောက်စေသောကြောင့်ဖြစ်သည်။ ကာတွန်းများကို ဖွင့်ထားသည့်အခါ ထပ်ဆင့်လွှာကို မြင်နိုင်စေရန်အတွက်၊ ထပ်ဆင့်လွှာကို ရွေးချယ်ဝင်ရောက်စေခဲ့သည်- .svg-mine #overlay { ပြသမှု- none; }
@media (prefers-reduced-motion-no-preference) { .svg-mine[data-animations=on] #overlay { display: ပိတ်ဆို့; အလင်းအမှောင်: 0.5; } }
ထပ်တင်ထားသော်လည်း မီးချောင်းများနှင့် မချိတ်ဆက်ရသေးပါ။ အလင်းအရင်းအမြစ်တစ်ခုလိုခဲ့တယ်။ ကျွန်ုပ်၏ မီးချောင်းများသည် ရိုးရှင်းပြီး တစ်ခုစီတွင် ဇကာဖြင့် မှုန်ဝါးသွားသော စက်ဝိုင်းတစ်ခုစီ ပါဝင်ပါသည်။ ဇကာသည် စက်ဝိုင်းတစ်ခုလုံးတွင် အလွန်ပျော့ပျောင်းသော မှုန်ဝါးမှုကို ထုတ်ပေးသည်။
ထပ်ဆင့်နှင့် မီးချောင်းများကို သီးခြားစီ လှုပ်ရှားနေမည့်အစား၊ ကျွန်ုပ်သည် "မီးတောက်" အရောင် တိုကင်တစ်ခုတည်းကို လှုပ်ရှားစေပြီး ၎င်းမှ အခြားအရာအားလုံးကို ရယူပါသည်။ ဦးစွာ၊ ကျွန်ုပ်သည် OKLCH ချန်နယ်များအတွက် ရိုက်နှိပ်ထားသော စိတ်ကြိုက်ဂုဏ်သတ္တိသုံးခုကို မှတ်ပုံတင်ပါသည်။ @property --fl-l { အထားအသို- "<နံပါတ်>"; အမွေဆက်ခံ: မှန်သော၊ ကနဦးတန်ဖိုး- 0.86; } @property --fl-c { အထားအသို- "<နံပါတ်>"; အမွေဆက်ခံ: မှန်သော၊ ကနဦးတန်ဖိုး- 0.12; } @property --fl-h { အထားအသို- "<နံပါတ်>"; အမွေဆက်ခံ: မှန်သော၊ ကနဦးတန်ဖိုး- 95; }
ကျွန်ုပ်သည် ထိုချန်နယ်များကို လိမ္မော်ရောင်ဘက်သို့ တမင်တွန်းကာ ဖရိန်အနည်းငယ်ကို ကာတွန်းလုပ်ထားသောကြောင့် တုန်ခါမှုက မီးလုံးကဲ့သို့ ရှင်းလင်းစွာဖတ်ရသည်-
@keyframes မီးတောက် { 0%, 100% { --fl-l: 0.86; --fl-c: 0.12; --fl-h: 95; } 6% { --fl-l: 0.91; --fl-c: 0.10; --fl-h: 92; } 12% { --fl-l: 0.83; --fl-c: 0.14; --fl-h: 100; } 18% { --fl-l: 0.88; --fl-c: 0.11; --fl-h: 94; } 24% { --fl-l: 0.82; --fl-c: 0.16; --fl-h: 82; } 30% { --fl-l: 0.90; --fl-c: 0.12; --fl-h: 90; } 36% { --fl-l: 0.79; --fl-c: 0.17; --fl-h: 76; } 44% { --fl-l: 0.87; --fl-c: 0.12; --fl-h: 96; } 52% { --fl-l: 0.81; --fl-c: 0.15; --fl-h: 102; } 60% { --fl-l: 0.89; --fl-c: 0.11; --fl-h: 93; } 68% { --fl-l: 0.83; --fl-c: 0.16; --fl-h: 85; } 76% { --fl-l: 0.91; --fl-c: 0.10; --fl-h: 91; } 84% { --fl-l: 0.85; --fl-c: 0.14; --fl-h: 98; } 92% {--fl-l: 0.80; --fl-c: 0.17; --fl-h: 74; } }
ထို့နောက် ကျွန်ုပ်သည် ထိုကာတွန်းအား SVG သို့ အတိုင်းအတာသတ်မှတ်လိုက်သည်၊ ထို့ကြောင့် မျှဝေထားသော ကိန်းရှင်များကို မီးချောင်းများနှင့် ကျွန်ုပ်၏ ထပ်ဆင့်လွှာနှစ်ခုစလုံးတွင် ရနိုင်ပါသည်-
@media (prefers-reduced-motion-no-preference) { .svg-mine[data-animations=on] { ကာတွန်း-မီးတောက် 3.6s အဆုံးမရှိ linear; အထီးကျန်: အထီးကျန်;
/* ကာတွန်းချန်နယ်များမှ မီးရောင်တစ်ခု ဖန်တီးပါ*/ --flame: oklch(var(--fl-l) var(--fl-c) var(--fl-h));
/*မီးတောက်မှဆင်းသက်လာသော မီးရောင်*/ --lamp-core- oklch(from var(--flame) calc(l + 0.05) calc(c*0.70) h);
တူညီသောမီးတောက်မှဆင်းသက်လာသောထပ်ဆင့်အရောင်*/ --overlay-tint- oklch(var(--flame)မှ calc(l + 0.06) calc(c*0.65) calc(h - 10)); } }
နောက်ဆုံးတွင်၊ ထိုမှရရှိလာသော အရောင်များကို ကျွန်ုပ်သည် တောက်ပသော မီးချောင်းများနှင့် ၎င်းတို့အပေါ် သက်ရောက်မှုရှိသော ထပ်ဆင့်လွှာကို အသုံးချခဲ့သည်- @media (prefers-reduced-motion-no-preference) { .svg-mine[data-animations=on] #mine-lamp-1 > စက်ဝိုင်း၊ .svg-mine[data-animations=on] #mine-lamp-2 > စက်ဝိုင်း { ဖြည့်စွက်ခြင်း- var(--lamp-core); }
.svg-mine[data-animations=on] #overlay { display: ပိတ်ဆို့; ဖြည့်စွက်ခြင်း- var(--overlay-tint); အလင်းအမှောင်: 0.5; } }
မီးတောက်သည် လိမ္မော်ရောင်ဘက်သို့ ရွေ့သွားသောအခါ မီးချောင်းများ ပူလာပြီး မြင်ကွင်းသည် ၎င်းတို့နှင့်အတူ ပူလာသည်။ မီးငြိမ်းသွားသောအခါတွင် အရာအားလုံးသည် တညီတညွတ်တည်း ငြိမ်သက်သွားသည်။ အကောင်းဆုံးအပိုင်းကတော့ ဘာကိုမှ ကိုယ်တိုင်ရေးတာမဟုတ်ဘူး။ ဖောင်ဒေးရှင်းအရောင်ကို ပြောင်းပါ သို့မဟုတ် မီးတောက်ကာတွန်း အပိုင်းများကို ပြင်ဆင်ပါက၊ အလင်းရောင်စနစ်တစ်ခုလုံးသည် တစ်ပြိုင်နက် အပ်ဒိတ်လုပ်မည်ဖြစ်သည်။ ကျွန်ုပ်၏ ဝဘ်ဆိုဒ်တွင် နောက်ဆုံးရလဒ်ကို သင်တွေ့နိုင်ပါသည်။ ပြန်လည်အသုံးပြုခြင်း၊ ပြန်လည်အသုံးပြုခြင်း၊ ပြန်လည်ကြည့်ရှုခြင်း။ ထို Hanna-Barbera ကာတွန်းများသည် အစိတ်အပိုင်းများကို မလိုအပ်ဘဲ ပြန်သုံးရန် တွန်းအားပေးခဲ့ကြသော်လည်း၊ ၎င်းသည် ကျွန်ုပ်၏လုပ်ငန်းကို ပိုမိုတသမတ်တည်းနှင့် ထိန်းသိမ်းရလွယ်ကူစေသောကြောင့် အရောင်များကို ပြန်လည်အသုံးပြုပါသည်။ CSS နှိုင်းရအရောင်တန်ဖိုးများသည် ကျွန်ုပ်အား ခွင့်ပြုသည်-
ဖောင်ဒေးရှင်းတစ်ခုတည်းကို အရောင်သတ်မှတ်ပါ၊ အခြားအရောင်များနှင့် ဆက်စပ်ပုံကို ဖော်ပြပါ ထိုဆက်ဆံရေးများကို နေရာတိုင်းတွင် ပြန်သုံးပါ။ တန်ဖိုးတစ်ခုပြောင်းခြင်းဖြင့် စနစ်အား လှုပ်ရှားပါ။
နှိုင်းယှဥ်အရောင်သည် အပြင်အဆင်ကို ပိုမိုလွယ်ကူစေရုံသာမက။ အရောင်သည် ရွေ့လျားမှုကဲ့သို့ ရည်ရွယ်ချက်ရှိရှိ တွေးခေါ်ပုံနည်းလမ်းကို အားပေးပြီး တန်ဖိုးတစ်ခုပြောင်းလဲခြင်းသည် ၎င်းအောက်ရှိအလုပ်ကို ပြန်လည်မရေးဘဲ မြင်ကွင်းတစ်ခုလုံးကို ပြောင်းလဲနိုင်သည်။
