সীমানা

CSS পডকাস্ট - 016: বর্ডারস

বক্স মডেল মডিউলে, আমরা বক্স মডেলের প্রতিটি বিভাগকে বর্ণনা করার জন্য একটি ফ্রেম সাদৃশ্য বিবেচনা করেছি।

বর্ডার বক্স হল আপনার বাক্সের ফ্রেম, এবং border প্রোপার্টিগুলি আপনাকে সেই ফ্রেমটি তৈরি করার জন্য একটি বিশাল অ্যারের বিকল্প দেয় যা আপনি ভাবতে পারেন।

সীমান্ত বৈশিষ্ট্য

পৃথক border বৈশিষ্ট্য একটি সীমানা বিভিন্ন অংশ শৈলী একটি উপায় প্রদান করে.

শৈলী

একটি সীমানা প্রদর্শিত হওয়ার জন্য, আপনাকে border-style সংজ্ঞায়িত করতে হবে। বেছে নেওয়ার জন্য কয়েকটি বিকল্প রয়েছে:

ridge , inset , outset এবং groove শৈলী ব্যবহার করার সময়, বৈসাদৃশ্য এবং গভীরতা প্রদান করার জন্য ব্রাউজারটি দ্বিতীয় দেখানো রঙের জন্য সীমানা রঙকে গাঢ় করবে। এই আচরণ ব্রাউজারগুলির মধ্যে পরিবর্তিত হতে পারে, বিশেষ করে black রঙের মতো গাঢ় রঙের জন্য। ক্রোমে, এই বর্ডার স্টাইলগুলি শক্ত বলে মনে হবে এবং ফায়ারফক্সে, সেগুলিকে হালকা করে তারপর একটি গাঢ় দ্বিতীয় রঙ প্রদান করা হবে।

অন্যান্য বর্ডার স্টাইলের জন্যও ব্রাউজারের আচরণ পরিবর্তিত হতে পারে, তাই বিভিন্ন ব্রাউজারে আপনার সাইট পরীক্ষা করা গুরুত্বপূর্ণ। এই পার্থক্যের একটি সাধারণ উদাহরণ হল কিভাবে প্রতিটি ব্রাউজার dotted এবং dashed শৈলী রেন্ডার করে।

আপনার বাক্সের প্রতিটি পাশে সীমানা শৈলী সেট করতে, আপনি border-top-style , border-right-style , border-left-style এবং border-bottom-style ব্যবহার করতে পারেন।

শর্টহ্যান্ড

margin এবং padding মতো, আপনি একটি ঘোষণায় আপনার সীমানার সমস্ত অংশ সংজ্ঞায়িত করতে border শর্টহ্যান্ড সম্পত্তি ব্যবহার করতে পারেন।

.my-element {
    border: 1px solid red;
}

border শর্টহ্যান্ডে মানগুলির ক্রম হল border-width , border-style এবং তারপরে, border-color ।

রঙ

আপনি আপনার বাক্সের চারপাশে বা border-color দিয়ে প্রতিটি পৃথক পাশে রঙ সেট করতে পারেন। ডিফল্টরূপে, এটি বাক্সের বর্তমান পাঠ্য রঙ ব্যবহার করে: currentColor । এর মানে হল যে আপনি যদি শুধুমাত্র সীমানা বৈশিষ্ট্য ঘোষণা করেন, যেমন প্রস্থ, রঙটি সেই গণনা করা মান হবে যদি না আপনি স্পষ্টভাবে এটি সেট করেন।

.my-element {
    color: blue;
    border: solid; /* Will be a blue border */
}

.my-element {
    color: blue;
    border: solid yellow;
}

আপনার বাক্সের প্রতিটি পাশে একটি সীমানা রঙ সেট করতে, border-top-color , border-right-color , border-left-color এবং border-bottom-color ব্যবহার করুন।

প্রস্থ

একটি সীমানার প্রস্থ হল রেখাটি কতটা পুরু এবং border-width দ্বারা নিয়ন্ত্রিত হয়। ডিফল্ট সীমানা প্রস্থ medium । যদিও আপনি একটি শৈলী সংজ্ঞায়িত না করা পর্যন্ত এটি দৃশ্যমান হবে না। আপনি অন্যান্য নামযুক্ত প্রস্থ যেমন thin এবং thick ব্যবহার করতে পারেন।

border-width বৈশিষ্ট্যগুলি একটি দৈর্ঘ্যের একক যেমন px , em , rem বা % গ্রহণ করে। আপনার বাক্সের প্রতিটি পাশে সীমানা প্রস্থ সেট করতে, border-top-width , border-right-width , border-left-width এবং border-bottom-width ব্যবহার করুন।

