إعادة إنشاء تأثير Apple Liquid Glass من WWDC 2025 باستخدام CSS وSVG والفيزياء

تتناول هذه المقالة إعادة إنشاء تأثير واجهة المستخدم الرائع Liquid Glass الذي تم عرضه في مؤتمر مطوري Apple العالمي WWDC 2025. يستخدم هذا المقال CSS وخرائط الإزاحة SVG وحسابات الانكسار القائمة على الفيزياء لتحقيق تقريب مقنع. يشرح الكاتب مبادئ الانكسار، مفصلًا كيف ينحني الضوء عند مروره عبر مواد مختلفة وكيف تصف الدوال الرياضية شكل سطح الزجاج. ثم يتم استخدام خرائط الإزاحة SVG لمحاكاة تأثير الانكسار. تتوج المقالة بإنشاء مكونات واجهة المستخدم، مثل العدسات المكبرة، ومربعات البحث، والمفاتيح، والمنزلقات، مع تأثير Liquid Glass. لاحظ أن الأداء الأمثل يُلاحظ حاليًا في متصفح Chrome نظرًا لتوافق المتصفح مع فلاتر SVG كفلتر خلفية.