CSS Outline: এলিমেন্টের বর্ডারের বাইরে আউटलাইন (Outline) আঁকার গাইড

যখন আপনি একটি ওয়েব এলিমেন্ট ডিজাইন করছেন, তখন আপনি সিদ্ধান্ত নিতে পারেন যে আপনি পৃষ্ঠায় এলিমেন্টের চারপাশে একটি আউटलাইন (outline) দেখাতে চান। উদাহরণস্বরূপ, আপনি যদি একটি বক্স ডিজাইন করছেন যেটি আপনি হাইলাইট করতে চান, তবে আপনি বক্সের চারপাশে একটি রঙিন আউटलাইন যোগ করতে চাইতে পারেন যাতে এলিমেন্টটির দিকে দৃষ্টি আকর্ষণ করা যায়।

এখানেই CSS outline প্রোপার্টি কাজে আসে। outline প্রোপার্টি আপনাকে একটি এলিমেন্টের বর্ডারের বাইরে একটি লাইন আঁকতে দেয় যাতে এলিমেন্টটি ওয়েব পেজে উদ্ভাসিত হয়।

এই টিউটোরিয়ালে উদাহরণসহ আউटलাইনের বেসিক এবং CSS outline প্রোপার্টি কীভাবে ব্যবহার করে একটি ওয়েব এলিমেন্টের বর্ডারের বাইরে একটি লাইন আঁকতে হয় তা আলোচনা করা হয়েছে। এই টিউটোরিয়াল পড়া শেষে আপনি CSS outline প্রোপার্টি ব্যবহার করে আউटलাইন আঁকতে এক্সপার্ট হবেন।

CSS Outline

একটি আউटलাইন হলো একটি এলিমেন্টের চারপাশে আঁকা একটি লাইন, এর বর্ডারের বাইরে। আউटलাইন প্রোপার্টির সবচেয়ে সাধারণ ব্যবহারের ক্ষেত্র হলো একটি HTML এলিমেন্ট হাইলাইট করা।

এখানে CSS-এ আউटलাইন কীভাবে প্রযোজ্য হয় তার একটি গ্রাফিক্যাল রিপ্রেজেন্টেশন (graphical representation):

এই গ্রাফিক্সটি প্রদর্শন করে যে আউटलাইন একটি ওয়েব এলিমেন্টের কন্টেন্ট এবং বর্ডার উভয়ের বাইরে ظاهر হয়। আপনি দেখতে পারেন যে আউटलাইন একটি ওয়েব এলিমেন্টের সবচেয়ে বাহ্যিক লেয়ার (outermost layer)।

CSS-এ একটি বর্ডার এবং একটি আউटलাইনের মধ্যে কিছু পার্থক্য রয়েছে।

প্রথম, যেমন আমরা আলোচনা করেছি, আউटलাইন এলিমেন্টের বাইরে আঁকা হয় (বর্ডারের মত নয়)। এর মানে আমরা যে আউटलাইন ঘোষণা করি সেটি একটি ওয়েব পেজের অন্যান্য কন্টেন্টের সাথে ওভারল্যাপ (overlap) করতে পারে। যাইহোক, আউटलাইনগুলো কোনো স্পেস ঘেরে না, এবং সুতরাং সেগুলো পরিসরের এলিমেন্টগুলোর ওপর কোনো প্রভাব ফেলে না আউटलাইন করা এলিমেন্টের সাথে ওভারল্যাপ করার ছাড়া।

অতিরিক্তভাবে, আউटलাইন একটি এলিমেন্টের ডাইমেনশন (dimensions) এর অংশ নয়। এর মানে আপনি যে আউटलাইন নির্দিষ্ট করবেন সেটির এলিমেন্টের উচ্চতা (height) এবং প্রস্থ (width) মানগুলোর ওপর কোনো প্রভাব নেই।

আউटलাইনগুলো, বর্ডারের বিপরীতে, প্রতিটি প্রান্তের জন্য ভিন্ন বর্ডার প্রস্থ, রঙ, বা স্টাইল রাখতে পারে না। সুতরাং, আপনি একটি এলিমেন্টের চারপাশে যে আউटलাইন নির্দিষ্ট করবেন সেটি সকল প্রান্তে কনসিস্টেন্ট (consistent) দেখাবে।

আপনি যদি CSS-এ বর্ডার সম্পর্কে আরও জানতে চান, তবে আমাদের CSS বর্ডার গাইড পড়ুন।

CSS Outline প্রোপার্টি

outline প্রোপার্টি একটি ওয়েব পেজের একটি এলিমেন্টে আউटलাইন যোগ করতে ব্যবহৃত হয়। 