যৌক্তিক বৈশিষ্ট্য

লজিক্যাল প্রোপার্টি মডিউলে আপনি আবিষ্কার করেছেন কিভাবে ব্লক ফ্লো এবং ইনলাইন প্রবাহ বোঝাতে হয়, উপরের, ডান, নীচে বা বাম দিকের পরিবর্তে।

সীমানা সহ আপনারও এই ক্ষমতা রয়েছে:

.my-element {
    border: 2px dotted;
    border-inline-end: 2px solid red;
}

এই উদাহরণে, .my-element সমস্ত দিক 2px , ডটেড বর্ডার যা বর্তমান পাঠ্যের রঙ হিসাবে সংজ্ঞায়িত করা হয়েছে। inline-end বর্ডারটি তারপর 2px , কঠিন এবং লাল হিসাবে সংজ্ঞায়িত করা হয়। এর মানে হল বাম-থেকে-ডান ভাষায় — ইংরেজির মতো — লাল বর্ডারটি বাক্সের ডানদিকে থাকবে। ডান-থেকে-বাম ভাষাতে - যেমন আরবি - বাক্সের বাম দিকে লাল সীমানা থাকবে।

বর্ডারে লজিক্যাল বৈশিষ্ট্যের জন্য ব্রাউজার সমর্থন বৈচিত্র্যময়, তাই ব্যবহার করার আগে নিশ্চিত করুন যে আপনি সমর্থন চেক করেছেন।

সীমানা ব্যাসার্ধ

একটি বাক্স বৃত্তাকার কোণ দিতে border-radius বৈশিষ্ট্য ব্যবহার করুন.

.my-element {
    border-radius: 1em;
}

এই শর্টহ্যান্ডটি আপনার বাক্সের প্রতিটি কোণে একটি সামঞ্জস্যপূর্ণ সীমানা যোগ করে। অন্যান্য সীমানা বৈশিষ্ট্যগুলির মতো, আপনি border-top-left-radius , border-top-right-radius , border-bottom-right-radius এবং border-bottom-left-radius সহ প্রতিটি পাশের সীমানা ব্যাসার্ধ সংজ্ঞায়িত করতে পারেন।

আপনি শর্টহ্যান্ডে প্রতিটি কোণার ব্যাসার্ধও নির্দিষ্ট করতে পারেন, যা ক্রম অনুসরণ করে: উপরে বাম, উপরে ডান, নীচে ডান তারপর নীচে বাম।

.my-element {
    border-radius: 1em 2em 3em 4em;
}

একটি কোণার জন্য একটি একক মান সংজ্ঞায়িত করে, আপনি অন্য সংক্ষিপ্ত হাত ব্যবহার করছেন কারণ একটি সীমানা ব্যাসার্ধ দুটি অংশে বিভক্ত: উল্লম্ব এবং অনুভূমিক দিক। এর মানে হল যে আপনি যখন border-top-left-radius: 1em , আপনি উপরের-বাম- শীর্ষ ব্যাসার্ধ এবং উপরের-বাম- বাম ব্যাসার্ধ সেট করছেন।

আপনি এই মত প্রতি কোণে উভয় বৈশিষ্ট্য সংজ্ঞায়িত করতে পারেন:

.my-element {
    border-top-left-radius: 1em 2em;
}

এটি 1em এর একটি border-top-left-top মান এবং 2em এর একটি border-top-left-left মান যোগ করে। এটি ডিফল্ট বৃত্তাকার ব্যাসার্ধের পরিবর্তে উপরের বাম সীমানা ব্যাসার্ধকে একটি উপবৃত্তাকার ব্যাসার্ধে রূপান্তর করে।

আপনি মান মানের পরে উপবৃত্তাকার মানগুলিকে সংজ্ঞায়িত করতে a / ব্যবহার করে border-radius সংক্ষেপে এই মানগুলি সংজ্ঞায়িত করতে পারেন। এটি আপনাকে সৃজনশীল হতে এবং কিছু জটিল আকার তৈরি করতে সক্ষম করে।

.my-element {
    border: 2px solid;
  border-radius: 95px 155px 148px 103px / 48px 95px 130px 203px;
}

সীমান্তের ছবি

