CSS বক্স শ্যাডো

আপনি যখন CSS-এ একটি উপাদান ডিজাইন করছেন, তখন আপনি সিদ্ধান্ত নিতে পারেন যে আপনি সেই উপাদানটির ফ্রেমের চারপাশে একটি ছায়া প্রভাব তৈরি করতে চান। উদাহরণস্বরূপ, আপনি এমন একটি চিত্র তৈরি করতে চাইতে পারেন যার চিত্রের নীচে একটি ছায়া রয়েছে।

সেখানেই CSS বক্স-শ্যাডো প্রপার্টি কার্যকর হতে পারে। বক্স-শ্যাডো বৈশিষ্ট্য আপনাকে একটি উপাদানের ফ্রেমের চারপাশে ছায়া প্রভাব যুক্ত করতে দেয়। এই টিউটোরিয়ালটি উদাহরণ সহ আলোচনা করবে, কিভাবে ওয়েব উপাদানগুলিতে ছায়া প্রভাব যুক্ত করতে CSS বক্স-শ্যাডো প্রপার্টি ব্যবহার করতে হয়।

CSS বক্স শ্যাডো

বক্স-শ্যাডো বৈশিষ্ট্য একটি উপাদানে একটি ছায়া যোগ করে। বক্স-শ্যাডো প্রপার্টি প্রায় যেকোন HTML এলিমেন্টে প্রয়োগ করা যেতে পারে, এবং প্রোপার্টিটি এমন উপাদানের সাথেও ব্যবহার করা যেতে পারে যেগুলি গোলাকার কোণ আছে।

বক্স-শ্যাডো সম্পত্তির সিনট্যাক্স নিম্নরূপ:

box-shadow: offset-x offset-y blur-radius spread color;

আসুন এই সিনট্যাক্সটি ভেঙে ফেলি এবং প্রতিটি উপাদান নিয়ে আলোচনা করি:

অফসেট-এক্স হল ছায়ার জন্য অনুভূমিক অফসেট (প্রয়োজনীয়)।
offset-y হল ছায়ার জন্য উল্লম্ব অফসেট (প্রয়োজনীয়)।
অস্পষ্ট-ব্যাসার্ধ হল ছায়ায় যোগ করা অস্পষ্ট প্রভাব (ঐচ্ছিক)।
স্প্রেড হল ব্লার প্রভাবের স্প্রেড ব্যাসার্ধ (ঐচ্ছিক)।
রঙ হল ছায়ার রঙ (ঐচ্ছিক, ডিফল্ট কালো)।

এখন যেহেতু আমরা বক্স-শ্যাডো সম্পত্তির সিনট্যাক্স জানি, আমরা কার্যত সম্পত্তির কয়েকটি উদাহরণ অন্বেষণ করতে পারি। নীচের উদাহরণগুলিতে, আমরা নিম্নলিখিত HTML উপাদান ব্যবহার করতে যাচ্ছি যা আমরা স্টাইল করতে চাই:

<html>
<div>
	<p>This is a box.</p>
</div>

আমাদের HTML উপাদানের নিম্নলিখিত শৈলী রয়েছে:

<html>
<div>
	<p>This is a box.</p>
</div>
  
<style>
div {
     height: 100px;
     width: 200px;
     padding: 10px;
     background-color: lightblue;
 }

এইভাবে আমাদের ডিফল্ট বক্স প্রদর্শিত হয়: CSS বক্স শ্যাডো আমাদের HTML/CSS কোডের আউটপুট দেখতে উপরের কোড এডিটরে বোতাম।

81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগ দেওয়ার পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷

৷

গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় কাটিয়েছে।

আমাদের বক্সটি 100px চওড়া এবং 200px লম্বা৷ আমাদের বক্সের বিষয়বস্তুতে একটি 10px প্যাডিং রয়েছে, যার অর্থ আমাদের বক্সের ভিতরের পাঠ্য এবং আমাদের বক্সের সীমানার মধ্যে একটি 10px ব্যবধান রয়েছে। উপরন্তু, আমাদের বক্স হালকা নীল.

অনুভূমিক এবং উল্লম্ব ছায়া

বক্স-শ্যাডো প্রপার্টি দিয়ে আপনি যে সবচেয়ে মৌলিক ছায়া তৈরি করতে পারেন তা হল একটি অনুভূমিক এবং উল্লম্ব ছায়া। এখানে একটি অনুভূমিক এবং উল্লম্ব ছায়া সহ আমাদের বাক্সের একটি উদাহরণ:

<html>
<div>
	<p>This is a box.</p>
</div>
  
<style>
div {
     height: 100px;
     width: 200px;
     padding: 10px;
     background-color: lightblue;
}
div {
	box-shadow: 10px 10px;
}

