CSS-এ স্ট্রানিং গ্রেডিয়েন্ট বর্ডার তৈরি: ধাপে ধাপ গাইড

গ্রেডিয়েন্ট বর্ডার ওয়েব এলিমেন্টে একটি আধুনিক এবং ভিজ্যুয়ালি আকর্ষণীয় টাচ যোগ করে, সেগুলো বের করে তুলে দেয়। তবে, 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; }

পদ্ধতি ১: border-image ব্যবহার করে

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>

পেজে একটি বক্স দেখা যাচ্ছে যার হরিজন্টাল গ্রেডিয়েন্ট বর্ডার লাল থেকে টিলে ট্রানজিশন করছে।

পদ্ধতি ২: নেস্টেড এলিমেন্টসহ ব্যাকগ্রাউন্ড এবং প্যাডিং

এই পদ্ধতিতে একটি প্যারেন্ট এলিমেন্ট গ্রেডিয়েন্ট ব্যাকগ্রাউন্ড এবং একটি নেস্টেড চাইল্ড এলিমেন্ট ব্যবহার করে বর্ডারের ভ্রান্তি তৈরি করে।

<!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>

ব্যাকগ্রাউন্ড এবং প্যাডিং ব্যবহার করে তৈরি একটি ডায়াগোনাল গ্রেডিয়েন্ট বর্ডার (লাল থেকে টিল) পেজে দেখা যাচ্ছে।

পদ্ধতি ৩: সিউডো-এলিমেন্টস

::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>

সিউডো-এলিমেন্ট ব্যবহার করে তৈরি একটি ভার্টিক্যাল গ্রেডিয়েন্ট বর্ডার (লাল থেকে টিল) পেজে দেখা যাচ্ছে।

তুলনা

উপসংহার

এই তিনটি পদ্ধতি ব্যবহার করে গ্রেডিয়েন্ট বর্ডার কার্যকরভাবে UI ডিজাইন বাড়ায়। সিম্পলিসিটির জন্য border-image, ইউনিভার্সাল সাপোর্টের জন্য ব্যাকগ্রাউন্ড/প্যাডিং, বা ফ্লেক্সিবিলিটির জন্য সিউডো-এলিমেন্ট বেছে নিন। প্রতিটি পদ্ধতি আধুনিক, ভিজ্যুয়ালি আকর্ষণীয় ওয়েব এলিমেন্ট তৈরি করার জন্য অনন্য সুবিধা অফার করে।