বর্তমান বিশ্বের সকল ওয়েব-ডেভেলপারদের কাছে নিউমার্ফিজম খুবই জনপ্রিয়তা অর্জন করেছে । কেননা নিউমার্ফিজম ব্যাবহার করে যেই সব ডিজাইন গুলো করা হয় তা অনেক আকর্ষণীয় । তাই এর ব্যাবহার দিন দিন বেড়েই যাচ্ছে । অনেক ডিজাইনার কিভাবে নিউমার্ফিজম ব্যাবহার করতে হয় তা ভালো করে জানে না ।
আশা করছি আজ আমার এই টিউন টি ভালো করে পড়লে নিউমার্ফিজম এর সম্পর্কে অনেক কিছু জানতে পারবেন । আর কিভাবে তা ওয়েব ডিজাইন এ প্রয়োগ করবেন তা সরাসরি দেখিয়ে দিবো কিছু ডিজাইন এর মাধ্যমে । চলুন বেশি কথা না বলে , এখন নিউমার্ফিজম এর সম্পর্কে খুতি-নাটি সব জানাবো ।
প্রথমেই জানবো নিউমার্ফিজম মূলত কি ?
সিএসএসের সাথে একটি নিউমোরফিক ইন্টারফেস তৈরি করা যে কোনও উপাদানগুলিতে নিয়মিত বাক্স-ছায়া সম্পত্তি প্রয়োগ করা যতটা সহজ, ততটুকু সহজ, তবে এটি এর চেয়ে আরও বেশি প্রয়োজনীয়। বিভিন্ন ধরণের প্রভাব এবং প্রকরণের জন্য একাধিক বাক্স-ছায়া এবং পটভূমির রঙের মান ব্যবহার করে একটি নিউমোরফিক ইউআইয়ের স্বতন্ত্রতা আসে।
Neumorphic box shadows :
Here’s the syntax:
box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];
box-shadow এর প্রত্যেক টা বিষয় সম্পর্কে জানবো এখন ঃ
Horizontal offset: একটি ধনাত্মক মান ছায়াকে ডানদিকে অফসেট করে, যখন একটি নেতিবাচক মান হয় তখন এটি বামে অফসেট করবে।
Vertical offset: একটি ধনাত্মক মান ছায়াকে উপরের দিকে অফসেট করে, যখন একটি নেতিবাচক মান হয় তখন এটি নীচের দিকে অফসেট করবে।
Blur Radius: ছায়ার দৈর্ঘ্য। দৈর্ঘ্য যত দীর্ঘ হবে তত বড় এবং হালকা ছায়া হয়ে যাবে। কোন নেতিবাচক মান থাকবে না ।
Spread Radius: এটি আর একটি দৈর্ঘ্যের মান, যেখানে বৃহত্তর মানগুলি বৃহত্তর, আর দীর্ঘ ছায়ায় ফল দেখাবে।
Color: এখানে আমাদের মনের ইচ্ছে মতো ছায়ার রঙ সিলেক্ট করবো।
Inset:ডিফল্ট মান (প্রাথমিক) এর ফলে একটি ড্রপ ছায়া আসবে। ইনসেট মানটি ব্যবহার করে ছায়াটিকে উপাদানটির ফ্রেমের ভিতরে সরিয়ে নিয়ে যাওয়া হয় । যার ফলে একটি অভ্যন্তরীণ ছায়া তৈরি হয়।
কমা-বিচ্ছিন্ন বাক্স-ছায়া মান ব্যবহার করে আমরা একাধিক ছায়া প্রয়োগ করতে পারি। বাক্সের প্রতিটি পাশের জন্য একটি করে চারটি মান নির্ধারণ করা যায়।যেমন ——-
এখন আমরা এই ২ টা বক্স ডিজাইন করবো নিউমার্ফিজম ব্যাবহার করে । চলুন দেখি ডিজাইন টি কিভাবে করতে হবে ঃ
HTML PART:
<!DOCTYPE html>
<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
<title>Neumorphism Shadow box design</title>
</head>
<body>
<div class=”element element-1″>Drop Shadow</div>
<div class=”element element-2″>Inset Shadow</div>
</body>
</html>
CSS PART:
body {
align-items: center;
background-color: #afd275;
display: flex;
height: 100vh;
justify-content: center;
}
.element {
align-items: center;
background-color: #afd275;
border-radius: 50px;
display: flex;
height: 200px;
justify-content: center;
margin-right: 4rem;
width: 200px;
}
.element-1 {
box-shadow:
12px 12px 16px 0 rgba(0, 0, 0, 0.25),
-8px -8px 12px 0 rgba(255, 255, 255, 0.3);
}
.element-2 {
box-shadow:
12px 12px 16px 0 rgba(255, 255, 255, 0.3) inset,
-8px -8px 12px 0 rgba(0, 0, 0, .25) inset;
}
সকলের জন্য একটা ডিজাইন হোম ওয়ার্ক হিসাবে দেওয়া হলো ।
আশা করি সবাই করতে পারবেন। যদি না পারেন তাহলে চিন্তার কোনো কারন নেই। কেননা আমি পরবর্তী টিউন করবো এই ডিজাইন টি নিয়ে ।
আমরা সবাই একটি কথা জানি যে , অনুশীলন সাফল্যর চাবিকাটি (Practic makes perfect)
ধন্যবাদ সবাইকে । সব সময় আমাদের আইটি ডক্টর ২৪.কম এর সাথেই থাকুন । বাংলা টেকনোলজি ব্লগিং প্লাটফর্ম ও কমিউনিটি।
The post সারা বিশ্বকে তাক লাগিয়ে দিলো নিউমার্ফিজম এর মাধ্যমে ডিজাইন-গুলো appeared first on ITDOCTOR24.COM.
from ITDOCTOR24.COM https://ift.tt/3edTlxj
ethical hacking,hacking,bangla ethical hacking,bangla hacking tutorial,bangla tutorial,bangla hacking book,ethical hacking bangla,bangla,hacking apps,ethical hacking bangla tutorial,bangla hacking,bangla hacking pdf,bangla hacking video,bangla android hacking,bangla hacking tutorials,bangla fb hacking tutorial,bangla hacking book download,learn ethical hacking,hacking ebook,hacking tools,bangla ethical hacking course, tricks,hacking,ludo king tricks,whatsapp hacking trick 2019 tricks,wifi hacking tricks,hacking tricks: secret google tricks,simple hacking tricks,whatsapp hacking tricks,tips and tricks,wifi tricks,tech tricks,redmi tricks,hacking trick paytm cash,hacking trick helo app,hacking trick of helo app,paytm cash hacking trick,wifi password hacking,paytm cash hacking trick malayalam,hacker tricks, tips and tricks,pubg mobile tips and tricks,tricks,tips,tips and tricks for pubg mobile,100 tips and tricks,pubg tips and tricks,excel tips and tricks,google tips and tricks,kitchen tips and tricks,season 2 tips and tricks,android tips and tricks,fortnite tips and tricks,godnixon tips and tricks,free fire tips and tricks,advanced tips and tricks,whatsapp tips and tricks, facebook tricks,facebook,facebook hidden tricks,facebook tips and tricks,facebook latest tricks,facebook tips,facebook new tricks,facebook messenger tricks,facebook android app tricks,fb tricks,facebook app tricks,facebook tricks and tips,facebook tricks in hindi,tricks,facebook tutorial,new facebook tricks,cool facebook tricks,facebook tricks 2016,facebook tricks 2017,facebook secret tricks,facebook new tricks 2020,blogger blogspot seo tips and tricks,blogger tricks,blogger,blogger seo tips,blogger seo tips and tricks,seo for blogger,blogger seo in hindi,blogger seo best tips for increasing visitors,blogging tips and tricks,blogger blog seo,blogger seo in urdu,adsense approval trick,blogging tips and tricks for beginners,blogging tricks,blogger tutorial,blogger tricks 2016,blogger tricks 2017 Credit ITDOCTOR24.COM
0 Comments