CSS-এ বর্ডার-ইমেজ প্রপার্টি প্রথমে আপনার মনকে মোড়ানো একটু কঠিন। এই নিবন্ধে, আমরা বিভিন্ন ব্রাউজারে এটি ব্যবহার করার ক্ষেত্রে বর্ডার-ইমেজ প্রপার্টি কী, কীভাবে এটি ব্যবহার করতে হয় এবং এর আইডিওসিঙ্ক্রাসিগুলি নিয়ে আলোচনা করব।
আমাদের সিএসএস শিক্ষার এই মুহুর্তে, সীমান্ত সম্পত্তি কী তা আমাদের জানা উচিত। রিফ্রেশ করতে, এটি এমন একটি সম্পত্তি যা একটি উপাদানের চারপাশে একটি সীমানা নির্দিষ্ট করতে শর্টহ্যান্ড ব্যবহার করে। এটির নিম্নলিখিত কাঠামো রয়েছে:
border: 2px /*width*/ dashed /*style*/ green; /*color*/
ঠিক সীমানার মত, বর্ডার-ইমেজ প্রপার্টি হল একটি শর্টহ্যান্ড প্রপার্টি যা একটি উপাদানের চারপাশে একটি সীমানা তৈরি করতে একটি উৎস ইমেজ ব্যবহার করে। এটির নিম্নলিখিত কাঠামো রয়েছে:
border-image:
url("https://www.placekitten.com/501/700") /*source*/
25% / /*slice*/
70px / /*width*/
2px /*outset*/
stretch; /*repeat*/ - সীমান্ত-চিত্র-উৎস:
বর্ডার-ইমেজ-সোর্স হল CSS-এ বর্ডার-ইমেজ প্রপার্টির সোর্স অংশের জন্য লংহ্যান্ড প্রপার্টি। এটি হয় একটি url লাগে যার একটি আপেক্ষিক পাথ আছে বা একটি প্রকৃত চিত্রের জন্য চিত্রের url আছে, অথবা এটি একধরনের গ্রেডিয়েন্ট
- বর্ডার-ইমেজ-স্লাইস:
বর্ডার-ইমেজ-স্লাইস প্রপার্টি হল বর্ডার-ইমেজ প্রপার্টির স্লাইস অংশের লংহ্যান্ড প্রপার্টির নাম। এটি ছবিটিকে নয়টি স্বতন্ত্র বিভাগে বিভক্ত করে।
ডিফল্টরূপে, মাঝখানটি বের করা হয় যাতে বাকি চিত্রটি আপনি যে উপাদানটি ব্যবহার করছেন সেটিকে ঘিরে রাখতে পারে। বর্ডার-ইমেজ-স্লাইস বৈশিষ্ট্য চারটি সংখ্যা পর্যন্ত ব্যবহার করতে পারে (%-এ) স্লাইসগুলি কোথায় হবে তা নির্ধারণ করতে। আপনি ভর্তি শব্দটিও ব্যবহার করতে পারেন৷ আপনি যদি মধ্যম বিভাগটি ব্যবহার করতে চান।
- সীমানা-চিত্র-প্রস্থ:
সীমানা-প্রস্থ বৈশিষ্ট্যের মতো, সীমানা-চিত্র-প্রস্থ বৈশিষ্ট্যটি নির্দেশ করে যে আপনি আপনার সীমানা-ইমেজটি কতটা প্রশস্ত করতে চান। এটি শতাংশ বা rems/ems/px ব্যবহার করতে পারে এবং চারটি পর্যন্ত সংখ্যা নিতে পারে যাতে সীমানার প্রতিটি পাশের নিজস্ব প্রস্থ থাকতে পারে।
- বর্ডার-ইমেজ-আউটসেট:
বর্ডার-ইমেজ-আউটসেট প্রপার্টি সেট করে যে ইমেজের সীমানা উপাদানের বর্ডার বক্স থেকে কতটা দূরে। একটি অনুস্মারক হিসাবে, বর্ডার বক্সটি বক্স মডেলের অংশ - প্যাডিং এবং মার্জিনের মধ্যে যে এলাকা। সংখ্যাটি যত বেশি হবে, এটি তার সীমানা বাক্স থেকে আরও দূরে। এটি চারটি মান পর্যন্ত লাগে যাতে প্রয়োজন হলে প্রতিটি পাশের নিজস্ব মান থাকে।
81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগদানের পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷
৷গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় ব্যয় করেছে।
- বর্ডার-ইমেজ-রিপিট:
বর্ডার-ইমেজ-রিপিট প্রপার্টি সেট করে যে প্রতিটি প্রান্ত কীভাবে আচরণ করবে (প্রান্ত হল প্রতিটি পাশে ছবির কোণগুলি সহ নয়)। এটি দুটি মান পর্যন্ত লাগে। যখন একটি মান নির্দিষ্ট করা হয়, এটি সমস্ত প্রান্তে প্রযোজ্য হয় এবং যখন দুটি মান নির্দিষ্ট করা হয়, প্রথমটি উপরের এবং নীচে প্রযোজ্য হয়, যখন দ্বিতীয়টি বাম এবং ডানে প্রযোজ্য হয়। মান প্রসারিত হতে পারে , পুনরাবৃত্তি , বৃত্তাকার অথবা স্পেস .
ব্রাউজার কুইর্কস
ফায়ারফক্স এবং সাফারি হল সবচেয়ে সাধারণ ব্রাউজার যা আপনাকে একটি বর্ডার-ইমেজ তৈরি করতে প্রতিটি স্বতন্ত্র সম্পত্তি ব্যবহার করতে দেয়। ক্রোমে, আপনি শুধুমাত্র শর্টহ্যান্ড প্রপার্টি ব্যবহার করতে পারেন - এবং আপনাকে এটি বর্ডার-স্টাইল এর সাথে ব্যবহার করতে হবে সম্পত্তি যা আমাদেরকে বলে দেবে যে সীমানার উপরে আমরা থাকতে চাই (সলিড, ড্যাশড, ইত্যাদি)। আপনি যদি ক্রোম ব্যবহার করেন এবং এটি আপনার জন্য সঠিকভাবে কাজ না করে তবে এটি দেখে নিন।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Border Image</title>
<style>
* {
box-sizing: border-box;
}
.flex {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
width: 500px;
height: 300px;
margin: 20px;
}
.border-image-box {
/* Below only works in Firefox and Safari*/
border-image-source: url(https://placekitten.com/900/1000);
border-image-slice: 25%;
border-image-width: 70px;
border-image-outset: 2px;
border-image-repeat: round;
padding: 80px;
/* This way will NOT work in Chrome */
}
.border-image-shorthand {
border-style: solid;
border-image:
url(https://placekitten.com/900/1000)
25% /
70px /
2px
round;
padding: 80px;
/* Above works in all browsers. Firefox and Safari you can use the border-image prop without using the border-style property. In Chrome you MUST use the border-style prop in order for the image to show up on the webpage */
}
</style>
</head>
<body>
<div class="border-image-box flex">
This is a box. It's using each of the individual border-image
properties to style
</div>
<div class="border-image-shorthand flex">
This is a box. It's using the border-image shorthand to style
</div>
</body>
</html> এই টিউটোরিয়ালে, আমরা শিখেছি কিভাবে একটি এলিমেন্টের চারপাশে একটি CSS ইমেজ বর্ডার তৈরি করতে বর্ডার-ইমেজ প্রপার্টি ব্যবহার করতে হয়। এটি একটি শর্টহ্যান্ড সম্পত্তি যা বর্ডার-ইমেজ-উৎস, বর্ডার-ইমেজ-স্লাইস, বর্ডার-ইমেজ-প্রস্থ, বর্ডার-ইমেজ-আউটসেট এবং বর্ডার-ইমেজ-রিপিট নিয়ে গঠিত। এটিকে সমস্ত ব্রাউজারগুলির সাথে সামঞ্জস্যপূর্ণ করতে, বর্ডার-ইমেজ মান নির্দিষ্ট করার আগে একটি বর্ডার-স্টাইল সলিড সেট করুন।
