কিভাবে সিএসএস বক্স-ছায়া ব্যবহার করবেন: 13 টি কৌশল এবং উদাহরণ

সিএসএস হল ভাষা বিকাশকারীরা একটি ওয়েবপেজ স্টাইল করতে ব্যবহার করে। এটি নিয়ন্ত্রণ করে কিভাবে এইচটিএমএল এলিমেন্টগুলি স্ক্রিনে, কাগজে বা অন্য কোন মাধ্যমের মাধ্যমে প্রদর্শিত হয়। CSS আপনার নিজস্ব ছবিতে ওয়েবপেজ স্টাইল করার জন্য সম্পূর্ণ কাস্টমাইজেশন পাওয়ার প্রদান করে।

আপনি CSS ব্যবহার করে একটি উপাদানের ব্যাকগ্রাউন্ড কালার, ফন্ট স্টাইল, ফন্ট কালার, বক্স-শ্যাডো, মার্জিন এবং অন্যান্য অসংখ্য প্রপার্টি পরিবর্তন করতে পারেন। আমরা এই গাইডে বক্স-ছায়ার কিছু কার্যকরী ব্যবহারের মাধ্যমে আপনাকে নিয়ে যাব।

---

---

CSS বক্স-ছায়া কি?

দ্য বাক্স-ছায়া HTML উপাদানগুলিতে ছায়া প্রয়োগ করার জন্য সম্পত্তি ব্যবহার করা হয়। এটি স্টাইলিং বক্স বা ছবিগুলির জন্য সর্বাধিক ব্যবহৃত CSS বৈশিষ্ট্যগুলির মধ্যে একটি।

সিএসএস সিনট্যাক্স:

box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];

1. অনুভূমিক অফসেট: যদি অনুভূমিক অফসেট ইতিবাচক হয়, ছায়াটি বাক্সের ডানদিকে থাকবে। এবং অনুভূমিক অফসেট নেতিবাচক হলে, ছায়াটি বাক্সের বাম দিকে থাকবে।
2. উল্লম্ব অফসেট: যদি উল্লম্ব অফসেট ইতিবাচক হয়, ছায়াটি বাক্সের নীচে থাকবে। এবং যদি উল্লম্ব অফসেট নেতিবাচক হয়, ছায়াটি বাক্সের উপরে থাকবে।
3. অস্পষ্ট ব্যাসার্ধ: মান যত বেশি হবে, ছায়া তত ঝাপসা হবে।
4. ব্যাসার্ধ বিস্তার: এটা বোঝায় যে ছায়া কতটা ছড়িয়ে পড়তে হবে। ইতিবাচক মান ছায়ার বিস্তার বাড়ায়, নেতিবাচক মান বিস্তার হ্রাস করে।
5. রঙ: এটি ছায়ার রঙ বোঝায়। এছাড়াও, এটি rgba, hex, বা hsla এর মত যেকোনো কালার ফরম্যাট সমর্থন করে।

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

1. বাক্সের বাম, ডান এবং নীচে একটি ডিম বক্স-ছায়া যুক্ত করুন

আপনি আপনার টার্গেট এইচটিএমএল এলিমেন্ট সহ নিচের বক্স-শ্যাডো সিএসএস ব্যবহার করে বক্সের তিন পাশে (বাম, ডান এবং নীচে) খুব আবছা ছায়া যোগ করতে পারেন:

box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;

আউটপুট:

---

---

2. সব দিকে একটি ডিম বক্স-ছায়া যোগ করুন

আপনি আপনার টার্গেট এইচটিএমএল এলিমেন্টের সাথে নিচের বক্স-শ্যাডো সিএসএস ব্যবহার করে বাক্সের সব পাশে হালকা ছায়া যুক্ত করতে পারেন:

---

---

box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

আউটপুট:

3. নীচের এবং ডান দিকে একটি পাতলা বাক্স-ছায়া যোগ করুন

আপনি আপনার টার্গেট এইচটিএমএল এলিমেন্টের সাথে নিচের বক্স-শ্যাডো সিএসএস ব্যবহার করে বক্সের নিচের এবং ডান পাশে ছায়া যোগ করতে পারেন:

আমার কি রিক এবং মর্টি দেখা উচিত?

box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;

আউটপুট:

4. সব দিকে একটি গাark় বাক্স-ছায়া যোগ করুন

আপনি আপনার টার্গেট এইচটিএমএল এলিমেন্টের সাথে নিচের বক্স-শ্যাডো সিএসএস ব্যবহার করে বক্সের সব পাশে অন্ধকার ছায়া যোগ করতে পারেন:

box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

আউটপুট:

5. সব দিকে স্প্রেড শ্যাডো যোগ করুন

আপনি আপনার টার্গেট এইচটিএমএল এলিমেন্টের সাথে নিচের কমান্ডটি ব্যবহার করে বাক্সের সব পাশে স্প্রেড শ্যাডো যোগ করতে পারেন:

box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;

আউটপুট:

6. সব দিকে একটি পাতলা বর্ডার ছায়া যোগ করুন

আপনি আপনার টার্গেট এইচটিএমএল এলিমেন্টের সাথে নিচের সিএসএস ব্যবহার করে বাক্সের সব পাশে একটি সহজ বর্ডার ছায়া যোগ করতে পারেন:

box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;

আউটপুট:

7. নীচের এবং বাম দিকে একটি বাক্স-ছায়া যোগ করুন

আপনি আপনার টার্গেট এইচটিএমএল এলিমেন্ট সহ নিচের বক্স-শ্যাডো সিএসএস ব্যবহার করে বক্সের নিচের এবং বাম পাশে একটি ছায়া যোগ করতে পারেন:

box-shadow: rgba(0, 0, 0, 0.1) -4px 9px 25px -6px;

আউটপুট:

8. উপরের এবং বাম দিকের একটি ডিম বক্স-ছায়া যোগ করুন, নীচের এবং ডান দিকের গাark় ছায়া

আপনি আপনার টার্গেট এইচটিএমএল এলিমেন্টের সাথে নিচের সিএসএস ব্যবহার করে বক্সের উপরের এবং বাম পাশে একটি হালকা ছায়া পাশাপাশি বক্সের নিচের এবং ডান পাশে একটি গা shadow় ছায়া যোগ করতে পারেন:

box-shadow: rgba(136, 165, 191, 0.48) 6px 2px 16px 0px, rgba(255, 255, 255, 0.8) -6px -2px 16px 0px;

আউটপুট:

9. সব দিকে একটি পাতলা, রঙিন বর্ডার ছায়া যোগ করুন

আপনি আপনার টার্গেট এইচটিএমএল এলিমেন্টের সাথে নিচের বক্স-শ্যাডো সিএসএস ব্যবহার করে বাক্সের সব পাশে একটি সাধারণ রঙের বর্ডার ছায়া যোগ করতে পারেন:

box-shadow: rgba(3, 102, 214, 0.3) 0px 0px 0px 3px;

আউটপুট:

10. বক্সের নিচের এবং বাম দিকে একাধিক রঙের বর্ডার শ্যাডো যোগ করুন

আপনি আপনার টার্গেট এইচটিএমএল এলিমেন্টের সাথে নিচের সিএসএস ব্যবহার করে বক্সের নিচের এবং বাম পাশে একাধিক রঙের বর্ডার ছায়া যুক্ত করতে পারেন:

box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;

আউটপুট:

কিভাবে উইন্ডোজ 10 এর জন্য কাস্টম আইকন তৈরি করবেন

11. নীচে একাধিক রঙের বর্ডার শ্যাডো যুক্ত করুন

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

box-shadow: rgba(240, 46, 170, 0.4) 0px 5px, rgba(240, 46, 170, 0.3) 0px 10px, rgba(240, 46, 170, 0.2) 0px 15px, rgba(240, 46, 170, 0.1) 0px 20px, rgba(240, 46, 170, 0.05) 0px 25px;

আউটপুট:

12. বক্সের নিচের এবং ডান পাশে একাধিক রঙের বর্ডার শ্যাডো যোগ করুন

আপনি আপনার টার্গেট এইচটিএমএল এলিমেন্টের সাথে নিচের সিএসএস ব্যবহার করে বক্সের নিচের এবং ডান পাশে একাধিক রঙের বর্ডার ছায়া যুক্ত করতে পারেন:

