CSS ইউজার ইন্টারফেস

CSS ইউজার ইন্টারফেস

এই চাপে, আপনি নিম্নোক্ত CSS ইউজার ইন্টারফেস প্রতিভাত শিখবেন:

  • resize
  • outline-offset

ব্রাউজার সমর্থন

ট্যাবলের সংখ্যাগুলি প্রতিভাত সমর্থনকারী প্রথম ব্রাউজার সংস্করণকে নির্দেশ করে。

প্রতিভা Chrome IE Firefox Safari Opera
resize 4.0 সমর্থন না করে 5.0 4.0 15.0
outline-offset 4.0 15.0 5.0 4.0 9.5

CSS মাপ

resize প্রতিভা এলাকাকে ব্যবহারকারীর দ্বারা মাপ পরিবর্তন করা হবে কিংবা কিভাবে পরিবর্তন করা হবে তা নির্ধারণ করে。

এই div এলাকা ব্যবহারকারীর দ্বারা মাপ পরিবর্তন করা যায়!

মাপ পরিবর্তন: এই div এলাকার ডান নিচের কোণ ক্লিক করে এবং খিসে নিন。

দৃষ্টি দিন:Internet Explorer resize প্রতিভা সমর্থন করে না。

নিম্নোক্ত উদাহরণটি ব্যবহারকারীকে <div> এলাকার প্রশস্ততা সমায়ী করতে দেয়:

প্রকল্প

div {
  resize: horizontal;
  overflow: auto;
}

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

নিম্নোক্ত উদাহরণটি ব্যবহারকারীকে <div> এলাকার উচ্চতা সমায়ী করতে দেয়:

প্রকল্প

div {
  resize: vertical;
  overflow: auto;
}

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

নিম্নোক্ত উদাহরণটি ব্যবহারকারীকে <div> এলাকার উচ্চতা ও প্রশস্ততা সমায়ী করতে দেয়:

প্রকল্প

div {
  resize: both;
  overflow: auto;
}

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

অনেক ব্রাউজারে <textarea> ডিফল্টভাবে সমায়ী হয়। এখানে আমরা resize প্রতিভাত ব্যবহার করে এই সমায়ীতা নিষ্ক্রিয় করেছি:

প্রকল্প

textarea {
  resize: none;
}

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

CSS কন্টাউর অফসেট

outline-offset প্রতিভা ঘির্ণাকার ও এলাকার ফাঁকের মধ্যে জায়গা যোগ করে。

এই div-এর ফাঁক মূলক ঘির্ণাকার ১৫px আছে。

দৃষ্টি দিন:ঘির্ণাকার ও ফাঁক ভিন্ন! ফাঁক থেকে বিভিন্ন, ঘির্ণাকার লাইন এলাকার ফাঁকে আঁকা হয় এবং অন্যান্য কনটেন্টের সাথে মিলিত হতে পারে। একইসঙ্গে, ঘির্ণাকারও এলাকার মাপকাঠিতে অংশ নেয় না: এলাকার মোট প্রশস্ততা ও উচ্চতা ঘির্ণাকার লাইন প্রশস্ততার প্রভাব থেকে প্রভাবিত না হয়。

নিম্নোক্ত উদাহরণে outline-offset প্রতিভাত ব্যবহার করে ঘির্ণাকার ও ফাঁক মধ্যে জায়গা যোগ করা হয়েছে:

প্রকল্প

div.ex1 {
  margin: 20px;
  border: 1px solid black;
  outline: 4px solid red;
  outline-offset: 15px;
} 
div.ex2 {
  margin: 10px;
  border: 1px solid black;
  outline: 5px dashed blue;
  outline-offset: 5px;
}

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

CSS ইউজার ইন্টারফেস প্রতিভা

মূলতঃ নিচের টেবিলে সকল ইউজার ইন্টারফেস প্রতিভা উপস্থাপিত হয়:

প্রতিভা বর্ণনা
outline-offset বর্ণনা: প্রোফাইল ও উপাদানের হোল্ডিং বর্তনীর মধ্যে জায়গা যোগ করুন
resize বর্ণনা: প্রতিটি ইলেকট্রনিক উপাদানকে কোনও কার্যকরী আকার নির্ধারণ করতে পারে কিনা