شرح صفوف ومحتوى الفقرة
يلخص الجدول المرجعي الآتي دوال خاصية 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 لبناء مشاهد حركية متعددة المراحل.