تصميم بطاقات المقالات (Post Cards) 3 أكواد جاهزة HTML و CSS

01. البطاقة العصرية (Modern Blog)

تصميم مثالي للمدونات والمجلات الرقمية. يعتمد هذا التصميم على قواعد التسلسل الهرمي البصري (Visual Hierarchy)، حيث تسيطر الصورة البارزة على الجزء العلوي بنسبة ذهبية تجذب الانتباه فورياً.

يتميز هذا النمط باستخدام الـ Object-fit: cover لضمان تناسق الصور مهما كانت أبعادها الأصلية. عند تمرير الماوس (Hover)، تستخدم البطاقة خاصية Transform: translateY() لترتفع قليلاً مع تعميق الظل Box-shadow؛ هذا التأثير النفسي يعطي المستخدم شعوراً بأن البطاقة "قابلة للنقر" مما يرفع معدل النقر (CTR). كما تمت إضافة وسم تصنيف (Category Tag) بألوان زاهية فوق الصورة ليعمل كمنبه بصري يساعد القارئ على فرز المحتوى بمجرد النظر.

جديد

تصميم الواجهات

كيف تبني نظام ألوان احترافي لموقعك؟

تعرف على أسرار اختيار الألوان التي تزيد من معدل التحويل وتريح عين المستخدم...

مكتبة كوداتي

منذ يومين

<!-- HTML Structure -->
<div class="card">
  <div class="image-area">
    <img src="post-image.jpg" alt="Title">
    <span class="badge">جديد</span>
  </div>
  <div class="content">
    <span class="tag">Category</span>
    <h3>عنوان المقال الاحترافي</h3>
    <p>وصف المقال الذي يظهر هنا...</p>
  </div>
</div>

<style>
.card {
  width: 360px; background: #fff; border-radius: 20px;
  overflow: hidden; box-shadow: 0 10px 25px rgba(0,0,0,0.05);
  transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.card:hover { transform: translateY(-12px); box-shadow: 0 25px 50px rgba(0,0,0,0.1); }
.image-area { height: 220px; overflow: hidden; position: relative; }
.image-area img { width: 100%; height: 100%; object-fit: cover; transition: 0.6s; }
.card:hover img { transform: scale(1.1); }
.badge { position: absolute; top: 15px; right: 15px; background: #fff; padding: 4px 12px; border-radius: 8px; font-weight: bold; }
.content { padding: 24px; }
.tag { color: #3b82f6; font-size: 12px; font-weight: 700; }
</style>

02. البطاقة التقنية (Dark Tech Card)

هل تبحث عن مظهر يوحي بالدقة والاحترافية البرمجية؟ يركز هذا النمط على الوضع الداكن (Dark Mode) الذي أصبح المعيار الذهبي في المواقع التقنية ومنصات الـ SaaS. فلسفة هذا التصميم تقوم على تقليل إجهاد العين مع إبراز المحتوى باستخدام تباين لوني مدروس.

في هذا النموذج، نستخدم حدوداً رقيقة جداً (Borders) بظلال نيونية (Glow Effects) تنبض بالحياة عند التفاعل. يتم استخدام خطوط هندسية (Geometric Fonts) تتماشى مع الطابع البرمجي. إضافة إلى ذلك، يعتمد التصميم على "الخط الجانبي المتحرك" الذي ينمو عند التمرير، وهو لمسة جمالية توحي بأن الموقع "ذكي" ومتفاعل. إنه الخيار الأمثل للمشاريع التي تريد إيصال رسالة مفادها: "نحن نهتم بالتفاصيل التقنية الدقيقة".

<!-- HTML -->
<div class="tech-card">
  <div class="icon"><!-- SVG Icon --></div>
  <h3>Web Security 2024</h3>
  <p>Learn how to secure your apps...</p>
  <div class="glow"></div>
</div>

<style>
.tech-card {
  background: #0f172a; border-radius: 20px; padding: 32px;
  border: 1px solid #1e293b; transition: 0.4s; position: relative;
  overflow: hidden;
}
.tech-card:hover { 
  border-color: #3b82f6; 
  box-shadow: 0 0 30px rgba(59, 130, 246, 0.2);
  transform: scale(1.02);
}
.icon { 
  width: 48px; height: 48px; background: #1e293b; 
  border-radius: 12px; display: flex; align-items: center; 
  justify-content: center; color: #3b82f6; margin-bottom: 24px;
}
.tech-card h3 { color: #f8fafc; font-size: 22px; margin-bottom: 12px; }
.tech-card p { color: #94a3b8; line-height: 1.7; }
.glow { 
  position: absolute; bottom: -20px; left: -20px; 
  width: 100px; height: 100px; background: #3b82f6; 
  filter: blur(60px); opacity: 0.2; 
}
</style>

03. البطاقة المبسطة (Minimalist Classic)

يكمن السر في هذا التصميم في استخدام الـ Line-height المناسب و الـ Letter-spacing لزيادة مقروئية النص. يعتمد على هوامش (Paddings) سخية تمنح المحتوى "مساحة للتنفس"، مما يجعل تجربة القراءة مريحة وغير مرهقة بصرياً حتى مع المقالات الطويلة. هذا النمط هو المفضل للمدونات الأدبية، المواقع الثقافية، أو التدوينات التقنية الرصينة التي تعتبر المعلومة المكتوبة هي البطل الأول والأخير في الصفحة.

<!-- HTML -->
<div class="minimal-card">
  <div class="meta">15 May, 2024</div>
  <h3>Minimalist Design Psychology</h3>
  <p>Why white space matters in UI...</p>
</div>

<style>
.minimal-card {
  width: 100%; max-width: 400px; padding: 20px;
  border-radius: 16px; transition: 0.3s; border: 1px solid transparent;
}
.minimal-card:hover { background: #f8fafc; border-color: #e2e8f0; }
.meta { 
  font-size: 12px; color: #94a3b8; font-weight: 600; 
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
.meta::before { content: ""; width: 8px; height: 8px; background: #3b82f6; border-radius: 50%; }
.minimal-card h3 { font-size: 24px; color: #0f172a; margin-bottom: 10px; }
.minimal-card:hover h3 { color: #3b82f6; }
.minimal-card p { color: #475569; line-height: 1.8; }
</style>

نصائح إضافية لتخصيص الأكواد

لكي تجعل تصميم بطاقات المقالات متوافق تماماً مع تصميم موقعك، ننصحك بالآتي:

استخدام المتغيرات (CSS Variables): قم بتعريف الألوان الأساسية في أعلى ملف الـ CSS لتتمكن من تغيير شكل البطاقات في كامل الموقع بضغطة زر واحدة.

التجاوب (Responsiveness): تأكد من استخدام الـ Grid أو Flexbox في الحاوية (Container) لضمان ترتيب البطاقات بشكل أنيق على شاشات الجوال.

الصور البديلة (Placeholders): استخدم دائماً صوراً بأحجام مضغوطة (WebP) لضمان عدم تأثر سرعة التحميل بجمال التصميم.