X

X

X

CSS এ ইলামেন্টে আউটলাইন ব্যবহার করার নিয়ম


এই ইলামেন্টে 10px প্রস্থ বিশিষ্ট আউটলাইন সেট করা হয়েছে।

নিজে নিজে চেষ্টা করুণ »


CSS আউটলাইন

কোনো ইলামেন্টের চারপাশে আরও অতিরিক্ত বর্ডার উপস্থাপণ করার জন্য আউটলাইন ব্যবহার করা হয়।

CSS এ নিম্নোক্ত আউটলাইন প্রপার্টিগুলো ব্যবহার করা যায়:

  • outline-style
  • outline-color
  • outline-width
  • outline-offset
  • outline

বি:দ্র: আউটলাইন ইলামেন্টের বাইরের অংশ । এটি বক্সমেডলের অংশ নয়। সুতরাং এটি ব্যবহারে ইলামেন্টের দৈর্ঘ্য ও প্রস্থের কোনো পরিবর্তন হবে না।


Outline Style

outline-style প্রপার্টি দিয়ে ইলামেন্টের আউটলাইনের স্টাইল সেট করা হয় এবং এর জন্য নিম্নোক্ত মানগুলো ব্যবহৃত হয়।

  • dotted – dotted outline তৈরি করার জন্য ব্যবহৃত হয়।
  • dashed – dashed outline তৈরি করার জন্য ব্যবহৃত হয়।
  • solid – solid outline তৈরি করার জন্য ব্যবহৃত হয়।
  • double – double outline তৈরি করার জন্য ব্যবহৃত হয়।
  • groove – 3D grooved outline তৈরি করার জন্য ব্যবহৃত হয়।
  • ridge – 3D ridged outline তৈরি করার জন্য ব্যবহৃত হয়।
  • inset – 3D inset outline তৈরি করার জন্য ব্যবহৃত হয়।
  • outset – 3D outset outline তৈরি করার জন্য ব্যবহৃত হয়।
  • none – আউটলাইন উপস্থাপণ না করার জন্য ব্যবহৃত হয়।
  • hidden – হিডেন আউটলাইন তৈরি করার জন্য ব্যবহৃত হয়।

নিচের আউটলাইনযুক্ত বিভিন্ন ইলামেন্টের উদাহরণ দেওয়া হলো:

dotted outline.

dashed outline.

solid outline.

double outline.

groove outline. outline-color value -এর উপর ইফেক্ট নির্ভর করে।

ridge outline. outline-color value -এর উপর ইফেক্ট নির্ভর করে।

inset outline. outline-color value -এর উপর ইফেক্ট নির্ভর করে।

outset outline. outline-color value -এর উপর ইফেক্ট নির্ভর করে।

উদাহরণ

p {border: 1px solid black;}

p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}

Result:

A dotted outline.

A dashed outline.

A solid outline.

A double outline.

A groove outline. The effect depends on the outline-color value.

A ridge outline. The effect depends on the outline-color value.

An inset outline. The effect depends on the outline-color value.

An outset outline. The effect depends on the outline-color value.

নিজে নিজে চেষ্টা করুন »

বি:দ্র: যদি আউটলাইনের রং সেট না করা হয় তবে outline এর কোনো property কাজ করবে না।

Outline এর রং ( Color )

outline-color property ব্যবহার করে কোনো ইলামেন্টের আউটলাইনের রং সেট করা হয়।

নিম্নোক্ত উপায়ে ইলামেন্টের আউটলাইনের রং সেট করা হয়:

  • name যেমন- “red”
  • RGB যেমন- “rgb(255,0,0)”
  • Hex যেমন- “#ff0000”
  • invert – ব্যাকগ্রাউন্ডের বিপরীত রং

উদাহরণ

p.ex1 {
border: 1px solid black;
outline-style: solid;
outline-color: red;
}

p.ex2 {
border: 1px solid black;
outline-style: double;
outline-color: green;
}

ফলাফল:

A solid red outline.

A double green outline.

নিজে নিজে চেষ্টা করুণ »


Outline এর প্রস্থ ( Width )

outline-width property ব্যবহার করে কোনো ইলামেন্টের আউটলাইনের প্রস্থ সেট করা হয়।
px, pt, cm, em ইত্যাদি অথবা তিনটি pre-defined মান যেমন: thin, medium, অথবা thick ব্যবহার করে কোনো ইলামেন্টের আউটলাইনের প্রস্থ সেট করা যায়।

উদাহরণ

p {border: 1px solid black;}

p.ex1 {
outline-style: solid;
outline-color: red;
outline-width: 10px;
}

p.ex2 {
outline-style: solid;
outline-color: green;
outline-width: thin;
}

ফলাফল:

A thick red outline.

A thin green outline.

নিজে নিজে চেষ্টা করুণ »


সংক্ষিপ্ত নিয়মে Outline ব্যবহার করার নিয়ম

এক লাইনের কোড ব্যবহার করে কোনো ইলামেন্টের আউটলাইন সেট করা যায়।

outline property ব্যবহার করে এক লাইনের কোডের মাধ্যমে আউটলাইনের নিম্নোক্ত মানগুলো সেট করা যায়:

  • outline-width
  • outline-style (required)
  • outline-color

উদাহরণ

p {
border: 1px solid black;
outline: 5px dotted red;
}

ফলাফল:

A 5px dotted red outline.

নিজে নিজে চেষ্টা করুণ »


Outline এর Offset

The outline-offset property দিয়ে outline এবং ইলামেন্টের বর্ডারের মধ্যে ফাঁকা জায়গার প্রস্থ সেট করা হয়।

নিচের উদাহরণে ইলামেন্টের বর্ডারের বাইরে 15px দূরে আউটলাইন উপস্থাপণ করে দেখানো হলো:

উদাহরণ

p {
border: 2px solid black;
outline: 2px solid red;
outline-offset: 15px;
}

ফলাফল:

This paragraph has an outline border 15px outside the border edge.

নিজে নিজে চেষ্টা করুণ »


CSS Outline Property সমূহের তালিকা

Property বর্ণনা
outline এক লাইনের কোডের মাধ্যমে আউটলাইন সেট করার জন্য ব্যবহৃত হয়।
outline-color আউটলাইনের রং সেট করার জন্য ব্যবহৃত হয়।
outline-offset আউটলাইন এবং বর্ডারের মধ্যে ফাঁকা জায়গার প্রস্থ সেট করার জন্য ব্যবহৃত হয়।
outline-style আউটলাইনের স্টাইল সেট করার জন্য ব্যবহৃত হয়।
outline-width আউটলাইনের প্রস্থ সেট করার জন্য ব্যবহৃত হয়।