সিএসএস৩ ইউজার ইন্টারফেস - Css3 User Interface


সিএসএস 3.0 এর কিছু প্রোপার্টি, যেমন - resize ইত্যাদি ব্যাবহার করে ব্যাবহারকারী এইচটিএমএল এলিমেন্ট গুলোকে তার ইচ্ছা মত পরিবর্তন করতে পারে। নিচে এর একটি ব্যাবহারিক উদাহরণ দেখুন।

এখানে ব্যবহারকারী div এলিমেন্টের প্রশস্ততাকে পরিবর্তন করতে পারে।

risize বা আকার পরিবর্তন করতে নিচে ডান দিকের কোন এ ক্লিক করে মাউস পয়েন্টার টান দিন।


টিউটোরিয়াল এর এই অংসে আমরা ইউজার ইন্টারফেসের নিচের প্রোপার্টি গুলো নিয়ে আলোচনা করবো।


resize প্রোপার্টি

resize প্রোপার্টি ব্যবহার করে ব্যাবহারকারী বা user কে অনুমতি দেয়া হয় যে, ওয়েব পেজের কোনো এলিমেন্টের আকার পরিবর্তন করতে পারবে কিনা। নিচে resize প্রোপার্টির একটি ব্যাবহারিক উদাহরন দেখুন।

এটি সিএসএস এর resize প্রোপার্টি ব্যাবহার করে তৈরি করা হয়েছে।

resize প্রোপার্টি ব্যাবহার করে নিচে একটি উদাহরন দেখুন, এখানে horizontal মান ব্যাবহার করা হয়েছে বলে, div এলিমেন্টটি কেবল আনুভূমিক বা horizontal ভাবেই পরিবর্তন করা যায়।

উদাহরণ

div {
  width: 300px;
  resize: horizontal;
  overflow: auto;
  }

কোড এডিটর


এলিমেন্টটি উলম্ব বা vertical ভাবে পরিবর্তন করার জন্য resize প্রোপার্টির মান vertical নির্ধারণ করতে হবে। নিচে vertical কিওয়ার্ড বা মান ব্যাবহার করেও একটি উদাহরন দেখুন।

উদাহরণ

div {
  width: 300px;
  resize: vertical;
  overflow: auto;
  }

কোড এডিটর


এলিমেন্টটিকে উলম্ব বা vertical এবং আনুভূমিক বা horizontal ভাবে পরিবর্তন করার জন্য resize প্রোপার্টির মান both নির্ধারণ করতে হবে। নিচে both কিওয়ার্ড বা মান ব্যাবহার করে একটি উদাহরন দেখুন।

উদাহরণ

div {
  width: 300px;
  resize: both;
  overflow: auto;
  }

কোড এডিটর


সাধারণত ওয়েব ব্রাউজার গুলো তে <textarea> প্রপার্টি পূর্ব-নির্ধারিত বা default ভাবেই আকার-পরিবর্তনশীল বা resizable করা থাকে, এটা কে বন্ধ করার জন্য resize প্রোপার্টির মান none নির্ধারণ করতে হবে।

উদাহরণ

textarea {
  resize: none;
  }

কোড এডিটর


resize প্রপার্টির মান

resize প্রপার্টির যে সকল মান বা value নির্ধারণ করা যায় তা হল নিম্নরুপ।


outline-offset প্রোপার্টি

সিএসএস এর outline-offset প্রোপার্টি ব্যাবহার করে কোন এলিমেন্টের বর্ডার এর শেষ প্রান্ত এবং আউটলাইনের মধ্যে দূরত্ব নির্ধারণ করা হয়।

আমরা অনেকেই outline এবং border কে একই মনে করি, কিন্তু আসলে এই দুটি সম্পূর্ণ ভিন্ন দুটি প্রোপার্টি, তাই এদের ফলাফল ও ভিন্ন। প্রকৃতপক্ষে আউটলাইন হল এইচটিএমএল এলিমেন্টের চারপাশে একটি রেখা বা line যেটা বর্ডারের বাইরে অবস্থান করে। আউটলাইন এলিমেন্ট এর সাথে হিসেব করা হয় না।

নিচে একটি ব্যাবহারিক উদাহরণ দেখুন, যেখানে বর্ডার এবং আউটলাইনের মাঝে 50px দূরত্ব তৈরি করার জন্য outline-offset প্রোপার্টি ব্যবহার করা হয়েছে। এখানে উদাহরণটিতে বর্ডার এবং আউটলাইন এর মাঝে দুরত্ত তৈরি করার জন outline-offset প্রপার্টি ব্যবহার করা হয়েছে।


এই div এ বর্ডার থেকে 50px দূরে 5px solid blue এর outline দেয়া হয়েছে।


ওপরের উদাহরনটির জন্য, নিচের সিএসএস স্টাইল কোড গুলো দেখুন।

উদাহরণ

div {
  margin: 20px;
  border: 1px solid black;
  outline: 4px solid Orange;
  outline-offset: 25px;
  }

কোড এডিটর



outline-offset প্রপার্টির মান

outline-offset প্রপার্টির মান বা value নিচের মত করে নির্ধারণ করা যায়।


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

টেবিলে দেয়া রোগুলোর প্রথম লাইন ব্রাউজারের সেই প্রথম সংস্করণ বা version নির্দেশ করে যেগুলো পুরোপুরি এই প্রপার্টি সমর্থন করে। এছাড়াও এর পরের লাইন -webkit- বা -moz- যুক্ত সংস্করণ বা version গুলো নির্দেশ করে ব্রাউজারের ঐ প্রথম সংস্করণ যেগুলো প্রিফিক্স ব্যবহার করে প্রদর্শিত হতে পারে।

প্রপার্টি
resize 4.0 Not supported 5.0
4.0 -moz-
4.0 15.0
outline-offset 4.0 Not supported 5.0
4.0 -moz-
4.0 9.5

সকল প্রোপার্টি

প্রোপার্টিবর্ণনা
resize
outline-offset