CSS বক্স শ্যাডো আমাদের HTML/CSS কোডের আউটপুট দেখতে উপরের কোড এডিটরে বোতাম।

আমাদের কোডে, আমরা অফসেট-এক্স এবং অফসেট-ওয়াই অ্যাট্রিবিউট উল্লেখ করেছি এবং উভয়কেই 10px এ সেট করেছি। এটি একটি ড্রপ শ্যাডো তৈরি করে যা কালো এবং উভয় অক্ষে 10 পিক্সেল দ্বারা অফসেট, যেমন আপনি উপরে দেখতে পাচ্ছেন।

ছায়ার রং

আপনি রঙের বৈশিষ্ট্য ব্যবহার করে একটি ছায়ায় একটি রঙ নির্দিষ্ট করতে পারেন। ধরুন আমরা চেয়েছিলাম আমাদের ছায়া হালকা ধূসর হোক। আমরা এই কোড ব্যবহার করে আমাদের বক্স-ছায়ার রঙ পরিবর্তন করতে পারি:

<html>
<div>
	<p>This is a box.</p>
</div>
  
<style>
div {
     height: 100px;
     width: 200px;
     padding: 10px;
     background-color: lightblue;
}
div {
	box-shadow: 10px 10px;
}
div {
	box-shadow: 10px 10px lightgray;
}

CSS বক্স শ্যাডো আমাদের HTML/CSS কোডের আউটপুট দেখতে উপরের কোড এডিটরে বোতাম।

আমাদের বাক্সে এখন একটি হালকা ধূসর ছায়া আছে।

শ্যাডো ব্লার প্রভাব

অস্পষ্ট-ব্যাসার্ধ বৈশিষ্ট্যটি ছায়ায় একটি অস্পষ্ট প্রভাব যুক্ত করতে ব্যবহৃত হয়। ধরুন আমরা আমাদের ছায়াকে 3px ব্লার করতে চেয়েছিলাম, যা এটিকে কিছুটা ঝাপসা করে তুলবে। আমরা একটি বাক্সের জন্য ব্লার সংজ্ঞায়িত করতে এই কোডটি ব্যবহার করতে পারি:

<html>
<div>
	<p>This is a box.</p>
</div>
  
<style>
div {
     height: 100px;
     width: 200px;
     padding: 10px;
     background-color: lightblue;
}
div {
	box-shadow: 10px 10px;
}
div {
	box-shadow: 10px 10px 3px lightgray;
}

CSS বক্স শ্যাডো আমাদের HTML/CSS কোডের আউটপুট দেখতে উপরের কোড এডিটরে বোতাম।

এই বাক্সটি আমাদের শেষ উদাহরণের অনুরূপ, তবে আপনি যদি ছায়াটির দিকে ঘনিষ্ঠভাবে তাকান তবে আপনি দেখতে পাবেন এটি কিছুটা অস্পষ্ট।

স্প্রেড ইফেক্ট

আপনি যখন বক্স-শ্যাডো প্রপার্টি ব্যবহার করছেন, আপনি আপনার ছায়ায় একটি স্প্রেড ব্যাসার্ধ যোগ করতে পারেন। এটি নির্ধারণ করে যে ছায়াটি সব দিকে কতটা ছড়িয়ে যেতে পারে। ধরুন আমরা আমাদের ছায়াকে নিজের চারপাশে 5px ছড়িয়ে দিতে চাই। আমরা এই কোডটি ব্যবহার করে তা করতে পারি:

<html>
<div>
	<p>This is a box.</p>
</div>
  
<style>
div {
     height: 100px;
     width: 200px;
     padding: 10px;
     background-color: lightblue;
}
div {
	box-shadow: 10px 10px;
}
div {
	box-shadow: 10px 10px 5px 5px lightgray;
}

CSS বক্স শ্যাডো আমাদের HTML/CSS কোডের আউটপুট দেখতে উপরের কোড এডিটরে বোতাম।

এই উদাহরণে, আমাদের ছায়া কিছুটা লম্বা। এর কারণ হল আমরা নির্দিষ্ট করেছি স্প্রেড ব্যাসার্ধের কারণে আমাদের ছায়া 5px দ্বারা প্রসারিত হয়েছে৷

আমাদের কোডে, আমরা যে বৈশিষ্ট্যগুলি নির্দিষ্ট করেছি সেগুলি নিম্নলিখিত উপায়ে অর্ডার করা হয়েছে:

অফসেট-এক্স
অফসেট-y
ব্লার
ব্যাসার্ধ
রঙ

একাধিক ছায়া

