مولّد الزجاج الضبابي (Glassmorphism) بـ CSS

ما هي مولّد الزجاج الضبابي (Glassmorphism) بـ CSS؟

مولّد الزجاج الضبابي بـ CSS هو محرّر مرئي مجاني لأسلوب واجهة الزجاج الضبابي (glassmorphism)، مصمّم لمطوّري الواجهات الأمامية ومصممي المنتجات. اضبط مقدار التمويه وشفافية السطح وتشبع اللون وسماكة الحد ونصف قطر الزوايا وقوة الظل عبر حقول رقمية وأشرطة تمرير، ثم اختر لون صبغة من حقل اللون. تعرض لوحة المعاينة لوح الزجاج فوق خلفية متدرّجة زاهية في الوقت الفعلي، ويُولَّد كود CSS الكامل — باستخدام backdrop-filter وخلفية شبه شفافة وحد خفيف و box-shadow — لتنسخه. استخدمه لبناء بطاقات وأشرطة تنقّل ونوافذ منبثقة وطبقات زجاجية دون ضبط قيمة ألفا في rgba يدويًا أو تذكّر بادئة -webkit-backdrop-filter.

كيفية استخدام مولّد الزجاج الضبابي (Glassmorphism) بـ CSS

1. اضبط التمويه (بوحدة px) للتحكم في مدى ضبابية المنطقة خلف اللوح.
2. اخفض الشفافية لجعل الزجاج أكثر شفافية، أو ارفعها للحصول على سطح أكثر صلابة.
3. ارفع التشبع فوق 100% لإبراز ألوان الخلفية عبر الزجاج.
4. اختر لون صبغة من حقل اللون واضبط عرض الحد ونصف القطر والظل لإتمام المظهر.
5. راقب تحديث المعاينة فوق الخلفية في الوقت الفعلي أثناء تغيير كل قيمة.
6. انسخ كود CSS المُولَّد إلى ملف التنسيق الخاص بك — فهو يتضمّن بالفعل البديل -webkit-backdrop-filter.

أمثلة

تمويه 12, شفافية 25%, تشبع 120%, نصف قطر 16, حد 1, ظل 24

backdrop-filter: blur(12px) saturate(120%); background: rgba(255, 255, 255, 0.25); …

تمويه 8, شفافية 60%, تشبع 100%, نصف قطر 0, حد 1, ظل 8

backdrop-filter: blur(8px) saturate(100%); background: rgba(255, 255, 255, 0.6); …

صبغة #0f172a, تمويه 20, شفافية 30%, تشبع 140%, نصف قطر 24, ظل 40

backdrop-filter: blur(20px) saturate(140%); background: rgba(15, 23, 42, 0.3); …

الأسئلة الشائعة

ماذا يفعل backdrop-filter؟

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

لماذا يوجد عنصر تحكم في الشفافية؟

يحتاج تأثير الزجاج إلى خلفية شفافة جزئيًا حتى تظهر الخلفية المموّهة من خلالها. يضبط شريط الشفافية قيمة ألفا للون خلفية اللوح (rgba): القيم الأقل أكثر شفافية، والقيم الأعلى أكثر إعتامًا وصلابة.

هل يمكنني استخدام زجاج ملوّن أو داكن؟

نعم. اختر أي لون صبغة من حقل اللون — تمزجه الأداة في خلفية rgba، فيمكنك صنع زجاج دافئ أو بارد أو داكن. اجمع بين صبغة داكنة وشفافية أعلى للحصول على طبقات هادئة الطابع، أو أبقه أبيض للحصول على لوح ضبابي كلاسيكي.

هل سيعمل في كل المتصفحات؟

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

هل تُرفع بياناتي إلى أي مكان؟

لا. يعمل المولّد بالكامل في متصفحك باستخدام JavaScript — لا تُرسل ألوانك وقيمك أبدًا إلى خادم، فهو يعمل بخصوصية وحتى دون اتصال بالإنترنت بعد تحميل الصفحة.