مولد التشكل الزجاجي

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

الخلفية عبارة عن رسوم متحركة حقيقية لـ CSS: تدرج خطي كبير مرسوم بنسبة 400% من حجم العنصر، مع قيام @keyframes بتغيير موضع الخلفية ذهابًا وإيابًا في حلقة - لا توجد حلقة رسوم متحركة JavaScript، ولا لوحة قماش، فقط نفس تقنية موضع الخلفية المستمرة المستخدمة في أقسام الإنتاج الرئيسية. التمويه، واللون الخفيف، والتعتيم، ولون تمييز الحدود/التعتيم/العرض، ونصف قطر الزاوية ونعومة الظل كلها تدفع الأنماط الحية للبطاقة العائمة، ويعكس مربع CSS القابل للنسخ نفس القيم تمامًا.

لا يدعم كل متصفح مرشح الخلفية، لذلك يُصدر المولد أيضًا كتلة حقيقية @supports not (backdrop-filter:blur(1px)) - ليست إيماءة رمزية، ولكن قاعدة احتياطية مع لون الخلفية الخاص بها المحسوب من عتامة الصبغة الفعلية. نظرًا لأن الشفافية بدون تمويه تبدو أسوأ بشكل ملحوظ (كل ما هو خلفها يظهر بدون تمويه)، فإن الإجراء الاحتياطي يرفع تلقائيًا قناة ألفا فوق عتامة الصبغة التي اخترتها، ويوضح التعليق في CSS الذي تم إنشاؤه السبب بالضبط وبأي مقدار.

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