সারা বিশ্বকে তাক লাগিয়ে দিলো নিউমার্ফিজম এর মাধ্যমে ডিজাইন-গুলো

0
155
drop insert box shadow
drop insert box shadow

বর্তমান বিশ্বের সকল ওয়েব-ডেভেলপারদের কাছে  নিউমার্ফিজম খুবই জনপ্রিয়তা অর্জন করেছে । কেননা  নিউমার্ফিজম ব্যাবহার করে যেই সব ডিজাইন গুলো করা হয় তা অনেক আকর্ষণীয় । তাই এর ব্যাবহার দিন দিন বেড়েই যাচ্ছে । অনেক ডিজাইনার কিভাবে  নিউমার্ফিজম ব্যাবহার করতে হয়  তা ভালো করে জানে না ।

আশা করছি  আজ আমার এই টিউন টি ভালো করে পড়লে  নিউমার্ফিজম এর সম্পর্কে অনেক কিছু জানতে পারবেন । আর কিভাবে তা ওয়েব ডিজাইন এ প্রয়োগ করবেন তা  সরাসরি দেখিয়ে দিবো কিছু ডিজাইন এর মাধ্যমে । চলুন বেশি কথা না বলে , এখন  নিউমার্ফিজম এর  সম্পর্কে খুতি-নাটি সব জানাবো ।

প্রথমেই জানবো  নিউমার্ফিজম মূলত কি ? 

সিএসএসের সাথে একটি নিউমোরফিক ইন্টারফেস তৈরি করা যে কোনও উপাদানগুলিতে নিয়মিত বাক্স-ছায়া সম্পত্তি প্রয়োগ করা যতটা সহজ, ততটুকু সহজ, তবে এটি এর চেয়ে আরও বেশি প্রয়োজনীয়। বিভিন্ন ধরণের প্রভাব এবং প্রকরণের জন্য একাধিক বাক্স-ছায়া এবং পটভূমির রঙের মান ব্যবহার করে একটি নিউমোরফিক ইউআইয়ের স্বতন্ত্রতা আসে।

Neumorphism

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:ডিফল্ট মান (প্রাথমিক) এর ফলে একটি ড্রপ ছায়া আসবে। ইনসেট মানটি ব্যবহার করে ছায়াটিকে উপাদানটির ফ্রেমের ভিতরে সরিয়ে নিয়ে যাওয়া হয় ।  যার ফলে একটি অভ্যন্তরীণ ছায়া তৈরি হয়।

কমা-বিচ্ছিন্ন বাক্স-ছায়া মান ব্যবহার করে আমরা একাধিক ছায়া প্রয়োগ করতে পারি। বাক্সের প্রতিটি পাশের জন্য একটি করে চারটি মান নির্ধারণ করা যায়।যেমন ——-

 

neumorphism box

এখন আমরা  এই ২ টা  বক্স ডিজাইন করবো নিউমার্ফিজম ব্যাবহার করে  । চলুন দেখি ডিজাইন টি  কিভাবে করতে হবে ঃ

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)

ধন্যবাদ সবাইকে । সব সময় আমাদের  আইটি ডক্টর ২৪.কম এর সাথেই থাকুন ।  বাংলা টেকনোলজি ব্লগিং প্লাটফর্ম ও কমিউনিটি।

 

 

 

Please comment Here (ভাল লাগলে কমেন্ট করুন)