সিএসএস 3.0 এর কিছু প্রোপার্টি, যেমন - resize ইত্যাদি ব্যবহার করে ব্যাবহারকারী এইচটিএমএল এলিমেন্ট গুলোকে তার ইচ্ছা মত পরিবর্তন করতে পারে। নিচে এর একটি ব্যাবহারিক উদাহরণ দেখুন।
এখানে ব্যবহারকারী div এলিমেন্টের প্রশস্ততাকে পরিবর্তন করতে পারে।
risize বা আকার পরিবর্তন করতে নিচে ডান দিকের কোন এ ক্লিক করে মাউস পয়েন্টার টান দিন।
টিউটোরিয়াল এর এই অংসে আমরা ইউজার ইন্টারফেসের নিচের প্রোপার্টি গুলো নিয়ে আলোচনা করবো।
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 প্রপার্টির যে সকল মান বা value নির্ধারণ করা যায় তা হল নিম্নরুপ।
সিএসএস এর outline-offset প্রোপার্টি ব্যাবহার করে কোন এলিমেন্টের বর্ডার এর শেষ প্রান্ত এবং আউটলাইনের মধ্যে দূরত্ব নির্ধারণ করা হয়।
আমরা অনেকেই outline এবং border কে একই মনে করি, কিন্তু আসলে এই দুটি সম্পূর্ণ ভিন্ন দুটি প্রোপার্টি, তাই এদের ফলাফল ও ভিন্ন। প্রকৃতপক্ষে আউটলাইন হল এইচটিএমএল এলিমেন্টের চারপাশে একটি রেখা বা line যেটা বর্ডারের বাইরে অবস্থান করে। আউটলাইন এলিমেন্ট এর সাথে হিসেব করা হয় না।
নিচে একটি ব্যাবহারিক উদাহরণ দেখুন, যেখানে বর্ডার এবং আউটলাইনের মাঝে 50px দূরত্ব তৈরি করার জন্য outline-offset প্রোপার্টি ব্যবহার করা হয়েছে। এখানে উদাহরণটিতে বর্ডার এবং আউটলাইন এর মাঝে দুরত্ত তৈরি করার জন outline-offset প্রপার্টি ব্যবহার করা হয়েছে।
ওপরের উদাহরনটির জন্য, নিচের সিএসএস স্টাইল কোড গুলো দেখুন।
div { margin: 20px; border: 1px solid black; outline: 4px solid Orange; outline-offset: 25px; }
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 |