CSS3-এ ইমেজে ড্রপ শ্যাডো যোগ করার জন্য filter প্রপার্টির drop-shadow মান ব্যবহার করুন। এর প্যারামিটারগুলো:
- h-shadow: হরিজন্টাল শ্যাডোর পিক্সেল মান
- v-shadow: ভার্টিক্যাল শ্যাডোর পিক্সেল মান (নেগেটিভ মান শ্যাডোকে উপরে নেয়)
- blur: শ্যাডোতে ব্লার ইফেক্ট যোগ করে
- spread: পজেটিভ মান শ্যাডো বড় করে, নেগেটিভ ছোট করে
- color: শ্যাডোর রঙ
উদাহরণ
<!DOCTYPE html> <html> <head> <style> img.demo { filter: brightness(120%); filter: contrast(120%); filter: drop-shadow(10px 10px 10px green); } </style> </head> <body> <h1>Learn MySQL</h1> <img src="https://www.tutorialspoint.com/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150"> <h1>Learn MySQL</h1> <img class="demo" src="https://www.tutorialspoint.com/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150"> </body> </html>
আউটপুট
মহত্বপূর্ণ নোট
উপরের উদাহরণে একাধিক filter ডিক্লেরেশন ব্যবহার করা হয়েছে, কিন্তু CSS-এ শুধু শেষটাই কাজ করবে। একাধিক ফিল্টার একসাথে ব্যবহার করতে কমা দিয়ে আলাদা করুন:
img.demo { filter: brightness(120%) contrast(120%) drop-shadow(10px 10px 10px green); }
drop-shadow() বক্স শ্যাডোর থেকে আলাদা — এটি ইমেজের স্বচ্ছ অংশের আকার অনুসরণ করে, বক্সের আকার অনুসরণ করে না।
