في هذا الدرس 8تصفّح المواضيع
تطبق خاصية filter في CSS معالجة رسومية فورية تشمل ضبط الإضاءة والتدرج اللوني والتمويه الضبابي على العنصر ومحتواه وإطاره مباشرة قبل رسمه النهائي على الشاشة. وبما أن هذه المعالجة غير إتلافية وتتم لحظياً في ذاكرة المتصفح، يبقى ملف الصورة الأصلي على الخادم سليماً دون تعديل ويمكن استعادة مظهره الطبيعي في أي لحظة عبر القيمة filter: none.
تساعد دوال الإضاءة والأحادية اللونية على توحيد الهوية البصرية لصور البطاقات وشعارات الشركاء المتنوعة:
- تحول دالة
grayscale(100%)ألوان الصورة بالكامل إلى التدرج الرمادي المحايد بينما تبقيها0%بألوانها الأصلية، وتمنح دالةsepia(100%)طابعاً دافئاً قديماً. - تضبط دالة
brightness()مستوى السطوع العام حول القيمة الأصلية100%، فالقيمة75%تهدئ إضاءة الصورة والقيمة115%تزيد إشراقها. - تعزز دالة
contrast()الفارق بين المناطق المضيئة والداكنة فوق خط الأساس100%.
.partner-photo {
filter: grayscale(100%) brightness(92%);
transition: filter 0.3s ease;
}
.partner-photo:hover {
filter: grayscale(0%) brightness(104%) contrast(108%);
}تكتمل منظومة التحكم اللوني بخمس دوال إضافية: تموه blur(4px) تفاصيل العنصر بنصف قطر يُقاس بالبكسل، وتزيد saturate(150%) تشبع الألوان وحيويتها فوق 100%، وتدير hue-rotate(90deg) صبغة كل بكسل حول عجلة الألوان ذات 360 درجة، وتعكس invert(100%) القيم اللونية بين الفاتح والداكن لمعالجة الأيقونات الأحادية، بينما تطبق opacity(80%) شفافية مدمجة ضمن خط المعالجة الرسومي.
عند إدراج شعار متجه مفرغ بصيغة SVG أو أيقونة ذات خلفية شفافة، تتجاهل خاصية box-shadow المناطق المفرغة وترسم ظلاً مستطيلاً جامداً حول الإطار الخارجي للصورة. في المقابل، تفحص دالة filter: drop-shadow(0 8px 12px rgba(15, 23, 42, 0.35)) قناة الشفافية لكل بكسل فترسم ظلاً متطابقاً يتبع انحناءات الدرع أو الشعار بدقة تامة.
.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));
}يمكنك تركيب عدة دوال معاً في سطر filter واحد عبر الفصل بينها بمسافات فقط دون فواصل مثل filter: contrast(115%) grayscale(100%) sepia(35%). ولأن كل دالة تعالج النتيجة اللونية الخارجة من الدالة التي تسبقها من اليسار إلى اليمين، فإن تغيير الترتيب يغير المظهر النهائي؛ فوضع grayscale(100%) في النهاية يجرد الصورة من الدفء اللوني الذي أضافته sepia(35%) قبلها.
بينما يؤدي تطبيق filter: blur(10px) على البطاقة إلى طمس نصوصها الداخلية وإفساد قراءتها، تترك خاصية backdrop-filter: blur(10px) نصوص البطاقة حادة تماماً وتموه فقط المشهد الواقع خلفها لإنتاج تأثير الزجاج الضبابي الأنيق في الأشرطة العلوية. احرص دائماً على إقرانها بلون خلفية شبه شفاف بصيغة rgba() ليظهر التمويه من خلاله، مع تأمين خلفية احتياطية مقروءة وتفعيل الزجاج داخل استعلام الدعم @supports (backdrop-filter: blur(10px)).
.glass-panel {
background-color: rgba(255, 255, 255, 0.92);
}
@supports (backdrop-filter: blur(10px)) {
.glass-panel {
background-color: rgba(255, 255, 255, 0.68);
backdrop-filter: blur(10px);
}
}مختبر المرشحات البصرية التفاعلي
من الأخطاء الشائعة للمبتدئين وضع filter: blur(8px) فوق أرقام الحسابات أو رموز التحقق أو الفقرات المحجوبة مع إرسال النص الحقيقي كاملاً داخل شيفرة HTML. فبمجرد فتح أدوات المطور في المتصفح وإلغاء تفعيل خاصية filter، تنكشف البيانات الأصلية فوراً بوضوح تام؛ لذا يجب أن يتم حجب البيانات الحساسة أو ترميزها في الخادم قبل إرسال الصفحة للمتصفح.
يلخص الجدول المرجعي الآتي دوال خاصية filter العشر إلى جانب خاصية مرشح الخلفية backdrop-filter:
| الدالة أو الخاصية | القيمة المحايدة | مثال عملي والأثر البصري |
|---|---|---|
blur() | 0px | blur(6px) تمويه ضبابي بوحدات الطول فقط |
brightness() | 100% أو 1 | brightness(115%) رفع أو خفض الإضاءة العامة |
contrast() | 100% أو 1 | contrast(120%) إبراز التباين بين الفاتح والداكن |
grayscale() | 0% | grayscale(100%) تحويل الألوان إلى رمادي محايد |
sepia() | 0% | sepia(80%) إضفاء صبغة بنية دافئة كلاسيكية |
saturate() | 100% أو 1 | saturate(150%) تعزيز تشبع الألوان وحيويتها |
hue-rotate() | 0deg | hue-rotate(90deg) تدوير الألوان حول عجلة الصبغة |
invert() | 0% | invert(100%) عكس القنوات اللونية للأيقونات |
opacity() | 100% أو 1 | opacity(80%) ضبط الشفافية ضمن سلسلة المرشح |
drop-shadow() | بلا ظل | drop-shadow(0 6px 10px rgba(0,0,0,0.3)) ظل يتبع حدود الشفافية |
backdrop-filter | none | backdrop-filter: blur(10px) زجاج ضبابي خلف سطح rgba() |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
في ملخص الدرس أتقنت دوال filter العشر ورسم ظلال الأيقونات المفرغة عبر drop-shadow() وتركيب المرشحات المتتالية وتصميم الزجاج الضبابي بخاصية backdrop-filter مع إدراك أن التمويه البصري لا يحجب البيانات الحساسة. وفي الخطوة التالية ستنتقل إلى درس المؤثرات الحركية في لغة CSS لبناء مشاهد حركية متعددة المراحل.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Alpha-Contour Drop Shadow ظل الحدود المفرغة
- دالة مرشح تتتبع البكسلات غير الشفافة في الشعارات والأيقونات المفرغة بدلاً من إطارها المستطيل.
- للمراجعة
- 02 Backdrop Filter مرشح الخلفية الضبابي
- خاصية تعالج المشهد الواقع خلف العنصر شبه الشفاف لإنتاج تأثير الزجاج الضبابي دون تمويه نصوصه.
- للمراجعة
- 03 Filter Chaining تسلسل المرشحات
- جمع عدة دوال مرشح مفصولة بمسافات بحيث تُنفذ بالتتابع من اليسار إلى اليمين.
- للمراجعة
- 04 Hue Rotation تدوير الصبغة اللونية
- إزاحة ألوان البكسلات حول عجلة الألوان الدائرية البالغة 360 درجة باستخدام وحدة الدرجات.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات3
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 SVG SVG
- Scalable Vector Graphics
- تنسيق أيقونات متجهة شفافة يبرز معها تفوق دالة drop-shadow في تتبع حدود الشكل بدقة.
- للمراجعة
- 02 DOM DOM
- Document Object Model
- شجرة عناصر الصفحة الحية في المتصفح حيث تظل النصوص المموهة بصرياً مقروءة بالكامل في أدوات المطور.
- للمراجعة
- 03 RGBA RGBA
- Red Green Blue Alpha
- صيغة اللون شبه الشفاف اللازمة للسماح بظهور تأثير التمويه الخلفي عبر خاصية backdrop-filter.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
طبّق دالة drop-shadow داخل خاصية filter على أيقونة shield-icon.svg ليتبع الظل انحناءات الدرع بدقة.
-
نسق بطاقة فوق صورة الغروب بلون rgba احتياطي مع ترقيتها باستعلام @supports وخاصية backdrop-filter بقيمة 10px.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.