backdrop-filter للزجاج المصنفر
أنشئ تأثيرات ضبابية للزجاج المصنفر على العناصر الموضوعة فوق محتوى آخر باستخدام backdrop-filter
backdrop-filter للزجاج المصنفر درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.
ما هو backdrop-filter؟
تطبّق backdrop-filter تأثيرات رسومية على المنطقة خلف العنصر بدلًا من تطبيقها على العنصر نفسه. ويجب أن يتضمن العنصر قدرًا من الشفافية، مثل خلفية ذات alpha أقل من 1 أو عدم وجود خلفية، حتى يظهر الجزء الخلفي بعد تطبيق التصفية عليه.
تأثير الزجاج المصنفر
النمط الكلاسيكي للزجاج المصنفر:
<div class="bg-wrapper">
<div class="glass-card">Frosted Glass Card</div>
</div>
بادئة -webkit-backdrop-filter
يتطلب Safari البادئة -webkit-backdrop-filter. أدرجها دائمًا إلى جانب الخاصية القياسية لدعم المتصفحات المختلفة.
دوال التصفية المتاحة
تدعم backdrop-filter الدوال نفسها التي تدعمها filter: blur() وbrightness() وcontrast() وgrayscale() وsaturate() وhue-rotate() وsepia() وdrop-shadow().
<div class="bg-wrapper">
<div class="modal-overlay"></div>
</div>
زجاج مصنفر داكن
نسخة داكنة للطبقات التراكبية والنوافذ المنبثقة:
<div class="bg-wrapper">
<div class="dark-glass">Dark Frosted Panel</div>
</div>
متطلب سياق التكديس
تنشئ backdrop-filter سياق تكديس. ويجب أن يُركَّب العنصر فوق الجزء الخلفي — أي يجب أن يكون أعلى المحتوى الآخر في ترتيب التكديس، وليس بالضرورة وفق z-index، بل وفق ترتيب الرسم.
أداء backdrop-filter
يُعد استخدام backdrop-filter: blur() بقيم كبيرة مكلفًا — إذ يجبر المتصفح على رسم الخلفية في تمريرة منفصلة. استخدم قيم تمويه مقدارها 20px أو أقل للحفاظ على أداء جيد في الأجهزة المحمولة. وتجنب استخدامه على المحتوى الذي يُعاد رسمه باستمرار.
نافذة منبثقة بطبقة زجاجية مصنّفة
مربع حوار منبثق بطبقة تراكبية من الزجاج المصنفر:
<div class="modal-backdrop">
<div class="modal">Modal Content</div>
</div>
تنقّل ثابت بزجاج مصنفر
شريط تنقّل ثابت من الزجاج المصنفر:
<div class="bg-wrapper">
<nav class="navbar">Sticky Nav</nav>
</div>
دعم المتصفحات
تحظى backdrop-filter بالدعم في Chrome 76 والإصدارات الأحدث، وFirefox 103 والإصدارات الأحدث، وSafari 9 والإصدارات الأحدث (webkit). أدرج دائمًا البادئة -webkit-. راجع caniuse.com للاطلاع على البيانات الحالية، ووفّر بديلًا معتمًا للمتصفحات غير المدعومة.
بديل معتم
وفّر خلفية معتمة كبديل للمتصفحات التي لا تدعم backdrop-filter:
<div class="bg-wrapper">
<div class="glass">Fallback-aware glass panel</div>
</div>
تحقق سريع
ما الذي يجب أن يتضمنه العنصر حتى يظهر تأثير backdrop-filter؟
خلاصة
تطبّق backdrop-filter تأثيرات التصفية على ما يوجد خلف العنصر. ويحتاج العنصر إلى الشفافية حتى يظهر التأثير من خلاله. ويستخدم تأثير الزجاج المصنفر الكلاسيكي blur() + saturate(). أدرج دائمًا -webkit-backdrop-filter لدعم Safari. ووفّر بديلًا معتمًا باستخدام @supports.
تعلم CSS مع معلم ذكاء اصطناعي — مجانًا
اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.
- الدورات
- 40
- الدروس
- 159
الأسئلة الشائعة
هل درس «backdrop-filter للزجاج المصنفر» مجاني؟
نعم — نص درس «backdrop-filter للزجاج المصنفر» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.
ماذا ستتعلم في «backdrop-filter للزجاج المصنفر»؟
أنشئ تأثيرات ضبابية للزجاج المصنفر على العناصر الموضوعة فوق محتوى آخر باستخدام backdrop-filter تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟
لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.
كم من الوقت يستغرق درس «backdrop-filter للزجاج المصنفر»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟
نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- filter: blur وbrightness وcontrast وgrayscale
- backdrop-filter للزجاج المصنفر
- mix-blend-mode لمزج الطبقات
- خاصية isolation