outline প্রোপার্টি চারটি সাব-প্রোপার্টির শর্টহ্যান্ড যা আপনাকে কাস্টমাইজ করতে দেয় একটি আউटलাইন ওয়েব পেজে কীভাবে দেখাবে। এই সাব-প্রোপার্টিগুলি হলো:

• outline-color: আউटलাইনের রঙ সেট করে
• outline-style: আউटलাইনের স্টাইল সেট করে
• outline-width: আউटलাইনের প্রস্থ সেট করে

outline প্রোপার্টির সিনট্যাক্স নিম্নরূপ:

outline: outline-color outline-style outline-width;

outline প্রোপার্টির সাথে নির্দিষ্ট মানগুলো কোনো নির্দিষ্ট ক্রমে থাকতে হয় না।

চলুন একটি উদাহরণের মাধ্যমে outline প্রোপার্টি কীভাবে কাজ করে তা ব্যাখ্যা করি। মান লইজिए আমরা একটি বক্সের চারপাশে একটি আউटलাইন তৈরি করতে চাই যাতে This is a box টেক্সট থাকে। আমাদের আউटलাইনের নিচের বৈশিষ্ট্যগুলো থাকবে:

• আউटलাইনটি লাল (red) হবে।
• আউटलাইনটি 3px মোটা হবে।
• আউटलাইনটি ডটেড (dotted) হবে।

আমরা আমাদের আউटलাইনের সাথে একটি 1px-মোটা কালো বর্ডারও চাই। আমরা নিচের কোড ব্যবহার করে এই আউटलাইন এবং বর্ডার তৈরি করতে পারি:

<html>
  <p class="outlineExample">This is a box.</p>
</html>
<style>
  .outlineExample { width: 100px; border: black solid 1px; outline: red dotted 3px; }
</style>

কোড এডিটরের উপরের বাটনে ক্লিক করুন আমাদের HTML/CSS কোডের আউটপুট দেখতে।

আমাদের কোডে, আমরা একটি আউटलাইন ঘোষণা করেছি, যা লাল রঙে দেখায়, এবং একটি বর্ডার, যা কালো রঙে দেখায়। বর্ডারটি 1px-মোটা এবং স olid স্টাইলে দেখায়, এবং আউटलাইনটি লাল, 3px-মোটা, এবং ডটেড স্টাইলে দেখায়। আমরা আমাদের বক্সের প্রস্থ 100px সেট করেছি।

আপনি দেখতে পারেন, আউटलাইন আমাদের ওয়েব এলিমেন্টের বর্ডারের বাইরে ظاهر হয়।

CSS Outline সাব-প্রোপার্টি (CSS Outline Sub-properties)

CSS outline প্রোপার্টি চারটি সাব-প্রোপার্টির শর্টহ্যান্ড, যেমন আমরা আগে আলোচনা করেছি। চলুন এই সাব-প্রোপার্টিগুলি প্রতিটিকে আলাদা আলাদা অন্বেষণ করি কীভাবে সেগুলি কাজ করে তা ব্যাখ্যা করতে।

CSS Outline Width

outline-width প্রোপার্টি একটি ওয়েব এলিমেন্টে প্রযোজ্য আউटलাইনের প্রস্থ নির্দিষ্ট করে।

outline-width প্রোপার্টি নিচের যেকোনো লেন্থ মান গ্রহণ করে:

• thin (ডিফল্টভাবে, 1px)
• medium (ডিফল্টভাবে, 3px)
• thick (ডিফল্টভাবে, 5px)
• px, pt, cm, em, rem, বা অন্য যেকোনো CSS লেন্থ মেট্রিকসে নির্দিষ্ট একটি আকার

মান লইজिए আমরা একটি বক্স ডিজাইন করতে চাই যার একটি 3px (medium) নীল, স olid আউटलাইন থাকবে। আমরা আমাদের বক্সে একটি 1px-প্রস্থের স olid, কালো বর্ডারও চাই। আমরা নিচের কোড ব্যবহার করে এই বক্সটি তৈরি করতে পারি:

<html>
  <p class="outlineExample">This is a box.</p>
</html>
<style>
  .outlineExample { width: 100px; border: black solid 1px; outline-style: solid; outline-color: red; outline-width: medium; }
<style>

কোড এডিটরের উপরের বাটনে ক্লিক করুন আমাদের HTML/CSS কোডের আউটপুট দেখতে।

