ملحق الشكل الزجاجي للعنصر الحر: تأثير الزجاج المتجمد في تبديل واحد
Glassmorphism هو مظهر الزجاج المصنفر: لوحة شبه شفافة تطمس كل ما يجلس خلفها. يضيفه ملحق Glassmorphism المجاني في Master Addons إلى علامة التبويب المتقدمة لأي عنصر واجهة مستخدم أو عمود أو قسم أو حاوية Elementor. قم بتشغيله، وقم بتعيين التمويه ولون الخلفية الشفاف، حول الزوايا، ويصبح العنصر بطاقة زجاجية. إنه يناسب تراكبات الأبطال وبطاقات التسعير والشهادات والرؤوس اللاصقة.
ضوابط طمس وصبغة الزجاج
تتراوح قيمة التمويه من 0 إلى 100 بكسل وتبدأ عند 20 بكسل. يقوم لون الخلفية بتعيين لون الزجاج: اختر لون RGBA وقلل من عتامة الزجاج بحيث يظل المحتوى الموجود خلفه يظهر من خلاله. يقوم Border Radius بتقريب الزوايا إلى px أو % أو em، ويضيف Border Width حافة بيضاء رفيعة وشبه شفافة تصل إلى 10px.
- قم بطمس القيمة من 0 إلى 100px، 20px بشكل افتراضي.
- لون خلفية RGBA للصبغة. يتم تحويل لون HEX أو RGB إلى عتامة بنسبة 30% بالنسبة لك.
- نصف قطر الحدود لكل زاوية، بالإضافة إلى حافة زجاجية من 0 إلى 10px.
إصلاح التجاوز عندما لا يظهر التمويه
يأتي التمويه من خاصية مرشح الخلفية CSS، والتجاوز: المخفي هو السبب الأكثر شيوعًا لفقده. يقوم مفتاح Fix Overflow بتعيين تجاوز سعة العنصر على مرئي، حتى تتمكن من إصلاحه دون فتح ورقة الأنماط.
- مفتاح واحد في لوحة Glassmorphism، لا يوجد CSS مخصص.
- استخدمه عندما يكون التأثير قيد التشغيل ولكن لا يبدو أن هناك شيئًا غير واضح.
- تأكد أيضًا من أن العنصر موجود فوق صورة أو تدرج أو أي خلفية مزدحمة أخرى. فوق اللون الأبيض العادي لا يوجد شيء يمكن طمسه.
Glassmorphism CSS مقابل امتداد Glassmorphism
تعمل مرشحات CSS الخاصة بـ Elementor على طمس العنصر نفسه، بما في ذلك النص. تحتاج البطاقة الزجاجية إلى مرشح الخلفية بدلاً من ذلك، والذي يطمس فقط ما يوجد خلف العنصر، وليس لدى Elementor أي تحكم فيه. مكتوب باليد، يبدو CSS هكذا
.glass-card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 16px;
}| Css مكتوبة بخط اليد | امتداد التشكل الزجاجي | |
|---|---|---|
| حيث قمت بتعيينه | حقل CSS مخصص أو ورقة الأنماط الخاصة بك | عناصر التحكم في علامة التبويب المتقدمة |
| بادئة سفاري | أضف -webkit-backdrop-filter بنفسك | متضمن |
| ألوان سداسية أو RGB | ابقَ ثابتًا إلا إذا أضفت العتامة | تم تحويله إلى عتامة 30% |
| تم حظر التمويه عن طريق الفائض: مخفي | ابحث عنه وتجاوزه بنفسك | إصلاح مفتاح الفائض |
| يعمل على | مهما كانت أهداف المحدد الخاص بك | الحاجيات والأعمدة والأقسام والحاويات |
يعمل مرشح الخلفية في أجهزة Chrome وEdge وSafari وFirefox الحالية. تُظهر المتصفحات القديمة الخلفية شبه الشفافة دون التمويه. يبدو الزجاج أفضل من حيث الحركة أو اللون، لذا جربه فوقه الجسيمات أو خلفية التدرج المتحركة (برو). بالنسبة للتأثيرات التي لا تغطيها اللوحة، أضف القواعد الخاصة بك باستخدام Css مخصص.
الأسئلة المتداولة حول Glassmorphism
لماذا لا يظهر تأثير التمويه الخاص بي؟
قم بتشغيل إصلاح الفائض في لوحة Glassmorphism. فهو يضبط تجاوز سعة العنصر على أنه مرئي حتى يتمكن مرشح الخلفية من العمل. تأكد أيضًا من وجود صورة أو خلفية ملونة خلف العنصر.
هل يمكنني استخدام الألوان الصلبة مع تأثير الزجاج؟
نعم. يتم تحويل لون HEX أو RGB إلى RGBA بنسبة عتامة 30%، بحيث يظل الزجاج شفافًا. للتحكم الدقيق، اختر لون RGBA واضبط العتامة بنفسك.
هل يعمل مع أي موضوع؟
نعم. يتم تعيين التأثير على عناصر Elementor، بحيث يعمل مع أي سمة تقوم بتشغيل Elementor. يحتاج الزائرون إلى متصفح يدعم مرشح الخلفية، والذي يغطي الإصدارات الحالية من Chrome وEdge وSafari وFirefox.
هل امتداد Glassmorphism مجاني؟
نعم. يعد Glassmorphism أحد الامتدادات المجانية في Master Addons for Elementor. قم بتشغيله في لوحة تحكم Master Addons وسيظهر في علامة التبويب "متقدم" لكل عنصر.
اكتشف المزيد من الميزات للبناء بشكل أسرع والتصميم بشكل أكثر ذكاءً
لماذا تتوقف عند تأثير واحد؟ توفر مجموعة Master Addons كل ما تحتاجه: عناصر واجهة مستخدم فريدة وتخصيص أعمق وأدوات متخصصة تعمل معًا بسلاسة. حول Elementor إلى مركز التصميم النهائي الخاص بك.
إضافات الحاويات
أنماط
ناسخ البريد/الصفحة
شريط تقدم القراءة
