كيف تصنع تأثير الزجاج المصنفر في CSS (مولِّد الزجاجية)

الزجاجية (Glassmorphism) هي مظهر «الزجاج المصنفر» الذي اجتاح واجهات الاستخدام الحديثة: ألواح شبه شفافة تُمَوِّه كل ما خلفها، مصبوغة بلون خافت، ومُحاطة بحدّ ناعم ومضيء. لقد رأيتَه في مركز التحكم في نظام macOS، وفي أسطح Mica في نظام Windows 11، وفي عددٍ لا يُحصى من لوحات التحكم وبطاقات تسجيل الدخول وجداول الأسعار. عند تنفيذه بإتقان يضيف عمقاً وتدرّجاً بصرياً دون ظلال ثقيلة، لكن كتابته يدوياً تعني تكديس عدّة خصائص CSS يَسهُل الخطأ فيها.

تُحوِّل أداتنا المجانية مولِّد الزجاجية في CSS ذلك التكديس المعقّد إلى بضعة مُمرِّرات. تسحب التمويه والشفافية والصبغة والتشبّع والحدّ والاستدارة، وتشاهد معاينة فورية تعرض تأثير الزجاج المصنفر فوق خلفية متدرّجة الألوان، ثم تنسخ كوداً جاهزاً للإنتاج — مع بادئة -webkit-ونسخة احتياطية للمتصفحات غير الداعمة. كل شيء يعمل داخل متصفحك؛ ولا يُرفَع أي شيء إلى الخادم.

ما الذي يجعل الزجاج يبدو زجاجاً حقاً

تأثير الزجاج المصنفر ليس خاصية واحدة، بل تفاعلٌ بين أربعة مكوّنات، وإغفال أيٍّ منها هو سبب أن أغلب المحاولات اليدوية تبدو مسطّحة أو موحلة:

أولاً، تمويه الخلفية. بطل الزجاجية هو الخاصية backdrop-filter: blur(...). فهي — على عكس filter العادية التي تُمَوِّه العنصر نفسه — تُمَوِّه كل ما رُسِم خلف العنصر، وهذا ما يخلق إحساس النظر عبر زجاج مصنفر. القيمة بين 8 و16 بكسل تبدو كزجاج؛ وما فوقها يصبح ضباباً معتماً، وما دونها يختفي معه التأثير.

ثانياً، تعبئة شبه شفافة. يحتاج اللوح إلى خلفية بشفافية منخفضة — عادةً صبغة بيضاء أو فاتحة بنسبة 10٪ إلى 25٪. هذا يلتقط قليلاً من الضوء دون إخفاء المحتوى المُمَوَّه تحته. الشفافية التامة لا تُظهر شيئاً، والعتامة الكاملة تقتل التمويه.

ثالثاً، حدٌّ خافت أكثر إشراقاً. حواف الزجاج الحقيقية تلتقط الضوء. حدّ بسماكة 1 بكسل بنفس الصبغة وبشفافية أعلى قليلاً (نحو 30٪ إلى 50٪) يمنح اللوح حافة واضحة ويُبرز البُعد الثلاثي. إغفال الحدّ هو السبب الأكثر شيوعاً في أن تبدو بطاقة الزجاج رخيصة.

رابعاً، ظلٌّ ناعم. ظلٌّ واسع منخفض الشفافية مثل 0 8px 32px rgba(0,0,0,0.18) يرفع اللوح عن الخلفية ويؤكّد أنه يطفو أمام المحتوى الذي يُمَوِّهه.

الكود الذي يُنتجه المولِّد

اضبط عناصر التحكم لتُخرِج الأداة كتلةً يمكنك لصقها مباشرةً في ملف الأنماط لديك. تبدو النتيجة المعتادة هكذا:

background: rgba(255, 255, 255, 0.20); border-radius: 16px; box-shadow: 0 8px 32px 0 rgba(0,0,0,0.18); -webkit-backdrop-filter: blur(12px) saturate(120%); backdrop-filter: blur(12px) saturate(120%); border: 1px solid rgba(255,255,255,0.40);

لاحظ خاصية saturate(120%) بجانب التمويه. رفع التشبّع قليلاً يجعل الألوان المتسرّبة عبر الزجاج تبدو أغنى وأكثر حيوية — لمسة صغيرة تفصل بين لوح زجاج مصقول ولطخة رمادية. يتيح لك المولِّد رفعه حتى 300٪ أو خفضه إلى مظهر فولاذي خافت التشبّع.

لماذا تهمّ بادئة -webkit- والنسخة الاحتياطية

لا يزال متصفح Safari — بما في ذلك Safari على iOS الذي يمثّل شريحة ضخمة من زيارات الجوال — يتطلّب بادئة -webkit-backdrop-filter لكي يظهر التأثير. إن شحنتَ الخاصية بلا بادئة فستبدو بطاقتك الزجاجية مكسورة على كل iPhone. يُخرِج المولِّد السطرين دائماً، فلا حاجة لأن تتذكّر ذلك.

لا تقلّ النسخة الاحتياطية أهمية. فبعض المتصفحات وبعض أوضاع تقليل الشفافية لا تدعم backdrop-filter إطلاقاً. وبدون نسخة احتياطية يرى هؤلاء المستخدمون لوحك شبه الشفاف فوق خلفية مزدحمة فيصبح النص غير مقروء. تُغلِّف الأداة خلفية صلبة أعلى عتامةً داخل استعلام @supports notبحيث يعود اللوح — عند عدم دعم التمويه — إلى تعبئة مقروءة وأكثر عتامة. هذا هو الفرق بين تصميم يتدهور بأناقة وآخر ينكسر.

نصائح لزجاج مقروء وسهل الوصول

الزجاج جميل لكنه يصارع المقروئية. ضع في حسبانك ما يلي: ضع الزجاج فوق صور أو تدرّجات ذات تباين كافٍ، ولا تضعه أبداً فوق نصوص مزدحمة. أبقِ نص المتن على الزجاج بلون عالي التباين وفكّر في ظلّ نصّي خفيف. احترم المستخدمين الذين يُفعِّلون «تقليل الشفافية» على مستوى النظام — تتكفّل النسخة الاحتياطية بجزء من ذلك لكن اختبره. ولا تُكدِّس زجاجاً فوق زجاج؛ فالتمويه يتضاعف ويتحوّل المشهد إلى عجينة.

صمّم تأثير الزجاج المصنفر الآن

توقّف عن لصق مقتطفات نصف منسيّة من صفحات CodePen قديمة. افتح مولِّد الزجاجية، واضبط التمويه والصبغة حتى تبدو المعاينة كما تريد، ثم انسخ الكود. الأداة مجانية، ولا تتطلّب تسجيلاً، وتعمل بالكامل داخل متصفحك. ادمجها مع مولِّد التدرّجات في CSS لتصميم الخلفية التي سيستقرّ عليها زجاجك، ومع مولِّد ظل الصندوق في CSS إن أردت ضبط الرفع بدقّة.