CSS বর্ডার (CSS Borders) [বাংলায় CSS মাস্টার ক্লাস]: বর্ডার ব্যবহার একটি শক্তিশালী টুল যা ডেভেলপারদের এইচটিএমএল উপাদানে গঠনে সাহায্য করে। বিভিন্ন ধরনের Property আছে নিচে তা আলোচনা করা হল। dotted, dashed, solid, double, groove, ridge, inset, outset, none, hidden ইত্যাদি।
বর্ডার প্রপার্টি: CSS বর্ডার-প্রস্থ, বর্ডার-স্টাইল এবং বর্ডার-কালার সহ বেশ কিছু বর্ডার প্রোপার্টি প্রদান করে। এই বৈশিষ্ট্যগুলি আপনাকে একটি উপাদানের চারপাশে সীমানার প্রস্থ, শৈলী (যেমন সলিড, ড্যাশড বা ডটেড) এবং রঙ নিয়ন্ত্রণ করতে দেয়। বিস্তৃত সীমানা প্রভাব তৈরি করতে আপনি এই বৈশিষ্ট্যগুলিকে একত্রিত করতে পারেন।
গোলাকার কোণ ( Rounded Corners): সীমানা-ব্যাসার্ধ বৈশিষ্ট্য আপনাকে উপাদানগুলির কোণগুলিকে বৃত্তাকার করতে সক্ষম করে। এই বৈশিষ্ট্যটি বিশেষভাবে নান্দনিকভাবে আনন্দদায়ক বোতাম, ধারক এবং ছবি তৈরি করার জন্য মূল্যবান, ওয়েব ডিজাইনকে একটি নরম এবং আরও আধুনিক চেহারা দেয়।
বর্ডার শর্টহ্যান্ড ( Border Shorthand): CSS বর্ডার নামে একটি সুবিধাজনক শর্টহ্যান্ড প্রপার্টি অফার করে যা আপনাকে একটি ঘোষণায় সমস্ত বর্ডার বৈশিষ্ট্য সেট করতে দেয়। উদাহরণস্বরূপ, border : 2px solid #000; একটি উপাদানের চারপাশে একটি 2-পিক্সেল কঠিন কালো সীমানা সেট করে।
বর্ডার ইমেজ: বর্ডার-ইমেজ প্রোপার্টি সহ, আপনি জটিল এবং আলংকারিক সীমানা তৈরি করতে একটি ইমেজ ব্যবহার করতে পারেন। এটি প্যাটার্ন, গ্রেডিয়েন্ট বা জটিল ডিজাইনের সাথে সীমানাগুলির চেহারা কাস্টমাইজ করার জন্য অফুরন্ত সম্ভাবনাগুলি উন্মুক্ত করে৷
বক্স শ্যাডো: যদিও প্রযুক্তিগতভাবে একটি সীমানা সম্পত্তি নয়, বক্স-ছায়া প্রায়ই গভীরতা এবং মাত্রা তৈরি করতে সীমানার সাথে একত্রে ব্যবহার করা হয়। ছায়া প্রয়োগ করে, আপনি উপাদানগুলিকে উত্থিত বা ইনসেট দেখাতে পারেন, সামগ্রিক চাক্ষুষ আবেদন বাড়াতে পারেন।
স্টাইলিশ বোতাম: ওয়েব ফর্ম বা কল-টু-অ্যাকশন উপাদানগুলির জন্য স্টাইলিশ বোতাম তৈরি করতে বর্ডারগুলি প্রায়শই নিযুক্ত করা হয়। ব্যাকগ্রাউন্ড কালার এবং হোভার ইফেক্টের সাথে বর্ডার প্রোপার্টি একত্রিত করে, আপনি ইন্টারেক্টিভ এবং নজরকাড়া বোতাম ডিজাইন করতে পারেন যা ব্যবহারকারীর ব্যস্ততাকে উৎসাহিত করে।
CSS বর্ডার (CSS Borders) [বাংলায় CSS মাস্টার ক্লাস] সম্পর্কে বিস্তারিত নিচে দেওয়া হল।
Example:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS MASTER JHUTANDA</title>
<!--https://jhutanda.com-->
<!--https://github.com/jhutanda-->
</head>
<body>
<button class="dotted">Button</button>
<button class="dashed">Button</button>
<button class="double">Button</button>
<button class="groove">Button</button>
<button class="hidden">Button</button>
<button class="inset">Button</button>
<button class="none">Button</button>
<button class="ridge">Button</button>
<button class="outset">Button</button>
<button class="solid">Button</button>
<button class="mix">Button</button>
<button class="mix2">Button</button>
<style>
/* Choose any: dotted, dashed, solid, double, groove, ridge, inset, outset, none, hidden */
.dotted {
border: dotted;
}
.dashed {
border: dashed;
}
.double {
border: double;
}
.groove {
border: groove;
}
.hidden {
border: hidden;
}
.inset {
border: inset;
}
.none {
border: none;
}
.ridge {
border: ridge;
}
.outset {
border: outset;
}
.solid {
border: solid;
}
/* mix = top right bottom left; */
.mix {
border: hidden ridge solid groove;
}
.mix2 {
border: dotted dashed solid double;
}
</style>
</body>
</html>