filter

خاصية المرشحات البصرية filter

خاصية filter تطبق مؤثرات فوتوشوب حية على العنصر: ضبابية، تدرج رمادي، سطوع — ومعها backdrop-filter لزجاجية الخلفيات.

استوديو مؤثرات مدمج يعمل على العنصر ومحتواه لحظيًا: blur للضبابية، grayscale للرمادي (شهاداتنا «المقفلة» بلوحة التحكم عليها حرفيًا — مع عودة الألوان عند الهفر!)، brightness وcontrast للمعايرة، وdrop-shadow الظل الذي يتبع **شكل** الصورة الشفافة لا صندوقها (تفوقها على box-shadow للشعارات).

والنجمة الشقيقة backdrop-filter: تطبق التأثير على **ما خلف** العنصر — ضبابية زجاجية glassmorphism للهيدرات والمودالات (هيدر هذا الموقع نفسه).

الصياغة

.locked { filter: grayscale(1) opacity(0.6); }
.glass  { backdrop-filter: blur(12px); background: rgb(255 255 255 / 0.1); }

⚡ جرّب بنفسك

عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.

🎨 محرّر HTML/CSS

<style>
  .f img { width: 105px; border-radius: 10px; margin: 3px; }
</style>
<div class="f">
  <img src="https://placehold.co/210x140/7c5cff/white?text=أصلية" alt="">
  <img src="https://placehold.co/210x140/7c5cff/white?text=رمادية" style="filter:grayscale(1)" alt="">
  <img src="https://placehold.co/210x140/7c5cff/white?text=ضبابية" style="filter:blur(3px)" alt="">
</div>

النتيجة المباشرة:

أهم القيم

القيمة	الوظيفة
grayscale(1)	تدرج رمادي كامل — حالات «مقفل/معطل» التحفيزية
blur(8px)	ضبابية — سبويلرات وخلفيات ناعمة
drop-shadow(...)	ظل يتبع شكل PNG الشفاف لا صندوقه
backdrop-filter: blur()	ضبابية ما خلف العنصر — الزجاجية العصرية

💡 نصائح عملية

نمط تحفيز أنيق: grayscale افتراضيًا + عودة الألوان بالهفر مع transition
الزجاجية الكاملة: backdrop-filter + خلفية شبه شفافة + حد رقيق فاتح

⚠️ أخطاء شائعة

blur كبير على مساحات ضخمة متحركة — من أغلى العمليات رسوميًا
box-shadow لشعار PNG شفاف فيظهر صندوق الظل — المطلوب drop-shadow

🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار CSS الكامل بالعربي.

📚 للتعمق التقني الكامل بالإنجليزية: MDN Web Docs