جاري التحميل...

المرشحات في CSS

الرسوم المتحركة كتبت خطاً زمنياً. Transform حدّد أين تستقر البكسلات. المرشحات تغيّر كيف تُرى: ضبابية خفيفة خلف نافذة منبثقة، صور مصغّرة رمادية تستعيد اللون عند التمرير، صورة أوضح بـ brightness و contrast — وكل ذلك دون أن يتحرّك مكان العنصر في التخطيط.

ماذا يفعل `filter`؟

خاصية filter تطبّق واحداً أو أكثر من تأثيرات ما بعد الرسم على مخرجات العنصر المرسومة (وعادةً مع أحفاده كمجموعة واحدة). العرض والارتفاع وتدفّق المستند لا يتغيّران؛ يتغيّر المظهر المرسوم فقط. استخدم filter: none (القيمة الابتدائية) لإزالة التأثيرات.

تربط عدة دوال في قيمة filter واحدة، مفصولة بمسافات — روحاً شبيهة بسلسلة transform، لكن الأدوات هنا بصرية لا مكانية: filter: brightness(1.1) contrast(1.05) saturate(1.2);

دوال المرشح الشائعة في لمحة

📊 دوال filter الشائعة في CSS

الدالة	الاستخدام المعتاد
`blur(radius)`	تليين الحواف / مظهر ضبابي (`px` أو طول مشابه)
`brightness(%)`	أفتح أو أغمق (`1` / `100%` = بدون تغيير)
`contrast(%)`	تقوية أو تسطيح نطاق التدرج
`grayscale(%)`	سحب اللون (`1` = رمادي كامل)
`saturate(%)`	زيادة أو خفض حدة اللون
`hue-rotate(angle)`	إزاحة الألوان على عجلة الألوان
`opacity(%)`	تلاشي نتيجة المرشح (مرتبط بـ `opacity` لكن ليس مطابقاً للخاصية)
`sepia(%)` / `invert(%)`	دفء vintage / عكس الألوان
`drop-shadow(…)`	ظل يتبع شكل الألفا (أيقونات، حواف شفافة)
`none`	إزالة المرشحات

النسب المئوية والأرقام العارية غالباً تعمل معاً (grayscale(1) ≈ grayscale(100%)). اختر أسلوباً واحداً في المشروع والتزم به.

بطاقات رمادية «تستيقظ» عند التمرير

نمط معرض شائع: باهتة افتراضياً، ألوان كاملة عند :hover. أضف transition قصيراً على filter ليشعر التغيير بقصد — الحركة من دروس سابقة، المظهر من هذا الدرس.

صورة مصغّرة رمادية تستعيد اللون عند hover

css

.thumb {
filter: grayscale(1);
transition: filter 0.25s ease;
}

.thumb:hover,
.thumb:focus-visible {
filter: grayscale(0);
}

grayscale(0) يعني ألواناً كاملة. اجعل transition على filter للتغييرات الخفيفة؛ تحريك blur ثقيل على صور كبيرة مكلف.

blur ناعم للتأكيد

blur() يليّن العنصر. استخدم نصف قطراً معقولاً على طبقة خلفية أو overlay — لا على body كاملاً — ليبقى النص مقروءاً.

لوحة خلفية ضبابية خلف نافذة منبثقة

css

.modal-scrub {
filter: blur(6px);
transform: scale(1.02);
}

.modal-dialog {
/* keep the dialog itself sharp — no filter here */
filter: none;
}

تمويه سلف كبير يموّه النص بداخله أيضاً. فضّل تمويه طبقة خلفية (أو backdrop-filter أدناه) عندما يجب أن يبقى المقدّم حاداً.

brightness و contrast للصور

صور المنتج والـ hero غالباً تحتاج تعديلاً خفيفاً دون فتح محرّر صور.

تعديل صورة بـ brightness و contrast

css

.hero-photo {
display: block;
width: 100%;
height: auto;
filter: brightness(1.08) contrast(1.06);
}

.hero-photo.is-muted {
filter: brightness(0.85) contrast(0.95) saturate(0.8);
}

قيم فوق 1 تقريباً تفتح أو تشدّ contrast؛ دون 1 تتراجع. تحركات صغيرة = لمسة احترافية؛ قفزات كبيرة = مظهر مصطنع.

تراكيب عدة مرشحات

إعلان واحد يمكن أن يجمع النغمة واللون والنعومة. الترتيب قد يهم في التراكيب المعقّدة — اكتب من اليسار لليمين كما تريد المظهر وتحقّق في المتصفح.

