ছায়া

CSS পডকাস্ট - 017: ছায়া

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

CSS এর box-shadow এবং text-shadow বৈশিষ্ট্য রয়েছে, কিন্তু ছবিটি পাঠ্য নয়, তাই আপনি text-shadow ব্যবহার করতে পারবেন না। আপনি যদি box-shadow ব্যবহার করেন, তবে ছায়াটি আশেপাশের বাক্সে থাকে, টি-শার্টের চারপাশে নয় ।

ভাগ্যক্রমে, আরেকটি বিকল্প আছে: drop-shadow() ফিল্টার। এটি আপনাকে ডিজাইনার যা চেয়েছে ঠিক তা করতে সক্ষম করে। CSS-এ শ্যাডোর ক্ষেত্রে প্রচুর বিকল্প রয়েছে, প্রতিটি আলাদা ব্যবহারের ক্ষেত্রে ডিজাইন করা হয়েছে।

বাক্সের ছায়া

box-shadow প্রপার্টি হল একটি HTML এলিমেন্টের বক্সে ছায়া যোগ করার জন্য। এটি ব্লক উপাদান এবং ইনলাইন উপাদানগুলিতে কাজ করে।

.my-element {
    box-shadow: 5px 5px 20px 5px #000;
}

box-shadow মানগুলির ক্রম নিম্নরূপ:

1. অনুভূমিক অফসেট : একটি ধনাত্মক সংখ্যা এটিকে বাম দিক থেকে ধাক্কা দেয় এবং একটি ঋণাত্মক সংখ্যা এটিকে ডান দিক থেকে ধাক্কা দেয়।
2. উল্লম্ব অফসেট : একটি ধনাত্মক সংখ্যা এটিকে উপরে থেকে নিচে ঠেলে দেয় এবং একটি ঋণাত্মক সংখ্যা এটিকে নীচের দিক থেকে ঠেলে দেয়।
3. অস্পষ্ট ব্যাসার্ধ : একটি বড় সংখ্যা একটি আরও অস্পষ্ট ছায়া তৈরি করে, যেখানে একটি ছোট সংখ্যা একটি তীক্ষ্ণ ছায়া তৈরি করে।
4. স্প্রেড ব্যাসার্ধ (ঐচ্ছিক): একটি বড় সংখ্যা ছায়ার আকার বাড়ায় এবং একটি ছোট সংখ্যা এটিকে হ্রাস করে, যদি এটি 0 এ সেট করা থাকে তবে এটিকে ব্লার ব্যাসার্ধের সমান আকারে পরিণত করে।
5. রঙ : যেকোনো বৈধ রঙের মান । যদি এটি সংজ্ঞায়িত না করা হয়, গণনা করা পাঠ্য রঙ ব্যবহার করা হবে।

ডিফল্ট বাইরের ছায়ার পরিবর্তে একটি বাক্সের ছায়াকে একটি অভ্যন্তরীণ ছায়া তৈরি করতে, অন্যান্য বৈশিষ্ট্যের আগে একটি inset কীওয়ার্ড যোগ করুন।

/* Outer shadow */
.my-element {
    box-shadow: 5px 5px 20px 5px #000;
}

/* Inner shadow */
.my-element {
    box-shadow: inset 5px 5px 20px 5px #000;
}

একাধিক ছায়া

আপনি box-shadow দিয়ে যত খুশি তত ছায়া যোগ করতে পারেন। এটি অর্জন করতে মান সেটের একটি কমা বিভক্ত সংগ্রহ যোগ করুন:

.my-element {
  box-shadow: 5px 5px 20px 5px darkslateblue, -5px -5px 20px 5px dodgerblue,
    inset 0px 0px 10px 2px darkslategray, inset 0px 0px 20px 10px steelblue;
}

বক্স-ছায়া প্রভাবিত বৈশিষ্ট্য

আপনার বাক্সে একটি border-radius যোগ করা বাক্সের ছায়ার আকৃতিকেও প্রভাবিত করবে। এর কারণ হল CSS বাক্সের আকৃতির উপর ভিত্তি করে একটি ছায়া তৈরি করছে যেন আলো এটির দিকে নির্দেশ করছে।

.my-element {
  box-shadow: 0px 0px 20px 5px darkslateblue;
  border-radius: 25px;
}

box-shadow সহ আপনার বাক্সটি যদি overflow: hidden , তবে ছায়াটিও সেই ওভারফ্লো থেকে বেরিয়ে আসবে না ।

<div class="my-parent">
  <div class="my-shadow">My shadow is hidden by my parent.</div>
</div>

.my-parent,
.my-shadow {
  width: 250px;
  height: 250px;
}

.my-shadow {
  box-shadow: 0px 0px 20px 5px darkslateblue;
}

.my-parent {
  overflow: hidden;
}

পাঠ্য ছায়া

text-shadow প্রোপার্টি box-shadow প্রোপার্টির অনুরূপ। এটি শুধুমাত্র টেক্সট নোডগুলিতে কাজ করে।

.my-element {
  text-shadow: 3px 3px 3px hotpink;
}

text-shadow মানগুলি box-shadow মতো এবং একই ক্রমে একই। শুধু পার্থক্য হল text-shadow কোন spread ভ্যালু নেই এবং কোন inset কীওয়ার্ড নেই।

আপনি যখন একটি box-shadow যোগ করেন তখন এটি আপনার বাক্সের আকারে ক্লিপ করা হয়, কিন্তু text-shadow কোনো ক্লিপিং নেই। এর মানে হল যে আপনার লেখাটি সম্পূর্ণ বা আধা স্বচ্ছ হলে, এর মাধ্যমে ছায়াটি দৃশ্যমান হবে।

.my-element {
  text-shadow: 3px 3px 3px gold;
  color: rgb(0 0 0 / 70%);
}

একাধিক ছায়া

আপনি text-shadow সাথে যত খুশি ছায়া যোগ করতে পারেন, ঠিক যেমন box-shadow সাথে। মান সেটের একটি কমা বিভক্ত সংগ্রহ যোগ করুন, এবং আপনি কিছু সত্যিই দুর্দান্ত পাঠ্য প্রভাব তৈরি করতে পারেন, যেমন 3D পাঠ্য।

.my-element {
  text-shadow: 1px 1px 0px white,
    2px 2px 0px firebrick;
  color: darkslategray;
}

ছায়া ফেলুন

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

.my-image {
  filter: drop-shadow(0px 0px 10px rgba(0 0 0 / 30%))
}

drop-shadow ফিল্টারে box-shadow মতো একই মান রয়েছে কিন্তু inset কীওয়ার্ড এবং spread মান অনুমোদিত নয়। filter প্রপার্টিতে drop-shadow মানগুলির একাধিক দৃষ্টান্ত যোগ করে আপনি যত খুশি তত ছায়া যোগ করতে পারেন। প্রতিটি ছায়া একটি পজিশনিং রেফারেন্স পয়েন্ট হিসাবে শেষ ছায়া ব্যবহার করবে।

আপনার উপলব্ধি পরীক্ষা করুন

ছায়া আপনার জ্ঞান পরীক্ষা