صمم تأثيرات واجهة المستخدم العصرية للزجاج المصنفر. اضبط التمويه، الشفافية، والحدود، ثم انسخ كود CSS مباشرة إلى مشروعك. مجاناً 100%. لا يتطلب التسجيل.
تأثير الزجاج الزجاجي الضبابي العصري لتصميم ويب حديث.
تم بناؤها لضمان الخصوصية التامة والتنفيذ الفوري دون تعقيد. لا اشتراكات ولا قيود أو تسجيل حساب.
اضبط الضبابية والشفافية والتشبع في الوقت الفعلي فوق خلفية حيوية لمعاينة تأثير الزجاج فورًا.
ينشئ تلقائيًا كود backdrop-filter مع بادئة webkit لضمان التوافق عبر Safari وChrome وFirefox.
أنشئ فئات CSS قياسية أو ترجم تصميمك البصري فورًا إلى فئات أدوات مساعدة لـ Tailwind CSS.
التنفيذ بنسبة 100% على جانب العميل يعني إمكانية سحب شريط التمرير ورؤية تحديثات CSS الرياضية بدون أي تأخير.
قارن محركنا المحلي القائم على WebAssembly مقابل الأدوات السحابية القديمة.
| الميزة | Utiliome (متصفح محلي) | محولات السحابة القديمة |
|---|---|---|
| معاينة مباشرة | مساحة تفاعلية في الوقت الفعلي | مولدات أكواد ثابتة |
| مخرجات الكود | Vanilla CSS وفئات أدوات Tailwind | CSS فقط |
| التوافق | يضيف -webkit-backdrop-filter تلقائيًا | يتطلب إضافة البادئة يدويًا |
| التكلفة | مجاني دائمًا بدون إعلانات | جدران دفع للتخطيطات المميزة |
لا داعي لتثبيت أي برامج. يعمل كل شيء مباشرة داخل متصفح الإنترنت الخاص بك.
استخدم شريط تمرير الضبابية لتحديد مدى ضبابية عناصر الخلفية خلف بطاقة الزجاج الخاصة بك.
عدّل قناة الشفافية (alpha) للون الخلفية لإعطاء الزجاج درجة رمادية داكنة دقيقة أو مظهرًا أبيض ضبابيًا ساطعًا.
انقر على زر التصدير لنسخ مقتطف CSS الجاهز للإنتاج مباشرة إلى الحافظة.
إجابة سريعة: Glassmorphism هو اتجاه حديث في تصميم واجهات المستخدم يتميز بخلفيات شبه شفافة مع ضبابية عالية للخلفية (زجاج ضبابي)، وظلال متناغمة متعددة الطبقات، وحدود رفيعة. إنه يخلق شعورًا بالعمق الرأسي والتسلسل الهرمي.
نشأ Glassmorphism بقوة في macOS Big Sur وiOS وWindows 11 Fluent Design، وأصبح المعيار الفعلي لتطبيات الويب الحديثة والممتازة.
تعتمد الفلسفة الأساسية على "محور Z". من خلال جعل الطبقة العليا شبه شفافة وطم الطبقات الحيوية أسفلها بشدة، يحدد المصممون التسلسل الهرمي البصري دون الاعتماد على ظلال إسقاط صلبة وحاد. يمنح ذلك المستخدم سياقًا عما يحدث "خلف" النافذة النشطة حاليًا.
إجابة سريعة: تطبق خاصية backdrop-filter في CSS تأثيرات رسومية مثل الضبابية أو تغيير الألوان على المنطقة الواقعة خلف العنصر مباشرةً. على عكس 'filter' القياسية التي تطمس العنصر نفسه، فإن backdrop-filter تؤثر فقط على ما هو مرئي عبر خلفية العنصر الشفافة.
لتحقيق تأثير Glassmorphism، يعتمد المطورون كليًا على قاعدة backdrop-filter في CSS. عندما تحدد عنصرًا ليكون له لون خلفية شبه شفاف (مثل background: rgba(255, 255, 255, 0.2);) وتطبق backdrop-filter: blur(10px);، فإن محرك العرض في المتصفح يأخذ البكسلات الواقعة مباشرة خلف العنصر، ويقوم بطمسها رياضيا، ورسمها داخل العنصر الخاص بك.
نظرًا لأن هذا يتطلب من المتصفح إعادة حساب البكسلات باستمرار أثناء تمرير المستخدم، فهي خاصية مدعومة بتسريع الأجهزة. يحسب مولد Utiliome مقاييس الأجهزة هذه فورًا، مما يتيح لك معاينة تأثير الأداء في الوقت الفعلي.
إجابة سريعة: يوفر Tailwind CSS أدوات مدمجة لتأثيرات الزجاج. تجمع بين 'backdrop-blur-md' و'bg-white/30' وحافة رفيعة 'border-white/20' لإنشاء مظهر الزجاج الضبابي فرًا دون كتابة CSS مخصص.
بينما تظل كتابة CSS المخصص ممتازة للتعلم، غالبًا ما يفضل المطورون الأطر البرمجية للأدوات مثل Tailwind.
لبناء بطاقة زجاجية في Tailwind، تحتاج إلى ثلاث طبقات أساسية:
backdrop-blur-md أو backdrop-blur-lg لتغبيش الخلفية.bg-white/20 (للوضع الفاتح) أو bg-slate-900/40 (للوضع الداكن) لمنح الزجاج وجوده المادي.border border-white/20.يوفر مولد Utiliome خيارًا لتحويل الكود إلى CSS قياسي أ سلسلة فئات Tailwind مفرغة بدقة.
إجابة سريعة: تطلب Safari تاريخيًا بادئة '-webkit-' لفلاتر الخلفية. إذا أغفلت هذه البادئة، فسيفشل تأثير الزجاج تمامً على أجهزة iOS وmacOS، ويعود إلى مربع شفاف مسطح.
العقبة الرئيسية للمطورين المبتدئين عند تطبيق glassmorphism هي نسيان أجهزة Apple. بينما تدعم متصفحات Chrome وFirefox خاصية backdrop-filter القياسية بشكل أصلي، يتطلب Safari (خاصة إصدارات iOS القديمة) البادئة الخاصة بالمصنع بشكل صارم.
إذا فشلت في تضمين -webkit-backdrop-filter: blur(10px);، سيشاهد مستخدمو Apple مجرد عنصر div شفاف ومربك، مما يجعل نصك غير قابل للقراءة تمامًا مقابل الخلفية.
يقوم مولد CSS من Utiliome بإدراج بادئات WebKit اللازمة تلقائيًا في كود المخرجات، مما يضمن ظهور تصميمك بشكل مطابق عبر جميع أنظمة التشغيل الرئيسية.
إجابة سريعة: غالبًا ما يؤدي Glassmorphism إلى إخفاقات في إمكانية الوصول لأن النصوص الموضوعة فوق خلفية ضبابية وحيوية قد تفشل في تحقيق نسب تباين WCAG. يجب أن تضمن أن لون النص داكن (أو فاتح) بدرجة كافية مقابل لون الزجاج.
النقد الأكثر شيوعًا لاتجاة glassmorphism هو ضعف إمكانية الوصول. إذا تغيرت صورة خلفية ملونة من الأزرق الداكن إلى الأصفر الساطع خلف بطاقتك الزجاجية، فقد يصبح النص الأبيض غير مرئي فجأة وبشكل كامل.
لإصلاح ذلك، يجب تطبيق درجة خلفية قوية (شفافية). على سبيل المثا، إذا كنت تستخدم نصًا أبيض، تأكد من أن لون خلفية الزجاج يشبه rgba(0, 0, 0, 0.6). هذا يضمن أنه بغض النر عن الصورة الحيوية التي تمر خلف الزجاج، سيوفر النص دائمًا نسبة تباين لا تقل عن 4.5:1 كما ينص القانون.
إجابة سريعة: لوح الزجاج الضبابي المستقر بشكل مسطح على سطح ما لا يبدو كالزجاج الحقيقي. يجب رفعه باستخدام ظل خفيف وواسع (مثل box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1)) لفصله عن طبقة الخلفية.
يحتاج العقل البشري إلى إشارات إضاءة لتفسير العمق. إذا قمت بطمس الخلفية فقط، فقد تبدو واجهة المستخدم "مسطحة".
لجعل الزجاج بارزًا، تحتاج إلى رفعه على المحور Z. يتيح لك مولد Utiliome ضبط box-shadow دقيق. من خلال الحفاظ على شفافة الظل منخفضة للغاية (حوالي 10%) ولكن دفع نصف قطر الضبابية إلى مستويات عالية (32px)، ينشأ تأثير انسداد محيطي ناعم يفصل الزجاج بشكل جميل عن الخلفية الحيوية أسفله.
كل ما تحتاج معرفته حول استخدام مولد Glassmorphism CSS المجاني عبر الإنترنت من Utiliome.
يتطلب Safari بادئة '-webkit-backdrop-filter'. يولد Utiliome هذه البادئة تلقائيًا في تصدير CSS لضمان التوافق عبر المتصفحات.
نعم. يتضمن مولد Utiliome خيارًا لتحويل تصميمك البصري فورًا إلى فئات أدوات Tailwind (مثل backdrop-blur-md bg-white/30).
نعم، الاستخدام المفرط للضبابية العالية على العناصر الكبيرة قد سبب تأخيرًا على الأجهزة المحمولة منخفضة المواصفات، لأنه يجبر معالج الرسومات GPU على إعادة حساب البسلات باستمرار أثناء التمرير.
يعكس الزجاج الحقيقي الضوء على حوافه. أضف حدًا صلبًا بسمك 1px مع شفافية منخفضة جدًا (مثل rgba(255, 255, 255, 0.2)) لمحاكاة هذا الانعكاس.
نعم، مجاني 100% بدون قيود أو إعلانات أ الحاجة لتسجيل حساب.
لديك طلب ميزة أو وجدت خللاً؟ تحدث معنا مباشرة على Discord.