X

X

X

CSS3 Border Images । বর্ডার ইমেজ


CSS3 Border Images

CSS3 border-image property ব্যবহার করে কোনো ইলামেন্টের জন্য বর্ডারে ইমেজ উপস্থাপণ করা যায়। অর্থাৎ, ইমেজকে বর্ডার হিসেবে ব্যবহার করা যায়।


Browser Support

নিচে উল্লিখিত ব্রাউজারসমূহ এই ভার্শন থেকে border-image property কে সাপোর্ট করে।

Property
border-image 16.0
4.0 -webkit-
11.0 15.0
3.5 -moz-
6.0
3.1 -webkit-
15.0
11.0 -o-

CSS3 border-image Property

সাধারণত বর্ডারের পরিবর্তে কোনো ছবিকে কোনো ইলামেন্টের বর্ডার হিসেবে ব্যবহার করার জন্য CSS3 এর border-image property ব্যবহৃত হয়।

এই প্রপার্টির তিন ধরণের মান রয়েছে:

  1. বর্ডার হিসেবে ব্যবহৃত ছবি
  2. ছবিটিকে কিভাবে কর্তন করতে হবে
  3. middle section -টি repeated নাকি stretched হবে তার বর্ণনা

আমরা (“border.png”) ছবিটি ব্যবহার করবো:

Border

border-image property ছবিটিকে গ্রাহক করে এবং এটি নয়টি সেকশনে ভাগ করে, যেমন tic-tac-toe board । তারপর এর কোনগুলো ইলামেন্টের কোন বরাবর এবং মধ্যবর্তী সেকশনটি আপনার বর্ণনানুযায়ী repeated বা stretched হয়ে থাকে।

নোট: border-image প্রপার্টিকে কার্যকর করার জন্য , ইলামেন্টে border property এর মান অবশ্যই সেট করতে হবে!

এখানে ছবিটির মধ্যবর্তী অংশটি বর্ডার তৈরি করার জন্য বারবার উপস্থাপণ করা হয়েছে:

An image as a border!

কোডটি নিচে দেওয়া হলো:

Code Example

#borderimg { 
    border: 10px solid transparent;
    padding: 15px;
    border-image: url(border.png) 30 round;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

এখানে ছবিটির মধ্যবর্তী অংশটিকে বর্ডার তৈরি করার জন্য stretched করা হয়েছে:

An image as a border!

কোডটি নিচে দেওয়া হলো:

Code Example

#borderimg { 
    border: 10px solid transparent;
    padding: 15px;
    border-image: url(https://www.w3schools.com/css/border.png) 30 stretch;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

টিপস: border-image property হচ্ছে border-image-source, border-image-slice, border-image-width, border-image-outsetborder-image-repeat property-সমূহের সংক্ষিপ্ত ও সমন্বিত শর্টহ্যান্ড প্রপার্টি।

CSS3 border-image – বিভিন্ন কর্তনমান

বর্ডারে ব্যবহৃত ছবিটিকে বিভিন্নভাবে কর্তন করার ফলে এটির আকার বিভিন্নরকম হয়, এবং এটি বিভিন্নভাবে উপস্থাপিত হয়।

উদাহরণ ১:

border-image: url(border.png) 50 round;

উদাহরণ ২:

border-image: url(border.png) 20% round;

উদাহরণ ৩:

border-image: url(border.png) 30% round;

নিচে কোডটি দেওয়া হলো:

Code Example

#borderimg1 {
    border: 10px solid transparent;
    padding: 15px;
    border-image: url(https://www.w3schools.com/css/border.png) 50 round;
}

#borderimg2 {
    border: 10px solid transparent;
    padding: 15px;
    border-image: url(https://www.w3schools.com/css/border.png) 20% round;
}

#borderimg3 {
    border: 10px solid transparent;
    padding: 15px;
    border-image: url(https://www.w3schools.com/css/border.png) 30% round;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


নিজে নিজে চর্চা করুন!

Exercise 1 »  Exercise 2 »


CSS3 Border Property -সমূহ

Property বর্ণনা
border-image সব border-image-* property -এর মান সেট করার একটি shorthand property
border-image-source যে ছবিটিকে বর্ডার ইমেজ হিসেবে ব্যবহার করা হবে, তার সোর্স বর্ণনা করার জন্য ব্যবহৃত হয়।
border-image-slice border image কর্তণ করার পদ্ধতি বর্ণনা করা হয়।
border-image-width border image এর প্রস্থ বর্ণনা করার জন্য ব্যবহৃত হয়।
border-image-outset Specifies the amount by which the border image area extends beyond the border box
border-image-repeat border image টি repeated, rounded নাকি stretched হবে তা বর্ণনা করার জন্য ব্যবহৃত হয়।