বক্স-শ্যাডো বৈশিষ্ট্যটি একটি উপাদানে একাধিক ছায়া যুক্ত করতে ব্যবহার করা যেতে পারে। আপনি যদি একটি উপাদানে একাধিক ছায়া যুক্ত করতে চান, আপনি উপরের সিনট্যাক্স ব্যবহার করতে পারেন এবং কমা ব্যবহার করে আপনার ছায়াগুলিকে আলাদা করতে পারেন। এখানে একাধিক ছায়া তৈরি করার জন্য সিনট্যাক্স রয়েছে:

box-shadow: shadow1, shadow2;

আপনি যখন একাধিক ছায়ার সাথে কাজ করছেন, অফসেট মান অবশ্যই প্রতিটি ছায়ার জন্য আলাদা হতে হবে। অন্যথায়, আপনার ছায়াগুলি ওভারল্যাপ হবে এবং অফসেট মানগুলির একটি নির্দিষ্ট সেট বরাদ্দ করা শুধুমাত্র প্রথম ছায়া প্রদর্শিত হবে।

ধরুন আমরা আমাদের বাক্সের পিছনে একটি হালকা ধূসর এবং একটি গোলাপী ছায়া উভয়ই রাখতে চেয়েছিলাম। আমরা নিম্নলিখিত কোড ব্যবহার করে এই ছায়াগুলি তৈরি করতে পারি:

<html>
<div>
	<p>This is a box.</p>
</div>
  
<style>
div {
     height: 100px;
     width: 200px;
     padding: 10px;
     background-color: lightblue;
}
div {
	box-shadow: 10px 10px;
}
div {
	box-shadow: 5px 5px lightgray, 5px 5px pink;
}

আমাদের কোড ফিরে আসে:

ইনসেট শ্যাডো

ইনসেট কীওয়ার্ডটি একটি উপাদানের ভিতরে একটি ছায়া দেখাতে ব্যবহার করা যেতে পারে। ধরুন আমরা আমাদের বাক্সের ভিতরে আমাদের হালকা ধূসর ছায়া দেখতে চাই। আমরা নিম্নলিখিত কোড ব্যবহার করে এটি ঘটতে পারি:

<html>
<div>
	<p>This is a box.</p>
</div>
  
<style>
div {
     height: 100px;
     width: 200px;
     padding: 10px;
     background-color: lightblue;
}
div {
	box-shadow: 10px 10px;
}
div {
box-shadow: 5px 5px lightgray inset;
}

CSS বক্স শ্যাডো আমাদের HTML/CSS কোডের আউটপুট দেখতে উপরের কোড এডিটরে বোতাম।

ইনসেট কীওয়ার্ড আমাদেরকে আমাদের ছায়াকে বাইরের ছায়া থেকে ভেতরের ছায়াতে পরিবর্তন করতে দেয় যেমনটা আপনি উপরে দেখতে পাচ্ছেন।

বক্স শ্যাডো বৈশিষ্ট্যগুলি

CSS বক্স-শ্যাডো প্রপার্টির সাথে ব্যবহার করা যেতে পারে এমন অনেকগুলি বৈশিষ্ট্য রয়েছে। এখানে এই বৈশিষ্ট্যগুলির একটি রেফারেন্স টেবিল রয়েছে:

অ্যাট্রিবিউট	বিবরণ
অফসেট-এক্স	অনুভূমিক (x) অক্ষের উপর ছায়ার অফসেট।
অফসেট-y	উল্লম্ব (y) অক্ষের উপর ছায়ার অফসেট।
ব্লার	ছায়ার অস্পষ্ট ব্যাসার্ধ।
রঙ	ছায়ার রঙ।
স্প্রেড	ছায়ার ছড়ানো ব্যাসার্ধ।
ইনসেট	ছায়াটিকে একটি ভিতরের ছায়াতে পরিবর্তন করে।
উত্তরাধিকার	এর মূল উপাদান থেকে একটি ছায়া উত্তরাধিকারসূত্রে পাওয়া যায়।

উপসংহার

CSS বক্স-শ্যাডো প্রপার্টি এইচটিএমএল এলিমেন্টে শ্যাডো ইফেক্ট যোগ করতে ব্যবহৃত হয়।

এই টিউটোরিয়ালটিতে কয়েকটি উদাহরণের সাথে আলোচনা করা হয়েছে, কীভাবে কাস্টম শ্যাডো তৈরি করতে বক্স-শ্যাডো প্রপার্টি ব্যবহার করতে হয়। এখন আপনি একজন পেশাদার ওয়েব ডেভেলপারের মতো আপনার নিজস্ব CSS ছায়া তৈরি করা শুরু করতে প্রস্তুত!