box-shadow: rgba(240, 46, 170, 0.4) 5px 5px, rgba(240, 46, 170, 0.3) 10px 10px, rgba(240, 46, 170, 0.2) 15px 15px, rgba(240, 46, 170, 0.1) 20px 20px, rgba(240, 46, 170, 0.05) 25px 25px;

আউটপুট:

13. বাম এবং ডান দিকে হালকা ছায়া যোগ করুন, নীচে ছায়া ছড়িয়ে দিন

আপনি বাম এবং ডান দিকে হালকা ছায়া যোগ করতে পারেন এবং আপনার লক্ষ্য HTML উপাদান সহ নিম্নলিখিত বাক্স-ছায়া CSS ব্যবহার করে বাক্সের নীচে ছায়া ছড়িয়ে দিতে পারেন:

box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;

আউটপুট:

একটি HTML পৃষ্ঠার সাথে CSS সংহত করুন

এখন আপনি জানেন কিভাবে CSS ব্যবহার করে শীতল বক্স-ছায়া প্রভাব যোগ করা যায়, আপনি সহজেই একাধিক উপায়ে HTML উপাদানগুলির সাথে তাদের সংহত করতে পারেন।

সম্পর্কিত: সিএসএস ফাইলগুলি পরীক্ষা, পরিষ্কার এবং অপ্টিমাইজ করার জন্য 11 দরকারী সরঞ্জাম

আপনি এটি HTML পৃষ্ঠাতেই এম্বেড করতে পারেন বা এটি একটি পৃথক নথি হিসাবে সংযুক্ত করতে পারেন। একটি HTML নথিতে CSS অন্তর্ভুক্ত করার তিনটি উপায় রয়েছে:

অভ্যন্তরীণ CSS

এমবেডেড বা অভ্যন্তরীণ স্টাইল শীট এর মধ্যে োকানো হয় একটি HTML নথির বিভাগ ব্যবহার করে উপাদান আপনি যে কোন সংখ্যা তৈরি করতে পারেন এইচটিএমএল ডকুমেন্টের উপাদান, কিন্তু সেগুলি অবশ্যই এর মধ্যে আবদ্ধ থাকতে হবে এবং ট্যাগ. এইচটিএমএল ডকুমেন্টের সাথে অভ্যন্তরীণ সিএসএস কিভাবে ব্যবহার করতে হয় তা এখানে দেখানো হয়েছে:

CSS box-shadow

