فنون CSS drop-shadow()

تعریف و استفاده

CSS drop-shadow() فیلترهای تصویر اثرات پروژه‌ای را بر روی تصاویر اعمال می‌کنند.

برای تصاویر اثرات پروژه‌های مختلف اضافه کنید:

#img1 {
  filter: drop-shadow(8px 8px 10px gray);
}
#img2 {
  filter: drop-shadow(10px 10px 7px lightblue);
}

برای تصاویر اثرات پروژه‌های مختلف اضافه کنید (از ارقام منفی برای سایه عمودی و افقی استفاده کنید):

#img1 {
  filter: drop-shadow(-8px -8px 10px gray);
}
#img2 {
  filter: drop-shadow(-10px -10px 7px lightblue);
}

drop-shadow(h-shadow v-shadow تار گسترش رنگ)

ارقام	توضیح
h-shadow	ضروری. ارقام پیکسلی سایه افقی. ارقام منفی سایه را در سمت چپ تصویر قرار می‌دهد.
v-shadow	ضروری. ارقام پیکسلی سایه عمودی. ارقام منفی سایه را در بالای تصویر قرار می‌دهد.
تار	اختیاری. برای سایه اضافه کردن اثر تار، واحد پیکسلی. ارقام بزرگتر باعث افزایش اثر تار می‌شوند (سایه بزرگتر و کم‌رنگ‌تر می‌شود). ارقام منفی مجاز نیستند. اگر مشخص نشده باشد، به طور پیش‌فرض 0 است (کناره سایه واضح است).
گسترش	اختیاری. باید به صورت پیکسلی باشد. ارقام مثبت سایه را گسترش می‌دهند و بزرگ‌تر می‌کنند، در حالی که ارقام منفی سایه را کوچک‌تر می‌کنند. اگر مشخص نشده باشد، به طور پیش‌فرض 0 است (سایه با اندازه عنصر مشابه است).
رنگ	اختیاری. برای سایه اضافه کردن رنگ. اگر مشخص نشده باشد، رنگ بستگی به مرورگر دارد (معمولاً سیاه).