সিএসএস(৩) বর্ডার-ইমেজ
সিএসএস(৩) বর্ডার-ইমেজ
HTML এলিমেন্টকে আরও আকর্ষণীয় করে উপস্থাপন করার জন্য আপনি এটির চারপাশে বর্ডার ব্যবহার করতে পারেন।
আর বর্ডারকে আরও আকর্ষণীয় করে তুলার জন্য বর্ডার-ইমেজ ব্যবহার করতে পারেন। সিএসএস(৩) border-image প্রোপার্টির মাধ্যমে আপনি এই কাজটি খুব সহজেই করতে পারবেন।
এক নজরে বর্ডার-ইমেজের সম্ভাব্য প্রোপার্টিসমূহ
বর্ডার ইমেজের সবগুলো প্রোপার্টি সেট করার একটি সংক্ষিপ্ত প্রোপার্টি।
বর্ডার-ইমেজ এর উৎস নির্দেশ করে।
বর্ডার ইমেজটি কিভাবে স্লাইস হবে তা নির্দেশ করে।
বর্ডার ইমেজের প্রস্থ(width) নির্দেশ করে।
বর্ডার ইমেজটি বর্ডারের কোন জায়গায় অবস্থান করবে তা নির্দেশ করে।
বর্ডার ইমেজ পুনরাবৃত্তি, বৃত্তাকার বা প্রসারিত হবে কিনা তা নির্ধারণ করে।
সিএসএস(৩) border-image প্রোপার্টি
সিএসএস(৩) border-image প্রোপার্টির মাধ্যমে আপনি একটি এলিমেন্টের চারপাশে বর্ডার হিসেবে ইমেজ ব্যবহার করতে পারেন।
বর্ডার ইমেজ প্রোপার্টির ৩টি অংশ থাকেঃ
- বর্ডার হিসেবে ব্যবহার করার জন্য একটি ইমেজ।
- ইমেজটি কোথায় স্লাইস হবে তা নির্দেশ করে।
- মাঝের সেকশনটি রিপিট বা প্রসারিত হবে কিনা তা নির্দেশ করে।
উদাহরণ হিসেবে আমরা নিম্নের "border_image.jpg" ইমেজটি ব্যবহার করে বর্ডার তৈরি করবোঃ
ইমেজটির চারটি কর্ণার উক্ত বডারের চার কর্ণারে অবস্থান নিবে এবং ইমেজের মাঝের অংশটি নির্দেশিত উপায়ে বর্ডারের মাঝখানের অংশে রিপিট বা প্রসারিত হবে।
border-image প্রোপার্টি ব্যবহার করতে হলে, প্রথমে ঐ এলিমেন্টে border প্রোপার্টি সেট করতে হবে।উদাহরণ
<!DOCTYPE html>
<html>
<head>
<style>
#bimage {
border:8px solid transparent;
padding:20px;
-webkit-border-image:url(border_image.jpg) 20 round;
-o-border-image: url(border_image.jpg) 20 round;
border-image: url(border_image.jpg) 20 round;
}
</style>
<title>সিএসএস border-image এর উদাহরণ</title>
</head>
<body>
<p><strong>নোটঃ</strong> বর্ডার-ইমেজ প্রোপার্টি IE 10 এবং তার পূর্বের ভার্সনে সাপোর্ট করে না।</p>
<p>border-image প্রোপার্টি ব্যবহার করে একটি এলিমেন্টের চারপাশে ইমেজ সেটঃ</p>
<p id="bimage"> এই এলিমেন্টের চারপাশে বর্ডার সেট করার জন্য ছবির মাঝের অংশ পুনরাবৃত্ত হয়েছে।</p>
</body>
</html>
ফলাফল
নিচের উদাহরণে ছবির মাঝের অংশকে প্রসারিত করে বর্ডার তৈরি করা দেখানো হলোঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<style>
#bimage {
border:8px solid transparent;
padding:20px;
-webkit-border-image:url(border_image.jpg) 35 stretch;
-o-border-image:url(border_image.jpg) 35 stretch;
border-image:url(border_image.jpg) 35 stretch;
}
</style>
<title>সিএসএস border-image এর উদাহরণ</title>
</head>
<body>
<p><strong>নোটঃ</strong> বর্ডার-ইমেজ প্রোপার্টি IE 10 এবং তার পূর্বের ভার্সনে সাপোর্ট করে না।</p>
<p> border-image প্রোপার্টি ব্যবহার করে একটি এলিমেন্টের চারপাশে বর্ডার হিসেবে ইমেজ সেটঃ</p>
<p id="bimage"> এই এলিমেন্টের চারপাশে বর্ডার সেট করার জন্য ছবির মাঝের অংশ প্রসারিত হয়েছে।</p>
</body>
</html>
ফলাফল
নোটঃ border-image প্রোপার্টিটি
border-image-source, border-image-slice, border-image-width,
border-image-outset
এবং border-image-repeat প্রোপার্টি গুলো একত্রে সেট করার জন্য একটি সংক্ষিপ্ত প্রোপার্টি।
সিএসএস(৩) border-image-slice প্রোপার্টি
স্লাইস ভ্যালু সম্পূর্ণ বর্ডারকেই পরিবর্তন করে দিতে পারে। নিম্নে বিভিন্ন ধরনের স্লাইস ভ্যালুর ব্যবহার দেখানো হলোঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<style>
#bimage1 {
border: 15px solid transparent;
padding:20px;
-webkit-border-image: url(border_image.jpg) 50% round;
-o-border-image: url(border_image.jpg) 50% round;
border-image: url(border_image.jpg) 50% round;
}
#bimage2 {
border: 15px solid transparent;
padding:20px;
-webkit-border-image: url(border_image.jpg) 30% round;
-o-border-image: url(border_image.jpg) 30% round;
border-image: url(border_image.jpg) 30% round;
}
#bimage3 {
border:15px solid transparent;
padding:20px;
-webkit-border-image: url(border_image.jpg) 25% round;
-o-border-image: url(border_image.jpg) 25% round;
border-image: url(border_image.jpg) 25% round;
}
</style>
<title>সিএসএস border-image এর উদাহরণ</title>
</head>
<body>
<p id="bimage1">border-image টি 50% round হয়েছে;</p>
<p id="bimage2">border-image টি 30% round হয়েছে।;</p>
<p id="bimage3">border-image টি 25% round হয়েছে।;</p>
<p><strong>নোটঃ</strong> border-image প্রোপার্টি IE 10 এবং তার পূর্বের ভার্সনে সাপোর্ট করে না।</p>
</body>
</html>
ফলাফল
গ্র্যাডিয়েন্ট বর্ডার
border-image প্রোপার্টির ভ্যালু হিসেবে linear-gradient() ব্যবহার করে এইচটিএমএল এলিমেন্টে গ্রাডিয়েন্ট বর্ডার সেট করা যায়।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<style>
#gradient {
border: 15px solid;
-webkit-border-image: linear-gradient(orange, red) 10;
-o-border-image: linear-gradient(orange, red) 10;
border-image: linear-gradient(orange, red) 10;
padding: 10px;
}
</style>
<title>সিএসএস border-image এর উদাহরণ</title>
</head>
<body>
<p id="gradient">এই এলিমেন্টের চারপাশে বর্ডার সেট করার জন্য ছবির মাঝের অংশ প্রসারিত হয়েছে।</p>
</body>
</html>
ফলাফল
ব্রাউজার সাপোর্ট
| প্রোপার্টি | Google Chrome | Edge/IE | Mozila Firefox | Safari | Opera |
|---|---|---|---|---|---|
| border-image | 16.0 4.0 -webkit- |
11.0 | 15.0 3.5 -moz- |
6.0 3.1 -webkit- |
15.0 11.0 -o- |