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

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

হোম-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

 

সিএসএস(৩) কালার


সিএসএস(৩) কালার

সিএসএস(৩) আসার পূর্বে সিএসএসে শুধুমাত্র কালারের নাম, হেক্সাডেসিমাল এবং RGB ভ্যালুর কালার সাপোর্ট করত।

সিএসএস(৩) তে আরও কিছু কালার-ভ্যালু যোগ হয়েছে। যথাঃ


RGBA কালার

RGBA কালার ভ্যালু হচ্ছে alpha channel এর মাধ্যমে RGB কালারের সম্প্রসারিত কালার-ভ্যালু যা কালারের অস্পষ্টতা(opacity) নির্দেশ করে।

RGBA কালার-ভ্যালুর সিনটেক্স

rgba(red, green, blue, alpha)

এখানে প্রথম তিনটি মান হলো RGB ভ্যালু অর্থাৎ red, green এবং blue। আর চতুর্থ মানটি হলো আলফা মান যা কালারের অপাসিটি নির্দেশ করে। আলফা প্যারামিটারটির সর্বনিম্ন মান ০.০(সম্পূর্ণ স্বচ্ছ) এবং সর্বোচ্চ মান ১.০(সম্পূর্ণ অস্বচ্ছ)।

নিম্নে RGBA কালার এর ব্যবহার দেখানো হলোঃ

rgba(0, 255, 0, 0.1);
rgba(0, 255, 0, 0.5);
rgba(0, 255, 0, 1.0);

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<title>সিএসএস RGBA কালার-ভ্যালুর উদাহরণ</title>
<style>
	#div1 {background-color:rgba(255,0,0,0.3);}
	#div2 {background-color:rgba(0,255,0,0.5);}
	#div3 {background-color:rgba(0,0,255,0.8);}
</style>
</head>
<body>
	<p>RGBA color এর ব্যবহার:</p>
	<div id="div1"><code>background-color:rgba(255,0,0,0.3);</code></div>
	<div id="div2"><code>background-color:rgba(0,255,0,0.5);</code></div>
	<div id="div3"><code>background-color:rgba(0,0,255,0.8);</code></div>
</body>
</html>

ফলাফল


HSL কালার

HSL কালার-ভ্যালুর সিনটেক্স:

hsl(hue, saturation, lightness)

HSL কালার তিনটি অংশে বিভিক্ত। যথাঃ Hue, Saturation এবং Lightness।

প্রথম অংশ Hue। যা কালেরর মান নির্ধারণ করে। এটি ডিগ্রী এককে ভ্যালু গ্রহণ করে। যেখানে ০(শূন্য) হলো সর্বনিম্ন ডিগ্রী এবং ৩৬০ সর্বোচ্চ ডিগ্রী। এখানে ০ এবং ৩৬০ ডিগ্রী হচ্ছে লাল কালার। ১২০ ডিগ্রী হচ্ছে সবুজ কালার আর ২৪০ ডিগ্রী হচ্ছে নীল কালার।

দ্বিতীয় অংশ Saturation যা কালারের পূর্ণতা প্রদান করে। এটি শতকরা এককে ভ্যালু গ্রহণ করে। যেখানে ০% হলো সর্বনিম্ন এবং ১০০% সর্বোচ্চ মান।

তৃতীয় অংশ Lightness যা কালারের উজ্জ্বলতা নির্দেশ করে। এটি শতকরা এককে মান/ভ্যালু গ্রহণ করে। যেখানে ০% হলো সর্বনিম্ন এবং ১০০% সর্বোচ্চ মান। সুতরাং এখানে ০% হচ্ছে কালো এবং ১০০% হচ্ছে সাদা বা উজ্জ্বল।

নিম্নে HSL কালার এর ব্যবহার দেখানো হলোঃ

hsl(120, 100%, 30%);
hsl(120, 100%, 50%);
hsl(120, 100%, 80%);

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<title>সিএসএস HSL কালার-ভ্যালুর উদাহরণ</title>
<style>
	#div1 {background-color:hsl(150,100%,60%);}
	#div2 {background-color:hsl(10,110%,85%);}
	#div3 {background-color:hsl(190,90%,50%);}
