كيفية تصميم واجهة بطاقة منتجات في HTML CSS و JavaScript

ستتعلم اليوم في هذه المدونة كيفية إنشاء تصميم واجهة مستخدم Creative Product Card باستخدام HTML CSS وجافا سكريبت

مرحبًا أيها القراء ، ستتعلم اليوم في هذه المدونة كيفية إنشاء تصميم واجهة مستخدم Creative Product Card باستخدام HTML CSS وجافا سكريبت.

 

بطاقة منتج تُستخدم لعرض صورة عنصر مرتبط بطريقة ما بالعناصر ذات الصلة ، على سبيل المثال ، المنتجات التي نبيعها أو الوصفات. يسمح لشخص ما بالتعرف بسرعة على عنصر معين يهمه من مجموعة ، على سبيل المثال في نتائج البحث.

 

في هذا البرنامج (Creative Product Card UI Design) ، في البداية ، على صفحة الويب ، لا يوجد سوى صورة منتج ولكن عندما تحوم فوق تلك الصورة ، تظهر الخيارات / حاوية التخصيص لهذا المنتج مع رسم متحرك منزلق. في حاوية تخصيص المنتج ، يوجد اسم المنتج وأرقام الحجم وقيمة السعر وخيارات الألوان والأزرار. لا يوجد سوى ثلاثة خيارات للألوان في هذا المنتج وعندما تنقر على كل لون ، تتغير صورة المنتج ولون الخلفية ولون الحاوية المخصصة وفقًا للون الذي اخترته.

 

إذا كنت تشعر بصعوبة في فهم ما أقوله. يمكنك مشاهدة فيديو تعليمي كامل عن هذا البرنامج (Creative Product Card UI Design).

 

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

 

هناك استخدمت jQuery أيضًا لتغيير صورة المنتج والألوان ولون الخلفية وفقًا لخيار / قيمة اللون المختار. بشكل عام ، jQuery هي مكتبة JavaScript وتساعد على كتابة عدد أقل من أكواد JavaScript. إذا كنت تحب هذا البرنامج (Creative Product Card UI Design) وترغب في الحصول على أكواد المصدر. يمكنك بسهولة الحصول على الأكواد المصدرية لهذا البرنامج. للحصول على أكواد المصدر ، تحتاج فقط إلى التمرير لأسفل.

 

تصميم واجهة مستخدم بطاقة المنتج الإبداعي [رموز المصدر]

لإنشاء هذا البرنامج (Creative Product Card UI Design). أولاً ، تحتاج إلى تحميل ملف الاكواد من زر التحميل

الملفات

ما هو رد فعلك؟

like

dislike

love

funny

angry

sad

wow