ড্রপ-শ্যাডো ফাংশন
drop-shadow ফাংশনটি
ব্যাকগ্রাউন্ড ইমেজে শ্যাডো যোগ করতে
সাহায্য করে।
সিনট্যাক্স
সিলেক্টর {
filter: drop-shadow(x-অক্ষে সরণ, y-অক্ষে সরণ, ব্লার রেডিয়াস, রঙ);
}
মানসমূহ
| মান | বর্ণনা |
|---|---|
| x-অক্ষে সরণ | ব্যাকগ্রাউন্ডের সাপেক্ষে অনুভূমিকভাবে শ্যাডোর সরণ। ধনাত্মক সংখ্যা ডানদিকে শ্যাডো সরণ নির্দেশ করে, ঋণাত্মক - বামদিকে। বাধ্যতামূলক প্যারামিটার। |
| y-অক্ষে সরণ | ব্যাকগ্রাউন্ডের সাপেক্ষে উল্লম্বভাবে শ্যাডোর সরণ। ধনাত্মক সংখ্যা নীচের দিকে শ্যাডো সরণ নির্দেশ করে, ঋণাত্মক - উপরের দিকে। বাধ্যতামূলক প্যারামিটার। |
| ব্লার রেডিয়াস |
শ্যাডোর ব্লার রেডিয়াস সেট করে।
মান যত বড় হবে, শ্যাডো তত বেশি ব্লার হবে।
ঐচ্ছিক প্যারামিটার। ডিফল্টভাবে
0 এর সমান।
|
| রঙ | শ্যাডোর রঙ। ঐচ্ছিক প্যারামিটার। ডিফল্টভাবে কালো রঙের শ্যাডো সেট করা থাকে। |
উদাহরণ
আসুন আমাদের ইমেজের জন্য একটি নীল শ্যাডো সেট করি
অক্ষ বরাবর কোনো সরণ ছাড়াই, 5px ব্লার সহ:
<div id="elem"></div>
#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প্রপার্টি,
যার সাহায্যে একটি ব্লকে ব্যাকগ্রাউন্ড ইমেজ সেট করা যায়