مقدمة

في الآونة الأخيرة، واجهنا التحدي المتمثل في إنشاء ظلال واقعية للمشروع الجديد الذي نقوم به مع Little Thai. وبعد بحث مكثف، وجدنا أنه لا يوجد الكثير من المعلومات المتاحة. لقد شرعنا في تطوير أسلوبنا الخاص باستخدام أمر drop-shadow في CSS، وكانت النتائج مذهلة. اليوم نريد أن نشارك المجتمع كيف حققنا ذلك، حتى يتمكن الجميع من الاستفادة من هذا التقدم.

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

كان هذا تحديًا لأنه، كما ذكرنا، لم تكن هناك معلومات حول كيفية إنشاء ظلال واقعية في Photoshop. ومع ذلك، فقد أنقذنا هذا من تحرير عشرات المنتجات الموجودة في المتجر باستخدام برنامج Photoshop، علاوة على ذلك، عدم الاضطرار إلى التعديل في كل مرة تتم فيها إضافة منتج جديد. كيف تم ذلك إذن؟

التقنية

يعد أمر drop-shadow في CSS أداة قوية لإضافة الظلال إلى العناصر الرسومية. ومع ذلك، فإن استخدامه ليس دائمًا واضحًا عند البحث عن تأثير واقعي. يعتمد حلنا على تطبيق ظلال متعددة بمعايير مختلفة لتحقيق تأثير أعمق وأكثر واقعية.

كود CSS المستخدم

إليك كود CSS الذي استخدمناه لإنشاء الظلال الواقعية:

عامل التصفية: الظل المسقط (17px 17px 13px rgba(0, 0, 0, 0.3)) الظل المسقط (7px 7px 4.5px rgba(0, 0, 0, 0.3));

شرح الكود

الظل المسقط الأول: 17px 17px 13px rgba(0, 0, 0, 0.3): هذا الظل هو الأكبر والأكثر انتشارًا. تشير المعلمات إلى ظل مُزاح بمقدار 17 بكسل على المحورين X وY، مع تمويه قدره 13 بكسل وتعتيم بنسبة 30%.

الظل المسقط الثاني: 7px 7px 4.5px rgba(0, 0, 0, 0.3): هذا الظل أصغر وأقل انتشارًا من الأول. تشير المعلمات إلى ظل مُزاح بمقدار 7 بكسل على المحورين X وY، مع تمويه قدره 4.5 بكسل وعتامة بنسبة 30%.

إن الجمع بين هذين الظلين يخلق إحساسًا بالعمق والواقعية يصعب تحقيقه بظل واحد.

مثال مرئي فيما يلي مثال مرئي لكيفية ظهور النتيجة النهائية باستخدام تقنية الظل الواقعية لدينا:

ومن المهم تسليط الضوء على نقطتين:

— يعمل الظل بشكل أفضل على درجة اللون الرمادي الناعم بدلاً من اللون الأبيض النقي.

— في هذه الحالة، تم تصميم الظلال لمنظور العرض العلوي. في زوايا التصوير الأخرى، لن يعمل بشكل جيد.

تطبيقات عملية

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

مولد الظل الواقعي عبر الإنترنت في CSS

يمكنك العثور على المولد عبر الإنترنت في موقع MandarinaWebs

خاتمة

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