Developer Tools
Web Utilitiesمولد Glassmorphism
قم بإنشاء CSS لتأثيرات بطاقة الزجاج المصنفر مع ضبط قابل للتكوين للضبابية والشفافية والحدود. معاينة مباشرة ونسخ كود CSS جاهز للاستخدام.
إعدادات الزجاج
المعاينة وكود CSS
.glass-card {
background: rgba(255, 255, 255, 0.18);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 16px;
}blur(12px)أدوات ذات صلة
حول هذه الأداة
كيف تعمل
- اضبط شدة الضبابية للتحكم في عمق تأثير الزجاج المصنفر
- اضبط مستوى الشفافية باستخدام شريط تمرير الشفافية
- اختر لون الحد وشفافيته لإبراز حافة الزجاج
- قم بتمكين أو تعطيل تدرج خلفية خفي للعمق
- اختر بين أنماط الزجاج الداكن والفاتح
- انسخ CSS المُولَّد والصقه مباشرةً في مشروعك
حالات الاستخدام الشائعة
- تصميم بطاقات واجهة مستخدم حديثة بجماليات الزجاج المصنفر
- إنشاء تراكبات قسم البطل على خلفيات الصور
- بناء مربعات حوار نمطية ونوافذ منبثقة بعمق
- تنسيق أشرطة التنقل والأشرطة الجانبية بتأثير زجاجي
- إنشاء عناصر صفحة هبوط بمظهر متميز
- إضافة عمق بصري للوحات التحكم وواجهات التحليلات
الأسئلة الشائعة
ما هو الـ Glassmorphism؟
الـ Glassmorphism هو اتجاه حديث في تصميم واجهة المستخدم يخلق مظهراً زجاجياً مصنفراً من خلال الجمع بين خلفية شفافة جزئياً وفلتر ضبابية الخلفية وحد دقيق وأحياناً ظل ناعم. يمنح العناصر مظهراً متعدد الطبقات وغنياً بالعمق شائعاً في صفحات الهبوط ولوحات التحكم والبطاقات.
كيف تعمل خاصية CSS backdrop-filter؟
تطبق خاصية CSS backdrop-filter تأثيرات رسومية مثل الضبابية على المنطقة خلف عنصر ما. عند دمجها مع خلفية شفافة جزئياً، تنتج مظهر الزجاج المصنفر. يُعدّ البادئة -webkit-backdrop-filter ضرورية لدعم Safari الكامل.
ما المتصفحات التي تدعم backdrop-filter؟
يدعم backdrop-filter في جميع المتصفحات الحديثة: Chrome وEdge وFirefox (v103+) وSafari وOpera. تغطي البادئة -webkit- إصدارات Safari القديمة. لا يدعم Internet Explorer هذه الخاصية. يتضمن CSS المُولَّد كلاً من الإصدار القياسي وإصدار البادئة لأقصى توافق.
ما قيمة الضبابية الأفضل لتأثير Glassmorphism؟
تنتج قيمة ضبابية بين 8 بكسل و20 بكسل عادةً أفضل مظهر للزجاج المصنفر. تبدو القيم الأقل من 4 بكسل حادة جداً، بينما قد تبدو القيم الأعلى من 30 بكسل ضبابية بشكل مفرط. تعتمد القيمة المثالية على تعقيد الخلفية — الخلفيات التفصيلية الغنية تستفيد من قيم ضبابية أعلى.
لماذا لا يظهر تأثير الزجاج على خلفية بيضاء صلبة؟
يتطلب Glassmorphism خلفية ملونة أو معقدة لتكون مرئية. إذا كانت الخلفية خلف البطاقة بيضاء عادية أو لون صلب واحد، فليس للضبابية والشفافية محتوى مرئي للمزج معه. استخدم خيارات تدرج الخلفية أو الصورة لإضافة خلفية ملونة للمعاينة.
كيف أستخدم CSS المُولَّد في مشروعي؟
انسخ كود CSS باستخدام زر نسخ CSS والصقه في ورقة الأنماط الخاصة بك. طبّق الفئة .glass-card على عنصر HTML الخاص بك. تأكد من أن الحاوية الأم تحتوي على خلفية ملونة أو صورة خلفية محددة المواضع خلف بطاقة الزجاج حتى يظهر التأثير بشكل صحيح.
ما الفرق بين شفافية الزجاج وشفافية الحد؟
تتحكم شفافية الزجاج في مدى شفافية خلفية البطاقة نفسها — القيم الأقل تتيح ظهور المزيد من الخلفية من خلالها. تتحكم شفافية الحد بشكل مستقل في مدى ظهور إضاءة حافة البطاقة، وهي عادةً خط أبيض شبه شفاف يمنح حافة الزجاج بريقاً واقعياً.
هل يمكنني إضافة تدرج للبطاقة الزجاجية بدلاً من لون صلب؟
نعم! قم بتفعيل تبديل تدرج الخلفية في إعدادات الزجاج. يمكنك بعد ذلك اختيار لونين وزاوية لإنشاء خلفية تدرج خطي للبطاقة الزجاجية. يُطبَّق شريط تمرير الشفافية على كلتا نقطتَي التوقف في التدرج، مع الحفاظ على شفافية الزجاج المصنفر.
ما الأنماط الجاهزة المتاحة؟
تتضمن الأداة ستة أنماط جاهزة: الزجاج الفاتح (مصنفر أبيض كلاسيكي)، الزجاج الداكن (لوحة شبه شفافة داكنة)، المصنفر (ضبابية قوية وشفافية عالية)، الملون (تدرج زجاجي بنفسجي وردي)، المينيمال (طبقة زجاجية بالكاد مرئية)، والنابض (زجاج سماوي أزرق مخضر على خلفية جريئة).
كيف أعاين تأثير الزجاج على صورة الخلفية الخاصة بي؟
قم بتبديل مفتاح مشهد الخلفية إلى URL الصورة والصق رابطاً مباشراً للصورة. ستعرض المعاينة صورتك كخلفية خلف البطاقة الزجاجية. تعمل عناوين URL للصور التي يمكن الوصول إليها علنياً بشكل أفضل.
هل يؤثر Glassmorphism على الأداء؟
قد يكون backdrop-filter مكثفاً على وحدة معالجة الرسومات، خاصةً مع قيم ضبابية عالية أو العديد من العناصر الزجاجية على نفس الصفحة. للحصول على الأداء الأفضل، احتفظ بقيم الضبابية معقولة (أقل من 20 بكسل)، وتجنب تكديس طبقات زجاجية كثيرة، واختبر على الأجهزة ذات الطاقة المنخفضة.
هل يمكنني استخدام Glassmorphism للأزرار وأشرطة التنقل؟
بالتأكيد. يعمل Glassmorphism بشكل جيد على الأزرار وأشرطة التنقل والأشرطة الجانبية ومربعات الحوار وتلميحات الأدوات وأي عنصر واجهة مستخدم عائم. احتفظ بنصف قطر الحد مناسباً لنوع العنصر وضمان تباين ألوان كافياً بين النص وخلفية الزجاج لتسهيل القراءة.