এই উদাহরণটি ব্রেক ডাউন করা যাক। আমাদের CSS কোডে, আমরা আমাদের বক্সের প্রস্থ 100px সেট করেছি এবং আমাদের বক্সের চারপাশে একটি 1px-প্রস্থের স olid কালো বর্ডার সংজ্ঞায়িত করেছি।

তারপর, আমরা তিনটি সাব-প্রোপার্টি ব্যবহার করেছি আমাদের বর্ডার সংজ্ঞায়িত করতে।

outline-style প্রোপার্টি আমাদের আউटलাইনের স্টাইল সেট করতে ব্যবহৃত হয়, যা এই কেসে স olid। outline-color প্রোপার্টি আমাদের আউटलাইনের রঙ সেট করতে ব্যবহৃত হয়, যা এই উদাহরণে লাল। (আমরা outline-style এবং outline-color সাব-প্রোপার্টিগুলি এই গাইডে পরে আরও গভীরে আলোচনা করব)।

outline-width প্রোপার্টি আমাদের আউटलাইনের প্রস্থ সেট করতে ব্যবহৃত হয়, যা আমরা medium সেট করেছি (যা ডিফল্টভাবে 3px)। 

আপনি দেখতে পারেন, আমাদের বক্সের একটি 3px-প্রস্থের লাল আউटलাইন রয়েছে।

CSS Outline Color

outline-color প্রোপার্টি আপনাকে একটি নির্দিষ্ট ওয়েব এলিমেন্টে অ্যাসাইন করা আউटलাইনের রঙ সেট করতে দেয়। এই প্রোপার্টি নিচের যেকোনো CSS রঙ টাইপ গ্রহণ করে:

• name: একটি রঙের নাম, যেমন blue বা pink
• hex: একটি হেক্সাডেসিমাল রঙ, যেমন #f7f7f7
• rgb: একটি RGB মান, যেমন rgb(102, 211, 56)
• invert: এটি আউटलাইনের রঙ ইনভার্ট (invert) করে
• hsl: একটি HSL মান, যেমন hsl(0, 25%, 50%)

মান লইজिए আমরা একটি বক্সের চারপাশে একটি আউटलাইন ডিজাইন করতে চাই যা আমাদের বক্সের চারপাশে নীল রঙে ظاهر হবে। আমাদের আউटलাইন 3px মোটা হবে এবং স olid স্টাইল ব্যবহার করবে। আমরা নিচের কোড ব্যবহার করে এই আউटलাইনসহ একটি বক্স তৈরি করতে পারি:

<html>
  <p class="outlineExample">This is a box.</p>
<html>
<style>
  .outlineExample { width: 100px; border: black solid 1px; outline-style: solid; outline-color: blue; outline-width: medium; }
<style>

কোড এডিটরের উপরের বাটনে ক্লিক করুন আমাদের HTML/CSS কোডের আউটপুট দেখতে।

এই উদাহরণে, আমরা আউटलাইন রঙ প্রোপার্টি ব্যবহার করেছি আমাদের আউटलাইনের রঙ নীল সেট করতে। আমরা outline-style প্রোপার্টি ব্যবহার করেছি আমাদের আউटलাইনের স্টাইল স olid সেট করতে, এবং outline-width প্রোপার্টি ব্যবহার করেছি আমাদের আউटलাইনের প্রস্থের স্টাইল 3px (অথবা medium) সেট করতে।

আমাদের কোডে, আমরা আমাদের বক্সকে 100px প্রস্থের করেছি, এবং আমাদের বক্সের চারপাশে একটি 1px স olid কালো বর্ডার সেট করেছি, যা আমাদের আউटलাইন দেখতে সহজ করে।

CSS Outline Style

outline-style প্রোপার্টি আপনাকে আপনার আউटलাইনের স্টাইল সেট করতে দেয়।

এই প্রোপার্টি নিচের মানগুলো গ্রহণ করে:

• dotted
• dashed
• groove
• ridge
• solid
• double
• inset
• outset
• none
• hidden

সুতরাং, ridge মান একটি রিজ আউटलাইন তৈরি করে, inset মান একটি ইনসেট আউटलাইন তৈরি করে, groove মান একটি গ্রুভ আউटलাইন তৈরি করে, এবং ইত্যাদি। এই আউटलাইনগুলো কীভাবে দেখায় তা ব্যাখ্যা করতে, চলুন একটি বক্স তৈরি করি একটি আউटलাইনসহ এবং প্রতিটি আউटलাইন স্টাইল আলাদা আলাদা বক্সে প্রযোজ্য করি। এখানে আমাদের বক্সের বেসিক কোড:

<html>
  <p class="outlineExample">This is a box.</p>
