আপনি যখন একটি ওয়েব উপাদান ডিজাইন করছেন, তখন আপনি সিদ্ধান্ত নিতে পারেন যে আপনি পৃষ্ঠার উপাদানটির চারপাশে একটি রূপরেখা দেখতে চান। উদাহরণস্বরূপ, আপনি যদি এমন একটি বাক্স ডিজাইন করেন যা আপনি হাইলাইট করতে চান, তাহলে আপনি উপাদানটির প্রতি দৃষ্টি আকর্ষণ করতে বাক্সের চারপাশে একটি রঙিন রূপরেখা যোগ করতে চাইতে পারেন।
এখানেই CSS আউটলাইন প্রপার্টি আসে। আউটলাইন প্রপার্টি আপনাকে একটি এলিমেন্টের সীমানার বাইরে একটি লাইন যোগ করতে দেয় যাতে এলিমেন্টটিকে ওয়েব পেজে আলাদা করে দেখা যায়।
এই টিউটোরিয়ালটি উদাহরণ সহ, রূপরেখার মূল বিষয়গুলি এবং ওয়েব উপাদানের সীমানার বাইরে একটি রেখা আঁকতে কীভাবে CSS আউটলাইন বৈশিষ্ট্য ব্যবহার করতে হয় তা নিয়ে আলোচনা করবে। এই টিউটোরিয়ালটি পড়ার শেষে, আপনি CSS আউটলাইন প্রপার্টি ব্যবহার করে রূপরেখা আঁকার একজন বিশেষজ্ঞ হয়ে উঠবেন।
CSS আউটলাইন
একটি রূপরেখা হল একটি উপাদানের চারপাশে আঁকা একটি রেখা, তার সীমানার বাইরে। আউটলাইন প্রপার্টির সবচেয়ে সাধারণ ব্যবহার হল একটি HTML এলিমেন্ট হাইলাইট করা।
সিএসএস-এ রূপরেখাগুলি কীভাবে প্রয়োগ করা হয় তার একটি গ্রাফিক উপস্থাপনা এখানে রয়েছে:
এই গ্রাফিকটি দেখায় যে রূপরেখা একটি ওয়েব উপাদানের বিষয়বস্তু এবং সীমানার বাইরে উভয়ই প্রদর্শিত হয়। আপনি দেখতে পাচ্ছেন যে রূপরেখাটি একটি ওয়েব উপাদানের সবচেয়ে বাইরের স্তর।
সিএসএস-এ একটি সীমানা এবং একটি রূপরেখার মধ্যে কয়েকটি পার্থক্য রয়েছে।
প্রথমত, যেমনটি আমরা আলোচনা করেছি, রূপরেখাটি উপাদানের বাইরে আঁকা হয়েছে (সীমানার বিপরীতে)। এর মানে হল যে আমরা যে রূপরেখা ঘোষণা করি সেটি একটি ওয়েব পৃষ্ঠার অন্যান্য সামগ্রীকে ওভারল্যাপ করতে পারে৷ যাইহোক, রূপরেখাগুলি কোনও স্থান নেয় না, এবং তাই কোনও উপাদানকে ওভারল্যাপ করতে সক্ষম হওয়া ছাড়া আশেপাশের উপাদানগুলিতে তাদের কোনও প্রভাব নেই।
81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগদানের পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷
৷গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় ব্যয় করেছে।
উপরন্তু, রূপরেখা কোনো উপাদানের মাত্রার অংশ নয়। এর মানে হল যে আপনি যে রূপরেখাটি নির্দিষ্ট করেছেন সেটি একটি উপাদানের উচ্চতা এবং প্রস্থের মানগুলির উপর কোন প্রভাব ফেলবে না।
আউটলাইন, সীমানার বিপরীতে, প্রতিটি প্রান্তের জন্য আলাদা সীমানা প্রস্থ, রঙ বা শৈলী থাকতে পারে না। সুতরাং, আপনি একটি উপাদানের চারপাশে যে রূপরেখা নির্দিষ্ট করেছেন তা সমস্ত প্রান্ত জুড়ে সামঞ্জস্যপূর্ণ প্রদর্শিত হবে।
আপনি যদি CSS-এ সীমানা সম্পর্কে আরও জানতে চান, CSS বর্ডার সম্পর্কে আমাদের গাইড পড়ুন।
CSS আউটলাইন প্রপার্টি
আউটলাইন প্রপার্টিটি ওয়েব পেজের একটি উপাদানে একটি রূপরেখা যোগ করতে ব্যবহৃত হয়।
আউটলাইন প্রপার্টি চারটি সাব-প্রপার্টির জন্য সংক্ষিপ্ত যা আপনাকে একটি ওয়েব পৃষ্ঠায় একটি রূপরেখা কীভাবে প্রদর্শিত হবে তা কাস্টমাইজ করতে দেয়। এই উপ-সম্পত্তিগুলি হল:
- আউটলাইন-রং:রূপরেখার রঙ সেট করে
- আউটলাইন-স্টাইল:আউটলাইনের স্টাইল সেট করে
- রূপরেখা-প্রস্থ:রূপরেখার প্রস্থ নির্ধারণ করে
আউটলাইন প্রপার্টির সিনট্যাক্স নিম্নরূপ:
outline: outline-color outline-style outline-width;
আউটলাইন সম্পত্তির সাথে নির্দিষ্ট করা মানগুলিকে কোনো নির্দিষ্ট ক্রমে প্রদর্শিত হওয়ার প্রয়োজন নেই।
রূপরেখা সম্পত্তি কিভাবে কাজ করে তা ব্যাখ্যা করার জন্য আসুন একটি উদাহরণ দিয়ে হেঁটে যাই। ধরুন আমরা একটি বাক্সের চারপাশে একটি রূপরেখা তৈরি করতে চাই যাতে পাঠ্য রয়েছে This is a box . আমাদের রূপরেখার নিম্নলিখিত বৈশিষ্ট্য থাকা উচিত:
- রূপরেখাটি লাল হওয়া উচিত।
- রূপরেখাটি 3px পুরু হওয়া উচিত।
- রূপরেখাটি ডট করা উচিত।
আমরা আমাদের আউটলাইনে 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-পুরু এবং কঠিন শৈলীতে প্রদর্শিত হয় এবং রূপরেখাটি লাল, 3px-পুরু এবং বিন্দুযুক্ত শৈলীতে প্রদর্শিত হয়। এছাড়াও আমরা আমাদের বক্সের প্রস্থ 100px সেট করেছি।
আপনি দেখতে পাচ্ছেন, আমাদের ওয়েব এলিমেন্টে সীমারেখার বাইরে আউটলাইন দেখা যাচ্ছে।
CSS আউটলাইন সাব-প্রপার্টি
CSS আউটলাইন প্রপার্টি চারটি সাব-প্রপার্টির সংক্ষিপ্ত বিবরণ, যেমনটি আমরা আগে আলোচনা করেছি। আসুন এই উপ-বৈশিষ্ট্যগুলির প্রত্যেকটিকে আলাদাভাবে অন্বেষণ করি যে তারা কীভাবে কাজ করে তা ব্যাখ্যা করতে৷
৷CSS আউটলাইন প্রস্থ
আউটলাইন-প্রস্থ বৈশিষ্ট্য একটি ওয়েব উপাদানে প্রয়োগ করা একটি রূপরেখার প্রস্থ নির্দিষ্ট করে৷
আউটলাইন-প্রস্থ বৈশিষ্ট্য নিম্নলিখিত দৈর্ঘ্যের মানগুলির যেকোনটি গ্রহণ করে:
- পাতলা (ডিফল্টরূপে, 1px)
- মাঝারি (ডিফল্টরূপে, 3px)
- মোটা (ডিফল্টরূপে, 5px)
- px, pt, cm, em, rem, বা অন্য CSS দৈর্ঘ্য মেট্রিকে নির্দিষ্ট করা একটি আকার
ধরুন আমরা একটি 3px (মাঝারি) নীল, কঠিন আউটলাইন সহ একটি বাক্স ডিজাইন করতে চাই। আমরা আমাদের বক্সে একটি 1px-চওড়া কঠিন, কালো বর্ডার রাখতে চাই। আমরা নিম্নলিখিত কোড ব্যবহার করে এই বাক্সটি তৈরি করতে পারি:
<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-চওড়া কঠিন কালো বর্ডার সংজ্ঞায়িত করেছি।
তারপর, আমরা আমাদের সীমান্ত সংজ্ঞায়িত করতে তিনটি উপ-সম্পত্তি ব্যবহার করেছি।
আউটলাইন-স্টাইল প্রপার্টি আমাদের আউটলাইনের স্টাইল সেট করতে ব্যবহৃত হয়, যা এই ক্ষেত্রে শক্ত। আউটলাইন-কালার প্রপার্টি আমাদের আউটলাইনের রঙ সেট করতে ব্যবহৃত হয়, যা এই উদাহরণে লাল। (আমরা এই নির্দেশিকাটিতে পরে আরও গভীরতার সাথে রূপরেখা-শৈলী এবং রূপরেখা-রঙের উপ-বৈশিষ্ট্যগুলি নিয়ে আলোচনা করব)।
আউটলাইন-প্রস্থ বৈশিষ্ট্যটি আমাদের আউটলাইনের প্রস্থ সেট করতে ব্যবহৃত হয়, যা আমরা medium সেট করি (যা ডিফল্টরূপে 3px)।
আপনি দেখতে পাচ্ছেন, আমাদের বাক্সে একটি 3px-প্রশস্ত লাল রূপরেখা রয়েছে।
CSS আউটলাইন রঙ
আউটলাইন-কালার প্রপার্টি আপনাকে একটি নির্দিষ্ট ওয়েব এলিমেন্টে নির্ধারিত আউটলাইনের রঙ সেট করতে দেয়। প্রপার্টি নিম্নলিখিত যেকোনও CSS রঙের ধরন গ্রহণ করে:
- নাম:একটি রঙের নাম, যেমন
blueঅথবাpink - হেক্স:একটি হেক্সাডেসিমেল রঙ, যেমন
#f7f7f7 - rgb:একটি RGB মান, যেমন
rgb(102, 211, 56) - উল্টানো:এটি রূপরেখার রঙকে উল্টে দেয়
- hsl:একটি HSL মান, যেমন
hsl(0, 25%, 50%)
ধরুন আমরা একটি বাক্সের চারপাশে একটি আউটলাইন ডিজাইন করতে চাই যা আমাদের বক্সের চারপাশে নীল রঙে প্রদর্শিত হয়। আমাদের আউটলাইন 3px পুরু হওয়া উচিত এবং কঠিন শৈলী ব্যবহার করা উচিত। আমরা নিম্নলিখিত কোড ব্যবহার করে এই রূপরেখা সহ একটি বাক্স তৈরি করতে পারি:
<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 কোডের আউটপুট দেখতে উপরের কোড এডিটরে বোতাম।
এই উদাহরণে, আমরা আমাদের আউটলাইনের রঙ নীল সেট করতে আউটলাইন রঙের বৈশিষ্ট্য ব্যবহার করেছি। আমরা আমাদের আউটলাইনের স্টাইলকে কঠিনে সেট করতে আউটলাইন-স্টাইল প্রপার্টি এবং আমাদের আউটলাইনের প্রস্থের স্টাইল 3px (বা medium) সেট করতে আউটলাইন-স্টাইল প্রপার্টি ব্যবহার করেছি। )।
আমাদের কোডে, আমরা আমাদের বক্সকে 100px চওড়া করেছি এবং আমাদের বক্সের চারপাশে একটি 1px কঠিন কালো বর্ডার সেট করেছি, যা আমাদের রূপরেখা দেখতে সহজ করে তোলে৷
CSS আউটলাইন স্টাইল
আউটলাইন-স্টাইল প্রপার্টি আপনাকে আপনার আউটলাইনের স্টাইল সেট করতে দেয়।
এই সম্পত্তি নিম্নলিখিত মান গ্রহণ করে:
- ডটেড
- ড্যাশ করা
- খাঁজ
- রিজ
- কঠিন
- ডবল
- ইনসেট
- শুরু
- কোনটিই নয়
- লুকানো
সুতরাং, 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 ব্যবহার করে) রূপরেখার প্রস্থ নির্দেশ করার মান)। বাক্সটিতে একটি কালো কঠিন সীমানা রয়েছে যা 1px-চওড়া, এবং বাক্সটি 200px চওড়া৷
আমাদের বাক্সের শৈলী সেট করতে, আমাদের আউটলাইন-স্টাইল বৈশিষ্ট্য ব্যবহার করা উচিত। সুতরাং, যদি আমরা একটি double সহ একটি বাক্স পেতে চাই রূপরেখা শৈলী, আমরা এই CSS শৈলী ব্যবহার করতে পারি:
<style>
.outlineExample {
outline-style: dotted;
}
<style> এখানে একটি গ্রাফিক রয়েছে যা দেখায় যে এই সম্পত্তির ফলাফলগুলি রূপরেখা-স্টাইল দ্বারা গৃহীত সমস্ত সম্ভাব্য মানগুলির সাথে ব্যবহার করা হচ্ছে:
CSS আউটলাইন অফসেট
আউটলাইন-অফসেট বৈশিষ্ট্য একটি আউটলাইন এবং একটি উপাদানের সীমানার মধ্যে স্থান যোগ করে।
আউটলাইন-অফসেট সম্পত্তি দ্বারা সংজ্ঞায়িত একটি উপাদানের রূপরেখা এবং সীমানার মধ্যে স্থান স্বচ্ছ। উপরন্তু, আউটলাইন-অফসেট সম্পত্তি স্বতন্ত্র, এবং আউটলাইন শর্টহ্যান্ডে ব্যবহার করা যাবে না।
ধরুন আমরা 1px-প্রশস্ত কঠিন কালো বর্ডার এবং 2px-চওড়া কঠিন লাল রূপরেখা সহ একটি বাক্স ডিজাইন করতে চাই। রূপরেখাটি আমাদের সীমানার প্রান্তের বাইরে 10px দ্বারা অফসেট করা উচিত। আমরা নিম্নলিখিত কোড ব্যবহার করে এই শৈলীগুলির সাথে একটি বাক্স তৈরি করতে পারি:
<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-চওড়া কঠিন কালো সীমানা এবং একটি 2px-চওড়া লাল কঠিন রূপরেখা রয়েছে। আমাদের বক্সের আউটলাইনটি 10px দ্বারা অফসেট করা হয়েছে, যার মানে প্রতিটি সীমানা প্রান্ত এবং রূপরেখার মধ্যে একটি 10px ব্যবধান রয়েছে।
উপসংহার
CSS আউটলাইন সম্পত্তি একটি ওয়েব উপাদানের সীমানার চারপাশে রূপরেখা নির্ধারণ করতে ব্যবহৃত হয়।
কাস্টম রূপরেখা তৈরি করতে ব্যবহৃত তিনটি উপ-বৈশিষ্ট্যের জন্য আউটলাইন প্রপার্টি শর্টহ্যান্ড:আউটলাইন-রঙ, আউটলাইন-প্রস্থ এবং আউটলাইন-স্টাইল। উপরন্তু, আউটলাইন-অফসেট সম্পত্তি একটি আউটলাইন এবং একটি উপাদানের সীমানার মধ্যে স্থান যোগ করতে ব্যবহৃত হয়।
এই টিউটোরিয়ালটি উদাহরণের সাথে আলোচনা করা হয়েছে, CSS-এ রূপরেখার মূল বিষয়গুলি, কীভাবে আউটলাইন প্রপার্টি এবং এর সাব-প্রপার্টি ব্যবহার করতে হয় এবং কীভাবে আউটলাইন-অফসেট প্রপার্টি ব্যবহার করতে হয়। এখন আপনি CSS পেশাদারের মতো রূপরেখা ডিজাইন করা শুরু করার জন্য প্রয়োজনীয় জ্ঞানের সাথে সজ্জিত!
