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
মানগুলির ক্রম নিম্নরূপ:
- অনুভূমিক অফসেট : একটি ধনাত্মক সংখ্যা এটিকে বাম দিক থেকে ধাক্কা দেয় এবং একটি ঋণাত্মক সংখ্যা এটিকে ডান দিক থেকে ধাক্কা দেয়।
- উল্লম্ব অফসেট : একটি ধনাত্মক সংখ্যা এটিকে উপরে থেকে নিচে ঠেলে দেয় এবং একটি ঋণাত্মক সংখ্যা এটিকে নীচের দিক থেকে ঠেলে দেয়।
- অস্পষ্ট ব্যাসার্ধ : একটি বড় সংখ্যা একটি আরও অস্পষ্ট ছায়া তৈরি করে, যেখানে একটি ছোট সংখ্যা একটি তীক্ষ্ণ ছায়া তৈরি করে।
- স্প্রেড ব্যাসার্ধ (ঐচ্ছিক): একটি বড় সংখ্যা ছায়ার আকার বাড়ায় এবং একটি ছোট সংখ্যা এটিকে হ্রাস করে, যদি এটি 0 এ সেট করা থাকে তবে এটিকে ব্লার ব্যাসার্ধের সমান আকারে পরিণত করে।
- রঙ : যেকোনো বৈধ রঙের মান । যদি এটি সংজ্ঞায়িত না করা হয়, গণনা করা পাঠ্য রঙ ব্যবহার করা হবে।
ডিফল্ট বাইরের ছায়ার পরিবর্তে একটি বাক্সের ছায়াকে একটি অভ্যন্তরীণ ছায়া তৈরি করতে, অন্যান্য বৈশিষ্ট্যের আগে একটি 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
মানগুলির একাধিক দৃষ্টান্ত যোগ করে আপনি যত খুশি তত ছায়া যোগ করতে পারেন। প্রতিটি ছায়া একটি পজিশনিং রেফারেন্স পয়েন্ট হিসাবে শেষ ছায়া ব্যবহার করবে।
আপনার উপলব্ধি পরীক্ষা করুন
ছায়া আপনার জ্ঞান পরীক্ষা
নিচের কোন ছায়ার মানটি box-shadow
জন্য অনন্য?
inset
একবারে একটি উপাদানে শুধুমাত্র 13টি বাক্সের ছায়া অনুমোদিত।