الموارد عبر الإنترنت غير محدودة تقريبًا ، ولكن إن العثور على الجودة هو أمر صعب حقًاعلى الرغم من البحث قليلاً والحصول على قائمة جيدة من مواقع الويب المخصصة للتصميم ، تصبح الأمور أسهل. في الوقت الذي تكون فيه لغات مثل HTML و CSS في حالة جيدة ، فإن الاقتراب من الموارد المجانية عالية الجودة يكاد يكون على بعد نقرات قليلة.
سنقوم بإدراج سلسلة من بطاقات مجانية بتنسيق HTML و CSS مناسبة تمامًا لجميع أنواع المدونات والأعمال والتجارة الإلكترونية وغير ذلك الكثير. مجموعة طويلة المدى بحيث يمكن دمجها في بعض الأعمال التي تقوم بها لجميع أنواع العملاء. سنقوم بذلك باستخدام هذه القائمة التي تستخدم codepen.io حتى تتمكن من الحصول على الكود في كل من HTML و CSS.
بطاقة مدونة ممتعة # 1
ل بطاقة تصميم رائعة التي تقول تقريبًا كل الصور التي تمثلها ، يمكنك الانتقال إلى codepen.io للحصول على الكود المقابل وتثبيته على موقع الويب الخاص بك.
بطاقات أخبار CSS فقط CSS
هذه البطاقة مع أشياء غريبة كخلفية، تتميز بالرسوم المتحركة السلسة التي تكشف عن المحتوى. إنه CSS خالص.
عنصر منشور المدونة
معاينة للويب بجلب مؤشر الماوس فوقه. لديها CSS و HTML لإدماجها بسهولة.
بطاقات المدونة
تصميم بطاقة مدونة مبسط وسريع الاستجابة. رسوم متحركة سريعة وسلسة ذات جودة عالية لا تترك أي شخص غير مبال.
بطاقات العمل سريعة الاستجابة
يقف ل الرسوم المتحركة طفيفة عن طريق تمرير مؤشر الماوس فوق صورة البطاقة.
بطاقة مدونة أخرى
يظهر ال نص البطاقة عند التمرير في نفس.
بطاقات العمل
ل بطاقة بسيطة ولكنها حالية قم بزيارة العرض التوضيحي والتعليمات البرمجية بتنسيق HTML و CSS.
بطاقة عمل ثلاثية الأبعاد
هذه البطاقة تستحق رسم متحرك ثلاثي الأبعاد باستخدام HTML و CSS. من صنع Elena Nazarova ، إنها مثالية لبطاقة عمل ملفتة للنظر.
بطاقة عمل CSS
بطاقة عمل ملفتة للنظر للغاية في CSS يدور في 3D لإفساح المجال لسلسلة من عناوين URL التي تستجيب لمؤشر الماوس في اللحظة التي نضعها فيه.
شبكات البطاقة
سلسلة من البطاقات في وضع جيد مع تصميم ملفت للنظر. إنه أمر مدهش لجمالياته المبسطة ، ولكن مع نجاح جيد في كود HTML و CSS و SCSS.
الكشف عن البطاقات ثلاثية الأبعاد
هذه السلسلة من شبكات البطاقات تكشف المزيد من المعلومات في الوقت الحالي أننا تركنا الماوس على الأيقونة باللون الأخضر. في نفس الوقت الذي نترك فيه المؤشر ، تتحرك بقية الشبكة وفقًا لذلك.
بطاقة تصميم المواد سريعة الاستجابة
مع لغة تصميم google، تظهر هذه السلسلة من البطاقات التي تبرز لأيقونة القائمة التي تفتح جميع معلومات الممثلين كما في مثال الحالة. رسوم متحركة جميلة وبديهية ذات مظهر مرئي رائع.
شبكة بطاقة Flexbox
نموذج البطاقة على نفس الارتفاع الذي تتميز به عند استخدام تنسيق الشبكة المرنة. ومن قيمه الأخرى استخدام نسب أبعاد CSS وفلاتر CSS.
بطاقات Clash of Clans
El لعبة محمولة شعبية لديه بطاقات في HTML و CSS أنشأها Andre Madarang. يمكننا أن نمر فيما بينها برسوم متحركة دقيقة وبصرية عالية.
بطاقات الشرائح للتجارة الإلكترونية
مع حركة رشيقةتشجعك هذه البطاقات على البحث عن عناصرها لمعرفة ما يدور حولها. بتصميم رائع من عمر دسوقي.
تصميم الواجهة - بطاقة المنتج
بطاقة مثالية لتصميم تلك من منتج التجارة الإلكترونية لدينا. صنع في HTML و CSS.
بطاقة المنتج
من نفس البطاقة نستطيع تمرير عدة صور لرؤية المنتج بشكل أفضل. يتضمن زر الإضافة إلى عربة التسوق ويحتوي على كود HTML و CSS وجافا سكريبت.
بطاقات المنتجات المرنة
كما يشير اسمه ، يستخدم فليكس بوكس لإنشاء رسم متحرك مثير للاهتمام عندما نضغط على زر إضافة إلى عربة التسوق
بطاقات الوجه
القليل من التعليمات البرمجية لبعض البطاقات ذات السلس و الرسوم المتحركة المثالية. في غضون دقائق يمكنك دمجها. أضيف مؤخرا إلى codepen.
البطاقات كبطاقات منتجات ثلاثية الأبعاد
وتجدر الإشارة إلى أن هذه البطاقات كما لو كان لدينا سلسلة من البطاقات على الطاولة. يتم ترك المؤشر في وضع التكبير ، والنقر فوق كل واحدة ، وإظهار الجزء الخلفي من البطاقة لإظهار معلومات المنتج. نضغط مرة أخرى ونتركه كما كان في المقدمة. مثالي لتعلم خصائص 3D CSS.
بطاقة المنظر
تجربة بصرية للغاية مع ملف تأثير الوجه اللافت للنظر. من الأفضل أن تراها لتعرف ما الذي تتحدث عنه.
تأثير تحوم للبطاقات
تأثير بسيط ولكن تحوم دخيل حول البطاقات.
تأثير تحوم بسيط
ضرب تأثير بسيط نوعًا ما، ولكن هذا له تأثير كبير في اللحظة التي نتخيلها فيه.
بطاقات عمق المنظر
هذه البطاقات تحمل مفهوم المنظر إلى الأعلى لتشكيل بعض البطاقات المذهلة حسب التصميم. عليك فقط رؤيته لفهم تأثيره على المستخدم بشكل أفضل عند تحديد بعض الفئات في مدونتنا.
بطاقة واجهة المستخدم للأفلام
بطاقة من تصميم رائع باستخدام HTML و CSS.
بطاقة الملف الشخصي
جدا رسوم متحركة جيدة للحصول على بطاقة جهة اتصال يمكننا من خلالها تنفيذ الوصول إلى ملفات تعريف الوسائط الاجتماعية. HTML و CSS.
بطاقات بولارويد المجمعة
مع الخصائص والمرشحات و انتقالات CSS المخصصة يتم إنشاء هذه السلسلة من بطاقات Polaroid المجمعة ؛ لا تفوت صور ويب SVG هذه.
سيكون من الممكن إدراج أي من هذه البطاقات على صفحة باستخدام Wordpress
أنا أحبهم