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



সিএসএস ৩ এর ইউজার ইন্টারফেস ব্যবহৃত যেকোনো এলিমেন্টকে কোন ইউজার তার নিজের ইচ্ছামত পরিবর্তন করতে পারে। সিএসএস ৩ এ অনেক ধরণের ইউজার ইন্টারফেস প্রোপার্টি রয়েছে। যেমন- resize, appearance, box-sizing, icon, outline-offset, nav-up, nav-down, nav-left, nav-right ইত্যাদি।

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


resize প্রপার্টি

ব্যবহারকারী ওয়েব পেজের কোনো এলিমেন্টের আকার পরিবর্তন করতে পারবে কিনা তা নির্ধারণ করতে resize প্রোপার্টি ব্যবহার করা হয়।

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

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

নোট - Internet Explorer, resize প্রপার্টি সাপোর্ট করে না।

উদাহরণটি দেখুন, এখানে ব্যবহারকারী <div> এলিমেন্টটির শুধুমাত্র প্রস্থ পরিবর্তন করতে পারে।

উদাহরণ

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



অনেক ব্রাউজার এ <textarea> প্রপার্টি স্বয়ংক্রিয় ভাবেই আকার-পরিবর্তনশীল বা resizable করা থাকে, এটা কে বন্ধ করার জন্য আমরা নিছের কোডগুলো ব্যবহার করেছি।

উদাহরণ

textarea {
resize: none;
}




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

resize প্রপার্টির যে সকল মান নির্ধারণ করা যেতে পারে তা নিম্নরুপ -

none - এটা প্রপার্টির স্বয়ংক্রিয় মান। এই মানের ফলে ব্যবহারকারী এলিমেন্ট কে resize করতে পারে না।
both - ব্যবহারকারী এলিমেন্টের উচ্চতা এবং প্রস্থ উভয়ই নিয়ন্ত্রন করতে পারে।
horizontal - ব্যবহারকারী এলিমেন্টের প্রস্থ নিয়ন্ত্রন করতে পারে।
vertical - ব্যবহারকারী এলিমেন্টের উচ্চতা নিয়ন্ত্রন করতে পারে।
initial - সিএসএস প্রোপার্টির স্বয়ংক্রিয় মান নির্ধারণ করে।
inherit - এই মানের ফলে প্রোপার্টি প্যারেন্ট এলিমেন্টের মান বা value উত্তরাধিকার সূত্রে পায়।


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

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

আউটলাইন বর্ডার থেকে তিনটি কারণে ভিন্ন হয়, তা হল -

1. আউটলাইন হচ্ছে এলিমেন্টের চারপাশে একটি লাইন যা বর্ডারের বাইরে অবস্থান করে।
2. আউটলাইন জায়গা দখল করে না।
3. আউটলাইন সর্বদা চতুর্ভুজ আকৃতির হয় না।

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

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

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

উদাহরণ

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




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

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

length বা দৈর্ঘ্য - % , px, em ব্যবহার করে কোন সংখ্যা দ্বারা length বা দৈর্ঘ্য নির্ধারণ করে দেয়। এর স্বয়ংক্রিয় মান হল ০,
initial - সিএসএস প্রোপার্টির স্বয়ংক্রিয় মান নির্ধারণ করে।
inherit - এই মানের ফলে প্রোপার্টি প্যারেন্ট এলিমেন্টের মান বা value উত্তরাধিকার সূত্রে পায়।


সকল ইউজার ইন্টারফেস প্রপার্টি

প্রপার্টি বর্ণনা
outline-offset কোন এলিমেন্টের বর্ডার এবং আউটলাইনের মাঝে দূরত্ব তৈরি করে।
resize ইউজার দ্বারা কোন এলিমেন্টের আকার বা size পরিবর্তিত হবে কি না তা নির্দিষ্ট করে।


ব্রাউজার সাপোর্ট

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

প্রপার্টি
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







এই ওয়েব সাইট এর সমস্ত টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদি খুব সহজ ও সাধারণ ভাবে তৈরি করা হয়েছে। টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদির ভুল পরিহার করার জন্য বার বার যাচাই করা হয়েছে, কিন্তু আমরা এর পূর্ণ নিশ্চয়তা ও দায়ভার বহন করি না। যখন আপনি এই সাইটটি ব্যবহার করেন, আমরা ধরে নেই যে আপনি পড়েছেন এবং সম্মত আছেন আমাদের টার্মস অফ ইউস (Terms of use) এবং প্রাইভেসি পলিসি( Privacy policy) সম্পর্কে।

Copyright 2016-2018 by websschool.com, All Rights Reserved.