CSS আউটলাইন(CSS Outline)[বাংলায় CSS মাস্টার ক্লাস]: একই উদ্দেশ্যে কাজ করে, কিন্তু একটি মৌলিক পার্থক্য সহ। যদিও সীমানাগুলি বক্স মডেলের অংশ এবং একটি উপাদানের বিন্যাসকে প্রভাবিত করতে পারে, একটি উপাদানের সীমানা বাক্সের বাইরে রূপরেখা আঁকা হয়৷ এটি লেআউট পরিবর্তন না করে হাইলাইট এবং অ্যাক্সেসযোগ্যতার জন্য রূপরেখাকে মূল্যবান করে তোলে।
CSS আউটলাইন এর poperty গুলি হল।
- outline-style
- outline-color
- outline-width
- outline-offset
- outline
নকশা নান্দনিক মেলে রূপরেখা কাস্টমাইজ করা সাধারণ। যাইহোক, অ্যাক্সেসযোগ্যতার কথা মাথায় রেখে এটি করা অত্যন্ত গুরুত্বপূর্ণ। একটি দৃশ্যত স্পষ্ট ফোকাস সূচক দিয়ে প্রতিস্থাপিত না হলে রূপরেখা সম্পূর্ণরূপে সরানো উচিত নয়। একটি উপযুক্ত প্রতিস্থাপন ছাড়া রূপরেখা অপসারণ কীবোর্ড ব্যবহারকারীদের জন্য অ্যাক্সেসযোগ্যতাকে বাধাগ্রস্ত করতে পারে।
আউটলাইন-অফসেট প্রপার্টি আউটলাইন এবং এলিমেন্টের সীমানার মধ্যে স্পেস ফাইন-টিউন করার অনুমতি দেয়। এই বৈশিষ্ট্যটি পালিশ এবং দৃশ্যত আনন্দদায়ক ডিজাইন তৈরি করার জন্য বিশেষভাবে উপযোগী, নিশ্চিত করে যে রূপরেখা উপাদানটির উপস্থিতিতে হস্তক্ষেপ না করে।
CSS আউটলাইন এর বর্ডার poperty গুলি হল।
- dotted
- dashed
- solid
- double
- groove
- ridge
- inset
- outset
- none
- hidden
CSS আউটলাইন(CSS Outline) সম্পর্কে বিস্তারিত নিচে দেওয়া হল।
Example:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS MASTER JHUTANDA</title>
<!--https://jhutanda.com-->
<!--https://github.com/jhutanda-->
</head>
<body>
<p class="p1">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Assumenda laudantium tempora pariatur itaque neque
adipisci, officiis minus placeat numquam, asperiores dolor, voluptatibus animi nemo tenetur corrupti nobis
impedit veniam ducimus facere? Minima voluptates odit explicabo, culpa dolorem, optio quam architecto pariatur
placeat asperiores quidem.
</p>
<br><br>
<p class="p2">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Assumenda laudantium tempora pariatur itaque neque
adipisci, officiis minus placeat numquam, asperiores dolor, voluptatibus animi nemo tenetur corrupti nobis
impedit veniam ducimus facere? Minima voluptates odit explicabo, culpa dolorem, optio quam architecto pariatur
</p>
<!-- css style -->
<style>
.p1 {
border: 5px solid red;
outline-width: 5px;
/* you can use - dotted, dashed, solid, double, groove, ridge, inset, outset, none, hidden, */
outline-style: dotted;
outline-color: black;
}
.p2 {
border: 5px solid red;
outline: 5px dotted black;
}
</style>
</body>
</html>