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

« পূর্ববর্তী

পরবর্তী »

সিএসএস(৩) 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

« পূর্ববর্তী

পরবর্তী »

ক্লায়েন্ট সাইড টিউটোরিয়াল

সার্ভার সাইড টিউটোরিয়ায়াল

প্রোগ্রামিং টিউটোরিয়ায়াল

অন্যান্য

সিএসএস টিউটোরিয়াল