CSS - Filters فلاتر الصور

CSS - فلاتر الصور (Image Filters)

🔸 تُستخدم خاصية filter في CSS لتطبيق تأثيرات بصرية على الصور (أو أي عناصر HTML) مثل التمويه، التباين، الرمادي، وغيرها. تُستخدم بكثرة في التصميم الحديث لإضافة لمسة جمالية بدون الحاجة لتعديل الصورة باستخدام برامج خارجية.

---

🔹 أمثلة على تأثيرات الفلاتر

img.blur {
  filter: blur(5px);
}

img.brightness {
  filter: brightness(150%);
}

img.contrast {
  filter: contrast(200%);
}

img.grayscale {
  filter: grayscale(100%);
}

img.invert {
  filter: invert(100%);
}

img.sepia {
  filter: sepia(100%);
}

img.saturate {
  filter: saturate(8);
}

img.huerotate {
  filter: hue-rotate(180deg);
}

img.shadow {
  filter: drop-shadow(10px 10px 10px gray);
}

📌 يمكنك تطبيق هذه الكلاسات على الصور لتجربة التأثيرات المختلفة.

---

🧪 مثال عملي بسيط

<img src="example.jpg" class="grayscale" alt="صورة رمادية">
<img src="example.jpg" class="blur" alt="صورة ضبابية">
<img src="example.jpg" class="contrast" alt="صورة بتباين عالي">

---

🔁 دمج أكثر من فلتر

img {
  filter: grayscale(50%) blur(2px) brightness(120%);
}

📌 يمكنك تطبيق أكثر من فلتر في نفس الوقت عن طريق فصلهم بمسافة.

---

📌 ملاحظات مهمة

• الخاصية filter لا تؤثر فقط على الصور، بل يمكن استخدامها على أي عنصر HTML.
• بعض الفلاتر مثل drop-shadow تُستخدم لتأثيرات خارجية مشابهة لـ box-shadow لكن مخصصة للصور الشفافة.
• الفلاتر مدعومة في جميع المتصفحات الحديثة.