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

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

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

 

সিএসএস(৩) স্যাডো ইফেক্ট


সিএসএস(৩) shadow ব্যবহার করে আপনি যেকোনো এলিমেন্টে বা এলিমেন্টের টেক্সটে এক বা একাধিক স্যাডো ইফেক্ট যুক্ত করতে পারেন।

নিম্নে যথাক্রমে text-shadow এবং box-shadow প্রোপার্টির ব্যবহার দেখানো হলোঃ

3D Text

text-shadow প্রোপার্টি ব্যাবহার করা হয়েছে।

সবুজ বাংলা

box-shadow প্রোপার্টি ব্যবহার করা হয়েছে


এক নজরে সিএসএস(৩) স্যাডো প্রোপার্টি

text-shadow

একটি টেক্সটে এক বা একাধিক স্যাডো ইফেক্ট যুক্ত করে।

box-shadow

একটি এলিমেন্টে এক বা একাধিক স্যাডো ইফেক্ট যুক্ত করে।


সিএসএস(৩) text-shadow প্রোপার্টি

সিএসএস(৩)text-shadow প্রোপার্টি ব্যবহার করে আপনি যেকোনো টেক্সটে এক বা একাধিক স্যাডো ইফেক্ট যুক্ত করতে পারেন।

একটি এলিমেন্টে একাধিক স্যাডো ইফেক্ট যুক্ত করতে চাইলে এগুলোকে কমা(,) চিহ্ন দ্বারা পৃথক করতে হবে। স্যাডো ইফেক্টের ডিফল্ট কালার কালো থাকে।

/* offset-x | offset-y | blur-radius | color */
text-shadow: 1px 1px 2px orange; 

/* color | offset-x | offset-y | blur-radius */
text-shadow: #C0A 1px 0 10px; 

/* offset-x | offset-y | color */
text-shadow: 5px 5px #558ABB;

/* color | offset-x | offset-y */
text-shadow: green 2px 5px;

/* offset-x | offset-y
/* color এবং  blur-radius ডিফল্টভাবে ব্যবহৃত হবে*/
text-shadow: 5px 10px;

text-shadow প্রোপার্টির একাধিক স্যাডোকে কমা(,) চিহ্ন দ্বারা আলাদা করতে হয়।

  • প্রত্যেকটি স্যাডোর মধ্যে দুই বা তিনটি length ভ্যালু থাকে এবং এর পরেই color ভ্যালু থাকে। প্রথম দুটি length ভ্যালু হলো offset-x এবং offset-y অর্থাৎ x অক্ষ এবং y অক্ষ থেকে টেক্সট স্যাডোর অবস্থান
  • এবং তৃতীয় ঐচ্ছিক length ভ্যালু হলো blur-radius। blur-radius এর ভ্যালু যত বেশী হবে blur ও তত বড় হবে; টেক্সট স্যাডোর বিস্তৃতি বাড়বে এবং স্যাডো হালকা হবে।
  • আর color ভ্যালু হলো স্যাডোর কালার। ডিফল্ট কালার কালো।

যখন একের অধিক স্যাডো দেওয়া হয় তখন front-to-back অর্থাৎ সামনে থেকে পিছনে স্যাডোর প্রয়োগ ঘটে, যেখানে প্রথম নির্ধারিত স্যাডো সবার উপরে বা সম্মুখে থাকে।

এই প্রোপার্টিটি ::first-line এবং ::first-letter সুডো(pseudo) এলিমেন্টেও প্রয়োগ করা যায়।

নিম্নের উদাহরণে বিভিন্ন প্রকার স্যাডো ইফেক্ট এর ব্যবহার দেখানো হলোঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>text shadow</title>
<style>
	div {
		font-size: 24px;
		width: 95%;
		height: auto;		
		padding:7px;
		border: 2px dotted orange;
		}
	/* সাধারণ স্যাডো ইফেক্ট */
	#div1 {
		text-shadow: 2.5px 2.5px;
		}
	/* সবুজ কালারের স্যাডো ইফেক্ট */
	#div2 {
    	text-shadow: 2.5px 2.5px green;
		}
	/* blur বা অস্পষ্ট স্যাডো ইফেক্ট */	
	#div3 {
    	text-shadow: 2.5px 2.5px 6px; green;
		}
	/* সাদা কালারের টেক্সটে লাল কালারের স্যাডো ইফেক্ট */
	#div4 {
   		color: white;
    	text-shadow: 2px 2px 4px red;
		}
	/* সবুজ কালারের অস্পষ্ট স্যাডো ইফেক্ট */
	#div5 {
    	text-shadow: 0 0 3px green;
		}
