X

X

X

CSS3 ইজার ইন্টারফেজ


CSS3 ইজার ইন্টারফেজ (UI)

CSS3 তে কিছু চমৎকার নতুন UI ফিচার যুক্ত করা হয়েছে, যেমন – resizing elements, outlines, এবং box sizing ।

এই অধ্যায়ে নিম্নোক্ত user interface property সম্পর্কে বর্ণনা করা হবে:

  • resize
  • outline-offset

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

Property
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

CSS3 Resizing

কোনো ইলামেন্ট রিসাইজ করা যাবে কি যাবে না তা নির্ধারণ করার জন্য resize property ব্যবহার করা হয়:

This div element is resizable by the user (works in Chrome, Firefox, Safari and Opera).

নিচের উদহারণে একটি <div> element -এর শুধুমাত্র প্রস্থকে রিসাইজেবল করা হয়েছে:

Code Example

div {
    border: 2px solid;
    padding: 20px; 
    width: 300px;
    resize: horizontal;
    overflow: auto;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

নিচের উদাহরণে ‌একটি <div> element -এর শুধুমাত্র উচ্চতাকে রিসাইজেবল করা হয়েছে:

Code Example

div {
    border: 2px solid;
    padding: 20px; 
    width: 300px;
    resize: vertical;
    overflow: auto;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

নিচের উদাহরণে একটি <div> element -এর উচ্চতা ও প্রস্থ উভয়কেই রিসাইজেবল করা হয়েছে:

Code Example

div {
    border: 2px solid;
    padding: 20px; 
    width: 300px;
    resize: both;
    overflow: auto;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


CSS3 Outline Offset

কোনো ইলামেন্টের আউটলাইন ও বর্ডারের মধ্যে ফাঁকা জায়গা নির্ধারণ করার জন্য outline-offset property ব্যবহৃত হয়:

আউটলাইন ও বর্ডার তিনটি বৈশিষ্ট্যের জন্য আলাদা:

  • আউটলাইন কোনো ইলামেন্টের বর্ডারের বাইরে উপস্থাপিত হয়।
  • সাধারণত আউটলাইনের পাশে কোনো সে্পস বা ফাঁকা জায়গা থাকে না।
  • আউটলাইন আয়তাকার (non-rectangular) নাও হতে পারে।
This div has an outline 15px outside the border edge.

নিচের উদাহরণে outline-offset property ব্যবহার করে border ও outline এর মধ্যে 15px space নির্ধারণ করা হলো :

Code Example

div {
    margin: 20px;
    padding: 10px;
    width: 300px; 
    height: 100px;
    border: 1px solid black;
    outline: 1px solid red;
    /* Move the outline 15px away from the border */
    outline-offset: 15px;
} 

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


CSS3 User Interface এর Property সমূহ

প্রপার্টি বর্ণনা
box-sizing কোনো ইলামেন্টের পুরো জায়গার বাইরে প্যাডিং ও বর্ডার যুক্ত করার জন্য এটি ব্যবহৃত হয়।
nav-down arrow-down navigation key ব্যবহার করলে, কোন দিকে তা নেভিগেট হবে এটি বর্ণনা করার জন্য এই প্রপার্টি ব্যবহৃত হয়।
nav-index কোনো ইলামেন্টের ট্যাব ক্রম নির্ধারণ করার জন্য ব্যবহৃত হয়।
nav-left arrow-left navigation key ব্যবহার করার সময়, এটি কোথায় নেভিগেট হবে তা নির্ধারণ করার জন্য ব্যবহৃত হয়।
nav-right arrow-right navigation key ব্যবহার করার সময়, এটি কোথায় নেভিগেট হবে তা নির্ধারণ করার জন্য ব্যবহৃত হয়।
nav-up arrow-up navigation key ব্যবহার করার সময়, এটি কোথায় নেভিগেট হবে তা নির্ধারণ করার জন্য ব্যবহৃত হয়।
outline-offset কোনো ইলামেন্টের আউটলাইন ও বর্ডারের মধ্যে ফাঁকা জায়গা নির্ধারণ করার জন্য ব্যবহৃত হয়।
resize কোনো ইলামেন্ট রিসাইজেবল হবে কি হবে না, তা নির্ধারণ করার জন্য ব্যবহৃত হয়।