আপনাকে শুধু CSS-এ স্ট্রোক-ভিত্তিক বর্ডার ব্যবহার করতে হবে না। আপনি border-image ব্যবহার করে যেকোনো ধরনের ছবিও ব্যবহার করতে পারেন। এই শর্টহ্যান্ড প্রপার্টিটি আপনাকে সোর্স ইমেজ সেট করতে দেয়, কিভাবে সেই ইমেজটি স্লাইস করা হয়, ইমেজের প্রস্থ, সীমানাটি প্রান্ত থেকে কতদূর শুরু হয় এবং কিভাবে এটি পুনরাবৃত্তি করা উচিত।

.my-element {
  border-image-source: url(https://assets.codepen.io/174183/border-image-frame.jpg);
  border-image-slice: 61 58 51 48;
  border-image-width: 20px 20px 20px 20px;
  border-image-outset: 0px 0px 0px 0px;
  border-image-repeat: stretch stretch;
}

border-image-width বৈশিষ্ট্যটি border-width মতো: আপনি কীভাবে আপনার সীমানা চিত্রের প্রস্থ সেট করেন। border-image-outset প্রপার্টি আপনাকে আপনার বর্ডার ইমেজ এবং এটির চারপাশে মোড়ানো বাক্সের মধ্যে দূরত্ব সেট করতে দেয়।

border-image-source

border-image-source (সীমানা ছবির উৎস) যেকোন বৈধ ছবির জন্য একটি url হতে পারে, যার মধ্যে CSS গ্রেডিয়েন্ট রয়েছে।

.my-element {
    border-image-source: url('path/to/image.png');
}

.my-element {
    border-image-source: linear-gradient(to bottom, #000, #fff);
}

border-image-slice

border-image-slice প্রপার্টি হল একটি দরকারী প্রপার্টি যা আপনাকে 4টি স্প্লিট লাইন দিয়ে তৈরি একটি ইমেজকে 9টি অংশে ভাগ করতে দেয়। এটি margin শর্টহ্যান্ডের মতো কাজ করে যেখানে আপনি উপরের, ডান, নীচে এবং বাম অফসেট মান সংজ্ঞায়িত করেন।

.my-element {
    border-image: url('image.jpg');
    border-image-slice: 61 58 51 48;
}

অফসেট মান সংজ্ঞায়িত করে, আপনার কাছে এখন চিত্রের 9টি বিভাগ রয়েছে: 4টি কোণ, 4টি প্রান্ত এবং একটি মধ্যম বিভাগ। কোণগুলি বর্ডার ইমেজ সহ উপাদানটির কোণে প্রয়োগ করা হয়। প্রান্তগুলি সেই উপাদানটির প্রান্তগুলিতে প্রয়োগ করা হয়। border-image-repeat প্রোপার্টি সংজ্ঞায়িত করে যে কীভাবে এই প্রান্তগুলি তাদের জায়গা পূরণ করে এবং border-image-width সম্পত্তি স্লাইসের আকার নিয়ন্ত্রণ করে।

সবশেষে, fill কীওয়ার্ড নির্ধারণ করে যে মাঝামাঝি অংশটি, স্লাইসিং দ্বারা বাম, উপাদানটির ব্যাকগ্রাউন্ড ইমেজ হিসাবে ব্যবহার করা হবে কি না।

border-image-repeat

border-image-repeat হল আপনি কিভাবে সিএসএসকে নির্দেশ দেন যেভাবে আপনি আপনার বর্ডার ইমেজ পুনরাবৃত্তি করতে চান। এটি background-repeat মতোই কাজ করে।

• প্রারম্ভিক মান হল stretch , যা সম্ভব হলে উপলব্ধ স্থান পূরণ করতে উৎস চিত্রকে প্রসারিত করে।
• repeat মান সোর্স ইমেজের প্রান্তগুলিকে যতবার সম্ভব টাইল করে, এবং এটি অর্জন করতে প্রান্ত অঞ্চলগুলিকে ক্লিপ করতে পারে।
• round মানটি পুনরাবৃত্তির মতোই, তবে যতটা সম্ভব ফিট করার জন্য চিত্রের প্রান্তের অঞ্চলগুলিকে ক্লিপ করার পরিবর্তে, এটি একটি বিরামবিহীন পুনরাবৃত্তি অর্জনের জন্য চিত্রটিকে প্রসারিত করার পাশাপাশি এটিকে পুনরাবৃত্তি করে।
• space মান আবার, পুনরাবৃত্তির মতই, কিন্তু এই মানটি একটি বিজোড় প্যাটার্ন তৈরি করতে প্রতিটি প্রান্ত অঞ্চলের মধ্যে স্থান যোগ করে।

আপনার উপলব্ধি পরীক্ষা করুন

সীমানা সম্পর্কে আপনার জ্ঞান পরীক্ষা করুন

.my-element {
  border: solid hotpink;
}