</style>
</head>
<body>
	<p>নিম্নের div এলিমেন্টে অনুভূমিক বা X-অক্ষ বরাবর 2.5px এবং উলম্ব বা Y-অক্ষ বরাবর 2.5px স্যাডো ইফেক্ট যুক্ত করা হয়েছ।</p>
	<div id="div1">ডিফল্ট কালারের টেক্সট-স্যাডো ইফেক্ট!</div>
	
	<p>নিম্নের div এলিমেন্টে অনুভূমিক বা X-অক্ষ বরাবর 2.5px এবং উলম্ব বা Y-অক্ষ বরাবর 2.5px সবুজ কালারের স্যাডো ইফেক্ট যুক্ত করা হয়েছ।</p>
	<div id="div2">সবুজ কালারের টেক্সট-স্যাডো ইফেক্ট!</div>
	
	<p>নিম্নের div এলিমেন্টে টেক্সট স্যাডোর সাথে blur বা অস্পষ্ট ইফেক্ট যুক্ত করা হয়েছেঃ</p>
	<div id="div3">অস্পষ্ট টেক্সট-স্যাডো ইফেক্ট!</div>
	
	<p>নিম্নের div এলিমেন্টে সাদা কালারের টেক্সটে লাল কালারের স্যাডো ইফেক্ট যুক্ত করা হয়েছে।</p>
	<div id="div4">সাদা কালারের সাথে লাল কালারের টেক্সট-স্যাডো ইফেক্ট!</div>
	
	<p>নিম্নের div এলিমেন্টে টেক্সটের উপর সবুজ কালারের অস্পষ্ট স্যাডো ইফেক্ট যুক্ত করা হয়েছে।</p>
	<div id="div5">সবুজ কালারের অস্পষ্ট টেক্সট-স্যাডো ইফেক্ট!</div>
	<p><strong>বিঃদ্রঃ</strong> ইন্টারনেট এক্সপ্লোরার ৯ এবং
	পূর্ববর্তী ভার্সনে text-shadow প্রোপার্টি সাপোর্ট করে না।</p>
</body>
</html>

ফলাফল


একাধিক স্যাডো

একটি টেক্সটে একাধিক স্যাডো যুক্ত করার জন্য আপনাকে text-shadow প্রোপার্টিতে স্যাডো ইফেক্টের ভ্যালুগুলো ক্রমান্বয়ে একাধিক বার লিখতে হবে এবং ভ্যালু গুলোকে আলাদা করার জন্য কমা(,) চিহ্ন ব্যবহার করতে হবে।

নিম্নের উদাহরণে একাধিক স্যাডো ইফেক্ট এর ব্যবহার দেখানো হলোঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>multiple text shadow</title>
<style>
	div {
		font-size: 24px;
		width: 95%;
		height: auto;		
		padding:7px;
		border: 2px dotted orange;
		}
	/* একাধিক স্যাডো ইফেক্টকে কমা দ্বারা আলাদা করা হয়েছে */
	#div1 {
		text-shadow: 0 0 3px red, 0 0 5px blue;
	}
	#div2 {
   		color: white;
   		text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
</style>
</head>
<body>
	<p>নিম্নের div এলিমেন্টে টেক্সটের উপর হালকা অস্পষ্ট লাল কালার এবং তার চেয়ে বেশী অস্পষ্ট নীল কালারের দুটি স্যাডো ইফেক্ট যুক্ত করা হয়েছে।</p>
	<div id="div1">টেক্সট-স্যাডো ইফেক্ট!</div>

	<p>নিম্নের div এলিমেন্টে টেক্সটের উপর কালো কালার এবং অধিক অস্পষ্ট নীল কালার এবং এর চেয়ে কম অস্পষ্ট গাঢ়-নীল কালারের তিনটি স্যাডো ইফেক্ট যুক্ত করা হয়েছে।</p>
	<div id="div2">টেক্সট-স্যাডো ইফেক্ট!</div>
</body>
</html>

ফলাফল



3D-Text Effect

