গ্রেডিয়েন্ট সীমানাগুলি ওয়েব উপাদানগুলিতে একটি আধুনিক এবং দৃশ্যত আকর্ষণীয় স্পর্শ যোগ করে, তাদের আলাদা করে তোলে। যাইহোক, CSS-এ এই প্রভাব অর্জন করা সহজ নয় কারণ border সম্পত্তি স্থানীয়ভাবে গ্রেডিয়েন্ট সমর্থন করে না। এই নিবন্ধটি তিনটি ভিন্ন পদ্ধতি ব্যবহার করে গ্রেডিয়েন্ট সীমানা বাস্তবায়নের জন্য ব্যবহারিক সমাধানগুলি অন্বেষণ করে৷
সিনট্যাক্স
/* Method 1: Using border-image */
selector {
border-width: 5px;
border-style: solid;
border-image: linear-gradient(direction, color1, color2) 1;
}
/* Method 2: Background and Padding */
.parent {
background: linear-gradient(direction, color1, color2);
padding: border-width;
}
/* Method 3: Pseudo-elements */
selector::before {
content: "";
position: absolute;
inset: -border-width;
background: linear-gradient(direction, color1, color2);
z-index: -1;
}
পদ্ধতি 1:বর্ডার-ইমেজ ব্যবহার করা
border-image সম্পত্তি আপনাকে একটি উপাদানের সীমানা হিসাবে একটি গ্রেডিয়েন্ট সেট করতে দেয়
<!DOCTYPE html>
<html>
<head>
<style>
.gradient-border-box {
width: 300px;
padding: 20px;
text-align: center;
border-width: 5px;
border-style: solid;
border-image: linear-gradient(to right, #ff6b6b, #4ecdc4) 1;
margin: 20px auto;
}
</style>
</head>
<body>
<div class="gradient-border-box">
This is a gradient border using border-image
</div>
</body>
</html>
A box with a horizontal gradient border transitioning from red to teal appears on the page.
পদ্ধতি 2:নেস্টেড উপাদানগুলির সাথে পটভূমি এবং প্যাডিং
এই পদ্ধতিটি একটি গ্রেডিয়েন্ট ব্যাকগ্রাউন্ড সহ একটি অভিভাবক উপাদান এবং একটি সীমানার বিভ্রম তৈরি করতে একটি নেস্টেড চাইল্ড এলিমেন্ট ব্যবহার করে
<!DOCTYPE html>
<html>
<head>
<style>
.gradient-parent {
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
padding: 5px;
display: inline-block;
margin: 20px;
}
.white-child {
background: white;
padding: 20px;
}
</style>
</head>
<body>
<div class="gradient-parent">
<div class="white-child">
Gradient border using background and padding
</div>
</div>
</body>
</html>
A box with a diagonal gradient border (red to teal) created using background and padding appears on the page.
পদ্ধতি 3:সিউডো-এলিমেন্টস
::before ব্যবহার করা হচ্ছে ছদ্ম-উপাদান আপনাকে মূল বিষয়বস্তুর পিছনে একটি গ্রেডিয়েন্ট লেয়ার করতে দেয়
<!DOCTYPE html>
<html>
<head>
<style>
.pseudo-border-box {
position: relative;
width: 300px;
padding: 20px;
background: white;
margin: 30px auto;
text-align: center;
}
.pseudo-border-box::before {
content: "";
position: absolute;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
background: linear-gradient(to bottom, #ff6b6b, #4ecdc4);
z-index: -1;
}
</style>
</head>
<body>
<div class="pseudo-border-box">
Gradient border using pseudo-elements
</div>
</body>
</html>
A box with a vertical gradient border (red to teal) created using pseudo-elements appears on the page.
তুলনা
উপসংহার
গ্রেডিয়েন্ট সীমানা এই তিনটি পদ্ধতি ব্যবহার করে কার্যকরভাবে UI ডিজাইন উন্নত করে। border-image বেছে নিন সরলতার জন্য, সার্বজনীন সমর্থনের জন্য পটভূমি/প্যাডিং, অথবা নমনীয়তার জন্য ছদ্ম-উপাদান। প্রতিটি পদ্ধতি আধুনিক, দৃশ্যত আকর্ষণীয় ওয়েব উপাদান তৈরি করার জন্য অনন্য সুবিধা প্রদান করে।
