مولد Glassmorphism لـ CSS
مرشد
مولد Glassmorphism لـ CSS
تعديل تأثيرات الزجاج المبردة السطحية ب편ة باستخدام محرر بصري حي. قم بتعديل الغلاف الضبابي، شفافية الخلفية، الشفافية للحدود، نصف قطر الحدود، وظلال الحدود في الوقت الفعلي، ثم راقب النتيجة الفورية على مراجعات ملونة. نسخ الكود CSS المولّد أو شريط نص HTML+CSS كامل جاهز للاستخدام في مشروعك، مع prefixes متقاسم بين المتصفحات. --- *(Note: The Arabic translation follows the original structure closely, including technical terms like "vendor prefixes" and maintaining formal language for professional use.)*
كيفية استخدام
استخدم مسارح لتعديل خصائص الغرافة الزجاجية: التشتت الخلفي (backdrop blur) يحدد شدة الزجاج المملوء، لون الخلفية والألفا (alpha) يحددان الطين، والحدود (border) تضيف حافة زجاجية خفيفة. اختر من 6 خلفيات تدرجات وتقلب الأشكال المتحركة لرؤية كيف يتفاعل التشتت مع المحتوى خلف الكارت الزجاجي. اختر ميزة مسبقة مثل الزجاج الخفيف أو الزجاج الداكن كبداية سريعة، ثم تعدلها بدقة. نسخ الماسح الضوئي (CSS) أو شريط HTML+CSS الكامل عندما تكون راضيا عن النتيجة.
خصائص
- معاينة مباشرة استكشاف تأثير الغرافيزمomorphism في الوقت الحقيقي أثناء تعديل أي تحكم
- الضبابية خلفية – أداة لاختيار من 0 إلى 40 بكسل لتحديد شدّة شفافة الزجاج المملوء
- فondo RGBA اختيار ألوان مع مسارح لشفافية منفصلة للتحكم الدقيق بالشفافية
- **إعدادات الحدود والظلال** – ضبط عرض حافة، لونها، شفافية، نصف قطرها، بالإضافة إلى ظل مربع خيارًا
- الخلفية التدرجية – ستة ألوان تدرجات ملونة مع أشكال متحركة خيارية لتوضيح تأثير التشتت
- مجموعات الأنماط – خيارات الإعدادات في خطوة واحدة: زجاج ناعم، زجاج مغطى بالثلج، زجاج داكن، وزجاج ملون.
- بادئات البائع – تم إنشاء الستيل CSS مع تطبيق **backdrop-filter** لـ **WebKit** (لتوافق Safari) *(Note: The literal translation of "includes" in this context would be "يحتوي على" but "تم إنشاء" is more idiomatic for technical documentation.)*
- نسخ CSS أو HTML + CSS – احصل فقط على خصائص الستيل أو شظية كارت كاملة جاهزة للنسخ --- *(Note: The translation above follows the literal phrasing while maintaining natural Arabic syntax. If you need a more polished version, let me know.)*
التعليمات
-
ما هو الزجاجية في CSS؟
التصميم المرئي **المُزيف** (المُعنى الأصلي) هو اتجاه في تصميم الواجهة المستخدم، يخلق مظهرًا مثل الزجاج المملصق باستخدام `backdrop-filter` مع تأثير التشتت (`blur`) مُدمجًا مع لون خلفية شبه شفاف. يتسبب التشتت في ظهور المحتوى خلف العنصر ناعمًا ومُشتتًا بينما يُضيف الخلفية الشفافة طناً لونيًا. تم Popularization من قبل نظام macOS Big Sur و Windows 11 Design Fluent، حيث يخلق **المزيف** العمق والهيكل البصرية عن طريق السماح للعناصر الخلفية بالظهور جزئيًا. الخصائص الأساسية لـ CSS هي: - `backdrop-filter: blur()` - `background: rgba()` - عادةً ما يتم إضافة حافة خفيفة لتحسين حواف الزجاج.
-
ما هو عدد المتصفحات التي تدعم **backdrop-filter**؟
الفلتر الخلفي (`backdrop-filter`) يدعمه Chrome من الإصدار 76 وما بعده، Safari من الإصدار 9 وما بعده (مع إضافة المسبار `-webkit-`)، Edge من الإصدار 79 وما بعده، Firefox من الإصدار 103 وما بعده، وكذلك جميع navegadores المحمولة الحديثة. يتطلب Safari إضافة مسبار `-webkit-backdrop-filter` الذي يوفره هذا المولد تلقائيًا. الفجوة الوحيدة الملحوظة هي في إصدار قديم لFirefox قبل 103 وInternet Explorer الذي لا يدعمها على الإطلاق. بالنسبة للبروغراف غير المدعوم، يتم توفير لون خلفية شبه شفافة لتأثير طبقة زخرفة ملونة فقط دون اللؤلؤة. بشكل عام، تدعم جميع navegadores أكثر من 95٪ من مستخدمي العالم اعتبارًا من عام 2026.
-
كيف يختلف **backdrop-filter** عن **الفلتر العادي** في CSS؟
الخصائص المرئية مثل التشتت تُطبق على العنصر نفسه وأبنائه. يستخدم **backdrop-filter** نفس التأثيرات فقط على المنطقة خلف العنصر، مما يترك محتوى العنصر واضحًا ومقررًا. هذا هو ما يخلق تأثير **الغشاء البلوري**: النص على بطاقة الزجاج يبقى حريصًا بينما الخلفية خلفها تبدو مشوشة. إذا استخدمت `filter: blur()` بدلاً من ذلك، سيصبح أيضًا النص داخل البطاقة مشوشًا وغير قابل للقراءة. يستخدم **backdrop-filter** بشكل أساسي إنشاء تأثير نافذة حيث تنظر من خلال زجاج مفرش.
-
ما يجعل تصميم المورفوسية الزجاجية جيدة؟
الشفافية الزجاجية الفعالة تتطلب خلفية ملونة أو مفصلة لجعل الغبار مرئيًا. الخلفية البيضاء الصلبة خلف الزجاج تبدو متشابهة مع بطاقة عادية. استخدم قيم التشتت بين 8 و20 بكسل في معظم الحالات. حافظ على شفافية الخلفية بين 10 و30 بالمائة حتى يمكن رؤية المحتوى خلفه بشكل جزئي. أضف حافة ضوئية خفيفة عند شفافية بيضاء بين 10 و30 بالمائة لتحسين حواف الزجاج. تجنب stacking عدة طبقات زجاجية حيث يزيد كل تطبيق filer للخلفية من تكلفة الأداء. تأكد من أن contraste النص يتوافق مع معايير الوصول، لأن الخلفيات شبه الشفافة يمكن أن تقلل من قابلية القراءة.
تثبيت ملحقاتنا
أضف أدوات IO إلى متصفحك المفضل للوصول الفوري والبحث بشكل أسرع
恵 وصلت لوحة النتائج!
لوحة النتائج هي طريقة ممتعة لتتبع ألعابك، يتم تخزين جميع البيانات في متصفحك. المزيد من الميزات قريبا!
أدوات يجب تجربتها
عرض الكلشارك
ساعدنا على الاستمرار في تقديم أدوات مجانية قيمة