নিম্নের উদাহরণে একাধিক স্যাডো ইফেক্ট ব্যবহার করে 3D-Text তৈরি করে দেখানো হলোঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<title>3D-text</title>
<style>
	#three-d-text {
	background-color: orange;
	border-radius: 10px;
	font-size: 50px;
	font-weight: bold;
	width: 90%;
	height: auto;
	margin:auto;
	padding: 10px;
	text-align: center;
	color: white;
    text-shadow: 0 1px 0 #ccc,
               	 0 2px 0 #c9c9c9,
               	 0 3px 0 #bbb,
                 0 4px 0 #b9b9b9,
                 0 5px 0 #aaa,
                 0 6px 1px rgba(0,0,0,.1),
                 0 0 5px rgba(0,0,0,.1),
                 0 1px 3px rgba(0,0,0,.3),
                 0 3px 5px rgba(0,0,0,.2),
                 0 5px 10px rgba(0,0,0,.25),
                 0 10px 10px rgba(0,0,0,.2),
                 0 20px 20px rgba(0,0,0,.15);
     }
	p {
		text-align: center;
	}
</style>
</head>
<body>
	<div id="three-d-text">3D Text</div>
	<p>উপরের div এলিমেন্টে text-shadow প্রোপার্টি ব্যবহার করে 3D Text তৈরি  করা হয়েছে।</p>
</body>
</html>

ফলাফল



সিএসএস(৩) box-shadow প্রোপার্টি

সিএসএস(৩) box-shadow প্রোপার্টি ব্যবহার করে আপনি যে কোনো এলিমেন্টে এক বা একাধিক স্যাডো ইফেক্ট যুক্ত করতে পারেন। একাধিক স্যাডো ইফেক্টকে কমা দ্বারা পৃ্থক করতে হয়।

বক্স-স্যাডোর বিভিন্ন সিনট্যাক্স

/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(100, 100, 100, 0.4);

/* offset-x | offset-y | blur-radius | color */
box-shadow: 5px 5px 5px green;

/* offset-x | offset-y | color */
box-shadow: 15px -10px orange;

/* default color */
/* offset-x | offset-y */
box-shadow: 15px -10px;

/* inset | offset-x | offset-y |blur-radius | color */
box-shadow: inset 2px 2px 1em red;
/* একাধিক স্যাডোকে কমা(,) চিহ্ন দ্বারা পৃথক করতে হয় */
box-shadow: 3px 3px red, -1em 0 0.4em olive;

একটি একক box-shadow তৈরি করার জন্য নিম্নোক্ত প্যারামিটার বা ভ্যালুগুলো ব্যবহার করতে হয়।

  • দুই, তিন বা ৪টি length ভ্যালু দেওয়া যেতে পারেঃ
    • যদি শুধুমাত্র দুটি ভ্যালু দেওয়া হয় তাহলে ভ্যালু দুটি যথাক্রমে offset-x(অনুূভূমিক) এবং offset-y(উলম্ব) ভ্যালুকে নির্দেশ করে।
    • যদি ৩য় ভ্যালু দেওয়া হয় তাহলে এটি blur-radius কে নির্দেশ করে।
    • যদি ৪র্থ ভ্যালু দেওয়া হয় তাহলে এটি spread-radius কে নির্দেশ করে।
  • ঐচ্ছিক inset কীওয়ার্ড। এটি না ব্যবহার করলে এমন স্যাডো তৈরি হবে যেন মনে হবে বক্স সামনের দিকে বৃদ্ধি পাচ্ছে। আর এটি বিদ্যমান থাকলে বর্ডারের ভিতরে স্যাডো তৈরি হবে।
  • ঐচ্ছিক color ভ্যালু। এটি দ্বারা স্যাডোর জন্য কালার নির্ধারণ করা হয়। ডিফিল্ট কালার কালো।

নিম্নের উদাহরণে বিভিন্ন প্রকার বক্স স্যাডো ইফেক্ট এর ব্যবহার দেখানো হলোঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>box shadow property</title>
<style>
	div {
		margin:15px;
		width: 80%;
		height: 60px;
		padding: 20px;
		background-color: orange;
		}
	/* সাধারণ স্যাডো ইফেক্ট	*/
	#shadow1{
		box-shadow: 12px 12px;
		}
	/* কালার স্যাডো ইফেক্ট */	
	#shadow2{
    	box-shadow: 12px 12px lightsalmon;
		}
	/* blur স্যাডো ইফেক্ট */
	#shadow3{
    	box-shadow: 12px 12px 5px lightsalmon;
		}
	/* inset স্যাডো ইফেক্ট */
	#shadow4{
    	box-shadow: inset 2px 2px 1em gold;
		}
