Design

Neumorphism CSS

မဂၤလာပါရွင့္။

ညီမကေတာ့ Spiceworks Myanmar Company တြင္ Web Designer အျဖစ္ ဝင္ေရာက္ အလုပ္လုပ္ကိုင္ေနတဲ့ မဇင္ႏုေထြး ျဖစ္ပါတယ္ရွင့္။
ဒီအပတ္မွာေတာ့ Neumorphism CSS အေၾကာင္းေလး အနည္းငယ္ကို ညီမေလ့လာမိရသေလာက္ ျပန္လည္မွ်ေဝေပးခ်င္ပါတယ္ရွင့္။

ပထမဦးဆုံးအေနနဲ႔ neumorphism အေၾကာင္းေလးကို ရွင္းျပေပးပါမယ္။
Neumorphism css (neumorphism) ဆိုသည္မွာ ယေန႔ေခတ္တြင္ က်ယ္က်ယ္ျပန္႔ျပန္႔ အသုံးျပဳလာလ်က္ရွိသည့္ neumorphic design ကို လူႀကိဳက္မ်ားေသာ၊ အသုံးျပဳမ်ားေသာ Bootstrap css framework ကိုအေျခခံအသုံးျပဳ၍ ဖန္တီးေရးသားထားသည့္ framework ပုံစံအမ်ိဳးအစားတစ္ခုျဖစ္ပါတယ္။
Bootstrap, Glup နဲ႔ Sass တို႔ကို စနစ္တက် အသုံးျပဳေရးသားထားပါတယ္။
Bootstrap framework ကဲ့သို႔ တြင္က်ယ္ေသာ framework တစ္ခု မဟုတ္ေသးေပမဲ့ အသုံးျပဳရလြယ္ကူေအာင္ components မ်ားအေနနဲ႔ စုစည္းေပးထားသည့္အတြက္ အသုံးျပဳရ အဆင္ေျပၿပီး ႐ိုးရွင္းလြယ္ကူေစပါတယ္။
Neumorphism css ကို ယခုအခါမွာေတာ့ အသုံးျပဳမႈ အေျမာက္အမ်ားမရွိၾကေသးေသာ္လည္း neumorphic design ကို ႀကိဳက္ႏွစ္သက္ၿပီး web page တစ္ခုအေနနဲ႔ ဖန္တီးလိုသူမ်ားအတြက္ ‌ေအာက္တြင္ေဖာ္ျပထားေသာ link မွ components မ်ားကို အသုံးျပဳ၍ ေရးသားျခင္းျဖင့္ အဆင္ေျပေစပါတယ္။
https://themesberg.com/docs/neumorphism-ui/components/
ေဖာ္ျပထားေသာ design မ်ားအတိုင္းမဟုတ္ဘဲ တျခားႀကိဳက္ႏွစ္သက္ေသာ design အေနနဲ႔ ဖန္တီးခ်င္ရင္ေတာ့ customize css အေနနဲ႔ ျပန္လည္ျပဳျပင္၍ ေရးသားရန္ လိုအပ္ပါမယ္။

Neumorphic design သည္ flat design ႏွင့္ skeuomorphism တို႔၏ ျဖစ္ေပၚတိုးတက္ေျပာင္းလဲမႈမ်ားကို ေပါင္းစပ္ထားသည့္ design အမ်ိဳးအစားတစ္ခု ျဖစ္ပါတယ္။
Background colors, shapes, gradients, highlights, shadows မ်ားကို အခ်ိဳးအစား ညီမွ်လွပစြာ 3D shape ပုံစံ ဖန္တီးထားပါတယ္။

Neumorphism components မ်ားကိုသာ အသုံးျပဳၿပီး sample page တစ္ခုအေနနဲ႔ နမူနာ ဖန္တီးေပးထားပါတယ္။

Components မ်ားကို အသုံးျပဳၿပီး ေရးသားမယ္ဆိုရင္ လိုအပ္ေသာ css, js, bootstrap css/js, jquery, font မ်ားကို ခ်ိတ္ေပးရပါမယ္။

Sample coding အေသးစိတ္ကိုေတာ့ နမူနာအေနနဲ႔ ၾကည့္ရႈလို႔ရေအာင္ ေအာက္ပါ link မွာ ေဖာ္ျပေပးထားပါတယ္။
https://github.com/zinnu0320/neumorphism-css

Neumorphism css နဲ႔ပတ္သက္ၿပီး အနည္းငယ္ သိရွိသြားလိမ့္မယ္လို႔ ေမွ်ာ္လင့္ပါတယ္။ စိတ္ဝင္စား၍ အေသးစိတ္ေလ့လာလိုပါက https://themesberg.com/docs/neumorphism-ui/getting-started/overview/ link မွာ ဝင္ေရာက္ ၾကည့္ရႈေလ့လာႏိုင္ပါတယ္။

အခ်ိန္ေပးၿပီး ဖတ္ရႈေပးခဲ့ၾကတဲ့အတြက္ ေက်းဇူးအထူးတင္ရွိပါတယ္ရွင့္။

 

Reference Links
https://themesberg.com/docs/neumorphism-ui/getting-started/overview/
https://neumorphism.com/
https://www.justinmind.com/blog/neumorphism-ui/

Hello

Leave a Reply

Your email address will not be published. Required fields are marked *