تراكيب saturate و hue-rotate و blur خفيف

css

.sticker {
filter: saturate(1.35) hue-rotate(12deg) blur(0.3px);
}

.sticker.is-print {
filter: grayscale(0.15) contrast(1.1);
}

ابدأ بدالة أو اثنتين. أضف المزيد فقط عند الحاجة — كل مرشح إضافي يزيد عمل GPU على المساحات الكبيرة.

`drop-shadow()` مقابل `box-shadow`

box-shadow يتبع صندوق الحدود. drop-shadow() يتبع silhouette الألفا — مثالي لـ PNG شفاف ولأيقونات يجب أن يلتف الظل حول الشكل لا مستطيلاً.

ظل أيقونة بـ drop-shadow

css

.icon-glow {
width: 2.5rem;
height: 2.5rem;
filter: drop-shadow(0 4px 6px rgba(15, 23, 42, 0.35));
}

.icon-glow:hover {
filter: drop-shadow(0 6px 10px rgba(37, 99, 235, 0.45));
}

drop-shadow() لا يدعم inset كما box-shadow. لارتفاع بطاقة «غائرة»، ابقَ على box-shadow من درس Effects.

backdrop-filter — تمويه ما خلف العنصر

backdrop-filter يؤثر على المحتوى الظاهر من خلف عنصر شبه شفاف (زجاج ضبابي). يحتاج العنصر خلفية تسمح بالرؤية؛ وإلا لا يوجد ما يُعيَّن.

فكرة: على header لاصق فوق hero مزدحم — background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(10px);. الدعم واسع في المتصفحات الحديثة؛ احتفظ بخلفية صلبة كـ fallback إن كان blur اختيارياً.

opacity داخل المرشح مقابل خاصية `opacity`

filter: opacity(0.5) يخفّي الطبقة المفلترة. خاصية opacity تخفّي العنصر وتنشئ مجموعة تركيب غالباً تؤثر على stacking والأبناء. عندما تريد «التحكم كله مع الأبناء يتلاشى معاً»، الخاصية opacity أوضح. استخدم opacity() داخل المرشح عندما تكون جزءاً من سلسلة مرشحات مع blur أو تعديل لون.

جرّب بنفسك

ضع filter: grayscale(1) على صورة بطاقة؛ استعد بـ grayscale(0) على :hover مع transition: filter 0.2s ease.
ليّن طبقة خلفية بـ blur(8px)؛ اترك نص المقدّم بلا filter.
عدّل صورة بـ brightness(1.1) contrast(1.05)؛ ثم ارجع كليهما نحو 1 حتى يبدو طبيعياً.
ركّب saturate(1.4) hue-rotate(20deg) على sticker؛ أزل دالة واحدة وقارن.
ظلّل أيقونة PNG شفافة بـ drop-shadow(...)؛ قارن مع box-shadow على صندوق مربّع.
اختياري: شريط ضبابي بـ background شبه شفاف + backdrop-filter: blur(12px).

أخطاء شائعة

blur() قوي على قسم ضخم من الصفحة فيه نص مقروء
توقع inset من drop-shadow() مثل box-shadow
استخدام filter: opacity() بينما opacity على العنصر أوضح
تحريك مرشحات ثقيلة على صور كبيرة في كل إطار scroll دون مراعاة الأداء
backdrop-filter على خلفية معتمة تماماً — لا يظهر شيء من الخلف فلا يظهر «الزجاج»

الخلاصة

filter يغيّر مظهر البكسلات المرسومة؛ تدفّق التخطيط يبقى
اربط blur و brightness و contrast و grayscale و saturate وغيرها في قيمة واحدة
فضّل drop-shadow() للظلال على شكل الألفا؛ box-shadow لارتفاع الصندوق
backdrop-filter يضبّب ما يظهر من خلف طبقة شبه شفافة
هنا ينتهي Effects & Motion؛ الوحدة التالية Modern Toolkit — تبدأ بمتغيّرات CSS

🧠 اختبر معرفتك

جاهز للبدء

اختبر معرفتك

تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع

❓

الأسئلة

🎯

70%

للنجاح

♾️

∞

الوقت

🔄

∞

المحاولات

📝 التعليمات

اقرأ كل سؤال بعناية
اختر أفضل إجابة لكل سؤال
يمكنك إعادة الاختبار عدة مرات كما تريد
سيتم عرض تقدمك في الأعلى

اللغة