</style>
</head>
<body>
	<p>নিম্নের div এলিমেন্টে দুটি ভ্যালু ব্যবহার করে অনুভূমিক এবং উলম্বভাবে স্যাডো ইফেক্ট যুক্ত করা হয়েছে।</p>
	<div id="shadow1"><code>box-shadow: 12px 12px;</code></div>

	<p>এখন আমরা একই এলিমেন্টে কালার স্যাডো যুক্ত করবোঃ</p>
	<div id="shadow2"><code>box-shadow: 12px 12px lightsalmon;</code></div>

	<p>এখন আমরা একই এলিমেন্টে কালার স্যাডোর সাথে blur ইফেক্ট যুক্ত করবোঃ</p>
	<div id="shadow3"><code>box-shadow: 12px 12px;</code></div>

	<p> inset এর মাধ্যমে এলিমেন্টের ভেতরে blur স্যাডো ইফেক্ট যুক্ত করা হয়েছেঃ</p>
	<div id="shadow4"><code>box-shadow: inset 2px 2px 1em gold;</code></div>
</body>
</html>

ফলাফল


::before এবং ::after এর ব্যবহার

আরও আকর্ষনীয় ইফেক্ট তৈরি করতে আপনি স্যাডোর সাথে ::before এবং ::after সুডো-ক্লাস(pseudo-class) যুক্ত করতে পারেনঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>before after pseudo  efect</title>
<html>
<head>
<style>
#shadow {
    position: relative;
    box-shadow: 2px 2px 4px rgba(0, 100, 0, .4);
    padding: 10px;
    background: aqua;
}
/* বক্স অনুসারে ইমেজ নির্ধারণ*/
#shadow img {
    width: 100%;
	height: 150px;
    border: 1px dotted teal;
    border-style: double;
}
#shadow::after {
    content: '';
    position: absolute;
    box-shadow: 0 20px 2px rgba(0, 100, 0, 0.4);
    width: 50%;
    left: 25%; /* বাকি ৫০% এর অর্ধেক */
    height: 50px;
    bottom: 0;
    z-index: -1; /* ইমেজের পিছনে স্যাডো লুকানো */
}
</style> 
</head>
<body>
<div id="shadow">
<img src="..//css_examples/satt_bangla1.jpg" alt="beautiful scenery">
</div>

</body>
</html>

ফলাফল


বক্স-স্যাডোর মাধ্যমে কার্ড তৈরি

আপনি box-shadow প্রোপার্টি ব্যবহার করে যেকোনো এলিমেন্টকে কার্ডে রুপান্তর করাতে পারবেন।

নিম্নে বিভিন্ন প্রকার কার্ড তৈরি করে দেখানো হলোঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>বক্স-স্যাডো ব্যবহার করে কার্ড তৈরি</title>
<style>
	div.cardbody {
		background-color: orange;
		color: white;
		padding: 5px;
		font-size: 30px;
	}
	div.description {
		padding: 1px;
		background-color: khaki;
	}
	img {
		width: 97%;
	}
	div.cardbox {
		margin: 15px;
  		width: 200px;
		height: auto;
  		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  		text-align: center;
	}
</style>
</head>
<body>

	<h2>কার্ড তৈরি</h2>
	<p> নিম্নের div এলিমেন্টকে টেক্সট-কার্ডে রূপান্তর করা হয়েছে।</p>
	<div class="cardbox">
		<div class="cardbody">
			<h1>CARD</h1>
		</div>
		<div class="description">
			<p>টেক্সট কার্ড</p>
		</div>
	</div>

	<p> নিম্নের div এলিমেন্টকে ইমেজ-কার্ডে রূপান্তর করা হয়েছে।</p>
	<div class="cardbox">
		<div class="cardbody">
			<img src="..//css_examples/satt.jpg" alt="satt">
		</div>
		<div class="description">
			<p>ইমেজ কার্ড</p>
		</div>
	</div>
</body>
</html>

ফলাফল



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

প্রোপার্টি Google Chrome Edge/IE Mozila Firefox Safari Opera