مولد الزجاج المصنفر
أنشئ تأثيرات CSS للزجاج المصنفر مع معاينة في الوقت الحقيقي.
background: rgba(255, 255, 255, 0.2); border-radius: 16px; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.3);
الأدوات الموصى بها
أدوات مختارة بعناية قد تجدها مفيدة
إنشاء تأثير الزجاج المصنفر (glassmorphism) في CSS
نظرة عامة
الـ glassmorphism هو مظهر الزجاج المصنفر — لوحة شفّافة مموّهة تُظهر الخلفية بنعومة، شاعتها أنظمة التشغيل الحديثة. إعادة إنشائه في CSS تعني الجمع بين شفافية الخلفية وتمويه الخلفية وحدّ خفيف وظل بمقدار مضبوط. يتيح لك هذا المولّد ضبط كل جزء بمعاينة حية وينسخ CSS الدقيق، فتحصل على التأثير دون تجربة وخطأ.
كيفية الاستخدام
- 1
اضبط الشفافية والتمويه
عدّل عتامة الخلفية وتمويه الخلفية للتحكم في مدى تصنفر الزجاج.
- 2
اضبط الحدّ والظل
أضف حدّاً فاتحاً خفيفاً وظلاً ناعماً لتمنح اللوحة حافتها الزجاجية وعمقها.
- 3
انسخ CSS
الصق القاعدة المولّدة على عنصرك — تأكّد من وضعه فوق خلفية ملوّنة أو صورة لرؤية التأثير.
كيف يعمل
يُطبّق التأثير عدة خصائص CSS: لون خلفية نصف شفّاف، وbackdrop-filter: blur() لتصنفر ما خلف العنصر، وحدّ فاتح رفيع يلتقط «حافة» الزجاج، وظل ناعم للعمق. تضبط التمويه والشفافية واللون بمنزلقات بينما تُظهر معاينة فوق خلفية النتيجة، ثم تنسخ القاعدة المولّدة إلى ورقة الأنماط.
متى تستخدمه
تصميم بطاقة أو شريط تنقل أو نافذة منبثقة تطفو فوق خلفية أو صورة ملوّنة. منح الواجهة عمقاً حديثاً متعدد الطبقات. مطابقة نمط اللوحة المصنفرة في iOS أو Windows. إنشاء طبقة فوقية تبقى مقروءة مع إظهار المحتوى خلفها. نمذجة تأثير زجاجي قبل تثبيته في الشيفرة. تعلّم كيف يتحد backdrop-filter مع الشفافية.
الأسئلة الشائعة
يموّه backdrop-filter المحتوى خلف العنصر فقط، فيحتاج إلى شيء ملوّن أو صورة خلفه — فوق خلفية بيضاء ناصعة لا يوجد ما يُصنفَر. وتأكّد أيضاً أن خلفية العنصر نصف شفّافة لا صلبة.
ملاحظات مهمة
يستهلك backdrop-filter الرسوميات بكثافة؛ ووجود لوحات زجاجية كثيرة في صفحة، خصوصاً مع الحركة أو التمرير، قد يبطئ العرض على الأجهزة الأضعف. استخدم التأثير باعتدال على العناصر الأساسية.