مولدات CSS Glassmorphism

إن مولد CSS Glassmorphism هو محرر مرئي لأسلوب واجهة المستخدم الزجاجية المصنفرة ، حيث يطمس السطح الشفاف كل ما يجلس خلفه. يمكنك ضبط خلفية ضبابية ، وملء الشفافية ، والتشبع ، ولون اللون ، ونصف قطر الزاوية باستخدام أشرطة التمرير ، ومشاهدة تحديث المعاينة على خلفية ملونة ، ونسخ CSS بالضبط الذي ينتجه.

يعتمد Glassmorphism على خاصية مرشح الخلفية ، والتي تطبق ضبابية على المحتوى الموجود خلف عنصر بدلاً من العنصر نفسه. إلى جانب خلفية شبه شفافة ، وحدود شعرية ، وظل ناعم ، فإنها تنتج مظهرًا زجاجيًا متعدد الطبقات يتم تعميمه بواسطة أنظمة التشغيل الحديثة. الحصول على التوازن بشكل صحيح يدويًا أمر صعب ، لذا تدير هذه الأداة كل قيمة وتخرج كتلة نظيفة وقابلة للنسخ.

كل شيء يعمل في متصفحك. اختر إعدادًا مسبقًا مثل Frosted أو Dark أو Vibrant، وقم بضبط أشرطة التمرير، ونسخ CSS - بما في ذلك مرشح الخلفية الذي يسبقه webkit للحصول على دعم أوسع. لا يوجد حساب ولا تحميلات، ويستمر في العمل دون اتصال بالإنترنت بمجرد تحميل الصفحة.

يعتمد التأثير على خاصيتين تعملان معًا، ويفشل بصمت إذا كان أي منهما مفقودًا. يقوم مرشح الخلفية بطمس كل ما يوجد خلف العنصر، لذلك يحتاج إلى لون خلفية شفاف جزئيًا لإظهاره من خلاله: عند العتامة الكاملة لا يوجد شيء يمكن رؤيته، وبدون خلفية على الإطلاق يختفي السطح. كما أنها تحتاج إلى شيء خلفها يستحق التمويه، ولهذا السبب يبدو التأثير وكأنه لوحة مسطحة على خلفية عادية وينبض بالحياة فوق صورة فوتوغرافية. تكلفتان عمليتان. يعد تمويه الخلفية أحد أكثر الأشياء تكلفة في التركيب، خاصة على مساحة كبيرة أو أثناء التمرير. والنص الموجود على سطح شفاف له نسبة تباين تتغير مع كل ما يمر تحته، حتى يتمكن من اجتياز فحص التباين على خلفية واحدة والفشل على خلفية أخرى.

كمولد CSS للتشكل الزجاجي، يبدأ من الإعداد المسبق Frosted، والكتلة المنسوخة لذلك الإعداد المسبق تقرأ: الخلفية: rgba (255، 255، 255، 0.2)؛ مرشح الخلفية: ضبابية (10px) مشبعة (120%)؛ نفس القيمة مرة أخرى مثل -مرشح webkit-backdrop؛ نصف قطر الحدود: 16px؛ الحدود: 1px rgba الصلبة (255، 255، 255، 0.18)؛ وظل الصندوق: 0 8px 32px rgba (0، 0، 0، 0.12). انقر فوق Dark وتتغير الخلفية إلى rgba (15، 23، 42، 0.25) مع ضبابية 12px، وهي النسخة المستخدمة في صورة ضوئية.