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

সিএসএস টিউটোরিয়াল

হোম-HOME পরিচিতি-Introduction গঠনপ্রণালী-Syntax ব্যবহার পদ্ধতি-Use কালার-Color ব্যাকগ্রাউন্ড-Background বর্ডার-Border মার্জিন-Margin প্যাডিং-Padding উচ্চতা/প্রস্থ-Height/Width বক্সমডেল-BoxModel আউটলাইন-Outline টেক্সট-Text ফন্ট-Font লিংক-Link লিস্ট-List টেবিল-Table প্রদর্শনী-Display সর্বোচ্চ উচ্চতা-Maxwidth পজিশন-Position ওভারফ্লো-Overflow ফ্লট-Float ইনলাইন-ব্লক-Inlineblock এলাইন-Align কম্বিন্যাটর-Combinator সুডো-ক্লাস-PseudoClass সুডো-এলিমেন্ট-PseudoElement প্রোপার্টি-Opacity ন্যাভিগেশনবার-NavigationBar ড্রপডাউন-Dropdown টুলটিপ-Tooltip ইমেজ গ্যালারী-ImageGallery ইমেজ স্প্রাইট-ImageSprite এট্রিবিউট সিলেক্টর-AttrSelector ফর্ম-Form কাউন্টার-Counter

সিএসএস-৩

ভূমিকা-Introduction রাউন্ডেড কর্নার-RoundedCorner বর্ডারইমেজ-Border Image ব্যাকগ্রাউন্ড-Background কালার-Color গ্র্যাডিয়েন্ট-Gradient স্যাডো-Shadow টেক্সট-Text 3ফন্ট-Font 2D ট্রান্সফর্ম-Transform 3D ট্রান্সফর্ম-Transform ট্রানজিশন-Transition এনিমেশন-Animation ইমেজ-Image বাটন-Button পেজিনেশন-Pagination মাল্টি-কলাম-MultColumn ইউজার ইন্টারফেস-UserInterface বক্স সাইজিং-BoxSizing ফ্লেক্সবক্স-Flexbox মিডিয়া কুয়েরি-MediaQuery মিডিয়া কুয়েরি উদাহরণ

সিএসএস রেসপন্সিভ

রেসপন্সিভ পরিচিতি-Introduction রেসপন্সিভ ভিউপোর্ট-Viewport রেসপন্সিভ গ্রাইড ভিউ-Grid View রেসপন্সিভ মিডিয়া কুয়েরি-Media Query রেসপন্সিভ ইমেজ-Image রেসপন্সিভভিডিও-Video ফ্রেমওয়ার্ক-Frameworks

সিএসএস রেফারেন্স

রেফারেন্স-Reference সিলেক্টর-Selector ফাংশন-Function রেফারেন্স আউরাল-ReferenceAural ওয়েব সেফ ফন্ট-WebSafeFont এনিমেটেবল-Animatable ইউনিট-Unit PX-EM কনভার্টার-Converter কালার-Color কালার ভ্যালু-ColorValue ডিফল্ট ভ্যালু-DefaultValue ব্রাউজার সাপোর্ট-BrowserSupport

 

সিএসএস(৩) ইউজার ইন্টারফেস


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

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


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

resize

এটি দ্বারা ব্যবহারকারী একটি এলিমেন্টের আকার পরিবর্তন করতে পারে।

box-sizing

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

nav-down

ব্যবহারকারী কী-বোর্ডে arrow-down কী চাপলে কোথায় যাবে তা নির্ধারণ করে।

nav-index

একটি এলিমেন্টের ট্যাব এর ক্রম(order) নির্ধারণ করে।

nav-left

ব্যবহারকারী কী-বোর্ডে arrow-left কী চাপলে কোথায় যাবে তা নির্ধারণ করে।

nav-right

ব্যবহারকারী কী-বোর্ডে arrow-right কী চাপলে কোথায় যাবে তা নির্ধারণ করে।

nav-up

ব্যবহারকারী কী-বোর্ডে arrow-up কী চাপলে কোথায় যাবে তা নির্ধারণ করে।

outline-offset

এলিমেন্টের বর্ডার এবং আউটলাইনের মাঝে দূরত্ব তৈরি করে।


সিএসএস(৩) resize প্রোপার্টি

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

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

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<title>resize property</title>
<style>
	div {
		border: 2px dotted teal;
		background-color: lightgreen;
		padding: 10px;
		width: 250px;
		resize: horizontal;
		overflow: auto;
	}
</style>
</head>
<body>
	<p><b>নোট:</b> ইন্টারনেট এক্সপ্লোরার এ resize প্রোপার্টি সাপোর্ট করে না।</p>
	<div>ব্যবহারকারী div এলিমেন্টের প্রশস্ততাকে রিসাইজ করতে পারে।</div>
</body>
</html>

ফলাফল

নিম্নের উদাহরণে একজন ব্যবহারকারী <div> এলিমেন্টটির শুধুমাত্র উচ্চতা পরিবর্তন করতে পারবেঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<title>resize property</title>
<style>
	div {
		border: 2px dotted teal;
		background-color: lightgreen;
		padding: 10px;
		width: 250px;
		resize: vertical;
		overflow: auto;
	}
</style>
</head>
<body>
	<div>ব্যবহারকারী div এলিমেন্টের উচ্চতাকে রিসাইজ করতে পারে।</div>
</body>
</html>

ফলাফল

নিম্নের উদাহরণে একজন ব্যবহারকারী <div> এলিমেন্টটির উচ্চতা এবং প্রস্থ উভয়ই পরিবর্তন করতে পারবেঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<title>resize property</title>
<style>
	div {
		border: 2px dotted teal;
		padding: 10px;
		background-color: lightgreen;
		width: 250px;
		resize: both;
		overflow: auto;
	}
</style>
</head>
<body>
	<div>ব্যবহারকারী div এলিমেন্টের প্রশস্ততা ও উচ্চতা উভয়ই রিসাইজ করতে পারে।</div>
</body>
</html>

ফলাফল




সিএসএস(৩) আউটলাইন অফসেট

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

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

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

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

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<title>outine property</title>
<style>
div {
    margin: 20px;
    background-color: lightgreen;
    padding: 10px;
    width: 250px;
    height: auto;
    border: 1px dotted orangered;
    outline: 1px dotted teal;
    outline-offset: 20px;
}
</style>
</head>
	<body><br>
	<div>এই div এর বাইরের অংশে ২০ পিক্সেল বর্ডার দেওয়া হয়েছে।</div>
</body>
</html>

ফলাফল


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

প্রোপার্টি Google Chrome Edge/IE Mozila Firefox Safari Opera
resize ৪.০ সাপোর্ট করে না ৫.০
৪.০ -moz-
৪.০ ১৫.০
outline-offset ৪.০ সাপোর্ট করে না ৫.০
৪.০ -moz-
৪.০ ৯.৫