مُحَوِّل بطاقات CSS ابنِ تصاميم بطاقات玻璃ية مورفولوجية مع تحكم في تلاشي الخلفية والشفافية وظلال.

يعتمد الزجاج المورفولوجي على خاصية backdrop-filter في CSS، والتي تطبق تأثيرات رسومية على المنطقة خلف عنصر. الوظيفة الرئيسية هي blur()، التي تخلق مظهر الزجاج المتجمد. عندما يتم الجمع بين الخلفية شبه شفافة (باستخدام rgba أو hsla)، يسمح التأثير بمشاهدة المحتوى من وراء البطاقة ولكن مع ضباب. تستخدم الحدود opak قليلاً أعلى من الخلفية للحصول على تعريف. بادئة -webkit-backdrop-filter مطلوبة لدعم سفاري. لكي يعمل التأثير، يجب أن يكون للعنصر خلفية شفافة أو شبه شفافة، ويجب أن يكون هناك محتوى وراءها ليتم تضمينه. اعتبارات الأداء: يمكن أن تكون backdrop-filter مكلفة على عناصر كبيرة أو عند ت重疊 العديد من العناصر المضبوطة. استخدم will-change: backdrop-filter لتحديد متغير التأثير المتحرك في المتصفح. للallback، قم بتقديم خلفية شبه شفافة صلبة للمتصفحات التي لا تدعم backdrop-filter.