.heading {
text-align: center;
}
.image-box {
display: block;
margin-left: auto;
margin-right: auto;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

Style 4







ইনলাইন সিএসএস

এইচটিএমএল এলিমেন্টে অনন্য স্টাইলের নিয়ম যোগ করতে ইনলাইন সিএসএস ব্যবহার করা হয়। এটি এইচটিএমএল এলিমেন্টের মাধ্যমে ব্যবহার করা যেতে পারে শৈলী বৈশিষ্ট্য স্টাইল অ্যাট্রিবিউট এর আকারে CSS বৈশিষ্ট্য রয়েছে 'সম্পদের মূল্য' একটি সেমিকোলন দ্বারা বিচ্ছিন্ন ( ; )।

সম্পর্কিত: সিএসএস গ্রিডের সাহায্যে দ্বিমাত্রিক ওয়েবসাইটগুলি কীভাবে তৈরি করবেন তা শিখুন

সমস্ত সিএসএস বৈশিষ্ট্য অবশ্যই এক লাইনে থাকতে হবে অর্থাৎ সিএসএস বৈশিষ্ট্যের মধ্যে কোনও লাইন বিরতি থাকা উচিত নয়। এইচটিএমএল ডকুমেন্টের সাথে কীভাবে ইনলাইন সিএসএস ব্যবহার করতে হয় তা দেখানোর একটি উদাহরণ:

CSS box-shadow

Style 4







বাহ্যিক CSS

এইচটিএমএল ডকুমেন্টে স্টাইল প্রয়োগ করার জন্য বহিরাগত সিএসএস সবচেয়ে আদর্শ উপায়। একটি বাহ্যিক স্টাইল শীটে একটি পৃথক নথিতে (.css ফাইল) সমস্ত শৈলীর নিয়ম রয়েছে, এই নথিটি তারপর HTML ডকুমেন্টের সাথে সংযুক্ত করা হয় ট্যাগ এইচটিএমএল ডকুমেন্টে শৈলী সংজ্ঞায়িত এবং প্রয়োগ করার জন্য এই পদ্ধতিটি সর্বোত্তম পদ্ধতি কারণ প্রভাবিত এইচটিএমএল ফাইলে মার্কআপের ন্যূনতম পরিবর্তন প্রয়োজন। এইচটিএমএল ডকুমেন্টের সাথে বাহ্যিক সিএসএস কীভাবে ব্যবহার করতে হয় তা এখানে দেখানো হয়েছে:

দিয়ে একটি নতুন CSS ফাইল তৈরি করুন .css সম্প্রসারণ এখন সেই ফাইলের মধ্যে নিম্নলিখিত সিএসএস কোড যোগ করুন:

.heading {
text-align: center;
}
.image-box {
display: block;
margin-left: auto;
margin-right: auto;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

সবশেষে, একটি HTML ডকুমেন্ট তৈরি করুন এবং সেই ডকুমেন্টের মধ্যে নিম্নলিখিত কোড যোগ করুন:

সংযুক্ত চার্জার চার্জ হতে বেশি সময় নেবে

CSS box-shadow

Style 4







উল্লেখ্য, CSS ফাইলটি HTML ডকুমেন্টের মাধ্যমে লিঙ্ক করা আছে ট্যাগ এবং href বৈশিষ্ট্য

উপরের তিনটি পদ্ধতি (অভ্যন্তরীণ CSS, ইনলাইন CSS এবং বহিরাগত CSS) একই আউটপুট প্রদর্শন করবে-

সিএসএস দিয়ে আপনার ওয়েবপেজকে মার্জিত করুন

CSS ব্যবহার করে আপনার ওয়েবপেজের স্টাইলিংয়ের উপর আপনার সম্পূর্ণ নিয়ন্ত্রণ আছে। আপনি বিভিন্ন CSS বৈশিষ্ট্য ব্যবহার করে প্রতিটি HTML উপাদান কাস্টমাইজ করতে পারেন। বিশ্বজুড়ে দেবরা সিএসএস আপডেটে অবদান রাখছে, এবং 1996 সালে প্রকাশিত হওয়ার পর থেকে তারা এটি করে আসছে। যেমন, নতুনদের কাছে অনেক কিছু শেখার আছে!

ভাগ্যক্রমে, সিএসএস শিক্ষানবিস বান্ধব। আপনি কয়েকটি সহজ কমান্ড দিয়ে শুরু করে এবং আপনার সৃজনশীলতা আপনাকে কোথায় নিয়ে যায় তা দেখে আপনি কিছু চমৎকার অনুশীলন পেতে পারেন।

শেয়ার করুন শেয়ার করুন টুইট ইমেইল 10 টি সহজ CSS কোড উদাহরণ আপনি 10 মিনিটে শিখতে পারেন

সিএসএসের সাহায্যের প্রয়োজন? শুরু করার জন্য এই মৌলিক CSS কোড উদাহরণগুলি চেষ্টা করুন, তারপর সেগুলি আপনার নিজস্ব ওয়েব পেজে প্রয়োগ করুন।

পরবর্তী পড়ুন সম্পর্কিত বিষয়

• প্রোগ্রামিং
• ওয়েব ডিজাইন
• সিএসএস

লেখক সম্পর্কে যুবরাজ চন্দ্র(60 নিবন্ধ প্রকাশিত)

যুবরাজ ভারতের দিল্লি বিশ্ববিদ্যালয়ের কম্পিউটার সায়েন্সের স্নাতক ছাত্র। তিনি ফুল স্ট্যাক ওয়েব ডেভেলপমেন্ট সম্পর্কে উত্সাহী। যখন তিনি লিখছেন না, তিনি বিভিন্ন প্রযুক্তির গভীরতা অন্বেষণ করছেন।

যুবরাজ চন্দ্রের কাছ থেকে আরো

আমাদের নিউজলেটার সদস্যতা

প্রযুক্তি টিপস, রিভিউ, ফ্রি ইবুক এবং এক্সক্লুসিভ ডিলের জন্য আমাদের নিউজলেটারে যোগ দিন!

সাবস্ক্রাইব করতে এখানে ক্লিক করুন