</style>
</head>
<body>
	<p>HSL color এর ব্যবহার:</p>
	<div id="div1"><code>background-color:hsl(150,100%,60%);</code></div>
	<div id="div2"><code>background-color:hsl(10,110%,85%);</code></div>
	<div id="div3"><code>background-color:hsl(190,90%,50%);</code></div>
</body>
</html>

ফলাফল


HSLA কালার

HSLA কালার-ভ্যালু হচ্ছে alpha channel এর মাধ্যমে HSL কালারের সম্প্রসারিত কালার-ভ্যালু যা কালারের অস্পষ্টতা(opacity) নির্দেশ করে।

HSLA কালার-ভ্যালুর সিনটেক্স

hsla(hue, saturation, lightness, alpha)

এখানে চতুর্থ মানটি হল আলফা মান যা কালারের অপাসিটি(opacity) নির্দেশ করে। আলফা প্যারামিটারটির সর্বনিম্ন মান ০.০(সম্পূর্ণ স্বচ্ছ) এবং সর্বোচ্চ মান ১.০(সম্পূর্ণ অস্বচ্ছ)।

নিম্নে HSLA কালার এর ব্যবহার দেখানো হলোঃ

hsla(120, 100%, 30%, 0.3);
hsla(120, 100%, 50%, 0.6);
hsla(120, 100%, 70%, 0.3);

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<title>সিএসএস HSLA color এর উদাহরণ</title>
<style>
	#div1 {background-color:hsla(130,60%,50%,0.5);}
	#div2 {background-color:hsla(60,120%,80%,0.5);}
	#div3 {background-color:hsla(280,150%,80%,0.5);}
</style>
</head>
<body>
<p>HSLA color এর ব্যবহার:</p>
	<div id="div1"><code>background-color:hsla(150,100%,60%,0.5);</code></div>
	<div id="div2"><code>background-color:hsla(10,110%,85%,0.5);</code></div>
	<div id="div3"><code>background-color:hsla(190,90%,50%,0.5);</code></div>
</body>
</html>

ফলাফল


Opacity(অস্বচ্ছতা)

সিএসএস(৩) opacity প্রোপার্টির মাধ্যমে একটি এলিমেন্টকে স্বচ্ছ/অস্বচ্ছ করা যায়।

opacity(অস্বচ্ছতা) প্রোপার্টির সর্বনিম্ন মান ০.০(সম্পূর্ণ স্বচ্ছ) এবং সর্বোচ্চ মান ১.০(সম্পূর্ণ অস্বচ্ছ) এর মধ্যে হতে হবে।

নিম্নে Opacity প্রোপার্টির ব্যবহার দেখানো হলোঃ

rgb(0, 255, 0); opacity:0.1;
rgb(0, 255, 0); opacity:0.5;
rgb(0, 255, 0); opacity:1.0;

উপরের কালারগুলো লক্ষ্য করলে দেখবেন যে, কালারের সাথে লেখাগুলোও অস্পষ্ট হয়ে গেছে। অর্থাৎ আমরা opacity ব্যবহার করে কালারের সাথে লেখাও অস্বচ্ছ বা ট্রান্সপারেন্ট করতে পারি।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<title>সিএসএস Opacity এর উদাহরণ</title>
<style>
	#div1 {background-color:rgb(255,0,0);opacity:0.7;}
	#div2 {background-color:rgb(0,255,0);opacity:0.7;}
	#div3 {background-color:rgb(0,0,255);opacity:0.7;}
</style>
</head>
<body>
	<div>RGB কালার এর সাথে opacity এর ব্যবহার।</div>
	<div id="div1"><code>background-color:rgb(255,0,0);opacity:0.7;</code></div>
	<div id="div2"><code>background-color:rgb(0,255,0);opacity:0.7;</code></div>
	<div id="div3"><code>background-color:rgb(0,0,255);opacity:0.7;</code></div>
</body>
</html>

ফলাফল


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

প্রোপার্টি Google Chrome Edge/IE Mozila Firefox Safari Opera
RGBA, HSL, and HSLA 4.0 9.0 3.0 3.1 10.1
opacity 4.0 9.0 2.0 3.1 10.1