انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #4 من درس: المرشحات البصرية في لغة CSS

Drop Shadow Versus Box Shadow ظل الشكل المفرغ مقابل الصندوق

طبّق المرشحات البصرية الفورية في لغة CSS لضبط السطوع والتباين والتدرج الرمادي والتمويه، ورسم ظلال تتبع حدود الأيقونات المفرغة وتصميم واجهات الزجاج الضبابي الأنيقة.
2 صفوف تعليمية
لغة CSS
0 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

عند إدراج شعار متجه مفرغ بصيغة SVG أو أيقونة ذات خلفية شفافة، تتجاهل خاصية box-shadow المناطق المفرغة وترسم ظلاً مستطيلاً جامداً حول الإطار الخارجي للصورة. في المقابل، تفحص دالة filter: drop-shadow(0 8px 12px rgba(15, 23, 42, 0.35)) قناة الشفافية لكل بكسل فترسم ظلاً متطابقاً يتبع انحناءات الدرع أو الشعار بدقة تامة.

الصف 2 كود برمجي
CSS 
.icon-box-shadow {
  box-shadow: 0 8px 16px rgba(15, 23, 42, 0.28);
}
.icon-drop-shadow {
  filter: drop-shadow(0 8px 12px rgba(15, 23, 42, 0.35));
}
جرّب بنفسك

جميع فقرات هذا الدرس (المرشحات البصرية في لغة CSS)