<html>
<style>
  .outlineExample { width: 300px; border: black solid 1px; outline-color: blue; outline-width: medium; }
<style>

কোড এডিটরের উপরের বাটনে ক্লিক করুন আমাদের HTML/CSS কোডের আউটপুট দেখতে।

এই কোড একটি বক্স তৈরি করে যার একটি নীল আউटलাইন রয়েছে যা 3px প্রস্থের (আউटलাইন প্রস্থ নির্দেশ করার জন্য medium মান ব্যবহার করে)। বক্সের একটি কালো স olid বর্ডার রয়েছে যা 1px-প্রস্থের, এবং বক্সটি 200px প্রস্থের।

আমাদের বক্সের স্টাইল সেট করতে, আমাদের outline-style প্রোপার্টি ব্যবহার করা উচিত। সুতরাং, আপনি যদি একটি বক্স চান যার একটি double আউटलাইন স্টাইল থাকে, তবে আপনি এই CSS স্টাইল ব্যবহার করতে পারেন:

<style>
  .outlineExample { outline-style: dotted; }
<style>

এখানে একটি গ্রাফিক্স যা এই প্রোপার্টি outline-style দ্বারা গ্রহণ করা সকল সম্ভাব্য মান ব্যবহার করার ফলাফল দেখায়:

CSS Outline Offset

outline-offset প্রোপার্টি একটি আউटलাইন এবং একটি এলিমেন্টের বর্ডারের মধ্যে স্পেস যোগ করে।

outline-offset প্রোপার্টি দ্বারা সংজ্ঞায়িত একটি এলিমেন্টের আউटलাইন এবং বর্ডারের মধ্যে স্পেস ট্রান্সপারেন্ট (transparent)। 덧붙ে, outline-offset প্রোপার্টি স্ট্যান্ডআলোন (standalone), এবং outline শর্টহ্যান্ডে ব্যবহার করা যাবে না।

মান লইজिए আমরা একটি বক্স ডিজাইন করতে চাই যার একটি 1px-প্রস্থের স olid কালো বর্ডার এবং একটি 2px-প্রস্থের স olid লাল আউटलাইন থাকবে। আউटलাইনটি আমাদের বর্ডারের প্রান্ত থেকে 10px বাইরে অফসেট (offset) থাকবে। আমরা নিচের কোড ব্যবহার করে এই স্টাইলসহ একটি বক্স তৈরি করতে পারি:

<html>
  <p class="outlineExample">This is a box.</p>
<html>
<style>
  .outlineExample { width: 200px; border: black solid 1px; outline: red 2px solid; outline-offset: 10px; }
<style>

কোড এডিটরের উপরের বাটনে ক্লিক করুন আমাদের HTML/CSS কোডের আউটপুট দেখতে।

এই উদাহরণে, আমরা একটি বক্স সংজ্ঞায়িত করেছি যা 200px প্রস্থের, একটি 1px-প্রস্থের স olid কালো বর্ডার আছে, এবং একটি 2px-প্রস্থের লাল স olid আউटलাইন আছে। আমাদের বক্সের আউटलাইন 10px অফসেট করা হয়েছে, যার মানে প্রতিটি বর্ডার প্রান্ত এবং আউटलাইনের মধ্যে 10px গ্যাপ রয়েছে।

উপসংহার (Conclusion)

CSS outline প্রোপার্টি একটি ওয়েব এলিমেন্টের বর্ডারগুলোর চারপাশে আউटलাইন সংজ্ঞায়িত করতে ব্যবহৃত হয়। 

outline প্রোপার্টি তিনটি সাব-প্রোপার্টির শর্টহ্যান্ড যা কাস্টম আউटलাইন তৈরি করতে ব্যবহৃত হয়: outline-color, outline-width, এবং outline-style। 덧붙ে, outline-offset প্রোপার্টি একটি আউटलাইন এবং একটি এলিমেন্টের বর্ডারের মধ্যে স্পেস যোগ করতে ব্যবহৃত হয়।

এই টিউটোরিয়ালে, উদাহরণের রেফারেন্স নিয়ে, CSS-এ আউटलাইনের বেসিক, আউटलাইন প্রোপার্টি এবং এর সাব-প্রোপার্টিগুলি কীভাবে ব্যবহার করতে হয়, এবং outline-offset প্রোপার্টি কীভাবে ব্যবহার করতে হয় তা আলোচনা করা হয়েছে। এখন আপনি CSS প্রোর 처럼 আউटलাইন ডিজাইন করার জ্ঞান দিয়ে সुसজ্জিত!