ড্রপ-শ্যাডো ফাংশন

drop-shadow ফাংশনটি ব্যাকগ্রাউন্ড ইমেজে শ্যাডো যোগ করতে সাহায্য করে।

সিনট্যাক্স

cssসিলেক্টর {
  filter: drop-shadow(x-অক্ষে সরণ, y-অক্ষে সরণ, ব্লার রেডিয়াস, রঙ);
}

মানসমূহ

মান	বর্ণনা
x-অক্ষে সরণ	ব্যাকগ্রাউন্ডের সাপেক্ষে অনুভূমিকভাবে শ্যাডোর সরণ। ধনাত্মক সংখ্যা ডানদিকে শ্যাডো সরণ নির্দেশ করে, ঋণাত্মক - বামদিকে। বাধ্যতামূলক প্যারামিটার।
y-অক্ষে সরণ	ব্যাকগ্রাউন্ডের সাপেক্ষে উল্লম্বভাবে শ্যাডোর সরণ। ধনাত্মক সংখ্যা নীচের দিকে শ্যাডো সরণ নির্দেশ করে, ঋণাত্মক - উপরের দিকে। বাধ্যতামূলক প্যারামিটার।
ব্লার রেডিয়াস	শ্যাডোর ব্লার রেডিয়াস সেট করে। মান যত বড় হবে, শ্যাডো তত বেশি ব্লার হবে। ঐচ্ছিক প্যারামিটার। ডিফল্টভাবে `0` এর সমান।
রঙ	শ্যাডোর রঙ। ঐচ্ছিক প্যারামিটার। ডিফল্টভাবে কালো রঙের শ্যাডো সেট করা থাকে।

উদাহরণ

আসুন আমাদের ইমেজের জন্য একটি নীল শ্যাডো সেট করি অক্ষ বরাবর কোনো সরণ ছাড়াই, 5px ব্লার সহ:

html<div id="elem"></div>

css#elem {
  filter: drop-shadow(0 0 5px #035470);
  background: url("bg.png") center / cover no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

আরও দেখুন

blur ফাংশন,
যা ব্যাকগ্রাউন্ডকে ব্লার করে
brightness ফাংশন,
যা ব্যাকগ্রাউন্ডের ব্রাইটনেস সেট করে
contrast ফাংশন,
যা ব্যাকগ্রাউন্ডের কনট্রাস্ট সেট করে
hue-rotate ফাংশন,
যা ব্যাকগ্রাউন্ডের হিউ রোটেট সেট করে
invert ফাংশন,
যা ব্যাকগ্রাউন্ডের কালার ইনভার্ট করে
opacity ফাংশন,
যা ব্যাকগ্রাউন্ডের অস্পষ্টতা সেট করে
sepia ফাংশন,
যা ব্যাকগ্রাউন্ডকে সেপিয়াতে রূপান্তরিত করে
background প্রপার্টি,
যা ব্যাকগ্রাউন্ডের জন্য একটি শর্টহ্যান্ড প্রপার্টি
background-image প্রপার্টি,
যার সাহায্যে একটি ব্লকে ব্যাকগ্রাউন্ড ইমেজ সেট করা যায়