نودع معا حصر الستارة الكروما ونستقبل عصر جديد من الستائر بشكل مميز
اليكم شرح الكود
هذا الكود هو عبارة عن بطاقة بث مباشر (Live Broadcast Card) احترافية ومصممة خصيصاً لتناسب الأجواء الكنسية والاحتفالية بعيد الميلاد المجيد. إليك وصف تفصيلي لمكوناته وتقنياته:
1. التصميم البصري (Visual Design)
-
تأثير الزجاج (Glassmorphism): تعتمد البطاقة على خلفية شبه شفافة مع تأثير التمويه (
backdrop-filter: blur)، مما يجعلها تبدو عصرية وتندمج بسلاسة مع أي خلفية فيديو توضع خلفها. -
التدرج اللوني (Gradients): تم استخدام تدرجات لونية داكنة (بين الأزرق الليلي والأسود) مع إطار ذهبي رقيق، ليعطي إحساساً بالفخامة والوقار.
-
الخلفية الخفية: توجد صورة خافتة جداً في الخلفية لزينة الكريسماس تظهر بنسبة شفافية 10% لتعميق الطابع الاحتفالي دون تشتيت الانتباه.
2. العناصر التفاعلية والمتحركة (Animations)
يحتوي الكود على أربع حركات (Keyframes) تعمل في وقت واحد:
-
شعاع الضوء (Light Sweep): حركة ضوء أبيض مائل يمر فوق البطاقة من اليسار إلى اليمين بشكل دوري، مما يعطي البطاقة لمعاناً كأنها مصنوعة من الزجاج أو المعدن المصقول.
-
المدار الدوار (Rotating Orbit): توجد حلقة وهمية تدور حول الصور، ويحمل هذا المدار “نجمة الميلاد” التي تدور باستمرار بزاوية 360 درجة.
-
تبادل الصور (Image Fading): هذه هي الميزة الأهم؛ حيث تتبادل صورة “أبونا” وصورة “الميلاد” الظهور والاختفاء بنعومة (
Fade In/Out) كل 5 ثوانٍ، مما يسمح بعرض عنصرين في مساحة واحدة. -
نبض الزر (Pulse Effect): زر “LIVE” الأحمر ينبض باستمرار لجذب عين المشاهد والتنبيه إلى أن البث مباشر حالياً.
3. النصوص والتنسيق (Typography)
-
التسلسل الهرمي: تم توزيع النصوص بحيث يظهر “بث مباشر قداس عيد” بحجم أصغر ولون ذهبي، بينما يظهر “الميلاد المجيد” بحجم عريض ولون أبيض ناصع لجذب الانتباه فوراً.
-
الظلال: تمت إضافة ظلال للنصوص (
text-shadow) لضمان وضوحها التام حتى لو كانت الخلفية الأصلية للفيديو فاتحة أو مزدحمة.
4. المكونات التقنية
-
HTML5 & CSS3: الكود نظيف ولا يحتاج لملفات خارجية أو مكتبات (مثل Bootstrap أو jQuery)، مما يجعله سريع التحميل جداً.
-
التوافق: الكود يدعم الاتجاه من اليمين إلى اليسار (
rtl) بشكل افتراضي ليتناسب مع اللغة العربية.
باختصار: هذا الكود مخصص ليتم وضعه كـ “Overlay” (طبقة علوية) في برامج البث مثل OBS أو vMix، أو حتى كترويسة (Header) في موقع إلكتروني، حيث يجمع بين الروحانية والاحترافية التقنية.
هل تود مني شرح أي جزء محدد في الكود البرمجي نفسه لكيفية تعديله مستقبلاً؟
حمل الكود من هنا
