3 أكواد HTML و CSS لتصميم بطاقات مقالات (Post Cards) احترافية

Snippet Pro | UI Design بطاقات مقالات (Cards) بـ CSS

الواجهة الجذابة تبدأ من طريقة عرضك للمحتوى. إليك 3 أكواد CSS لتصميم بطاقات المقالات (Post Cards) جاهزة للنسخ لتغيير شكل مدونتك أو مشروعك بالكامل.

وداعاً للتصاميم المملة!

يعتبر الـ Card المكون الأساسي لأي مدونة، متجر، أو معرض أعمال. في هذا الدليل من مكتبة كوداتي، صممنا لك 3 أشكال مختلفة تلبي كافة احتياجاتك (تصميم مدونة عصري، تصميم منصة تقنية، وتصميم مينيماليست كلاسيكي).

الأكواد مكتوبة بـ HTML و CSS نقي (Vanilla)، وخفيفة جداً، ومتجاوبة تماماً مع الجوال. انسخ الكود وابدأ الإبداع!

مكتبة بطاقات كوداتي: ارتقِ بتصميم واجهة موقعك اليوم.

01

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

تصميم مثالي للمدونات والمجلات. يتميز بصورة بارزة كبيرة في الأعلى، مع تأثير طفو (Hover) ناعم ووسم للتصنيف واسم الكاتب.

تطوير الويب

تعلم أساسيات الجافا سكريبت في 2026

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

أحمد علي

12 أكتوبر

HTML & CSS Modern Card Code

<!-- كود HTML -->
<div class="card-modern">
  <img src="رابط-الصورة-هنا" alt="غلاف المقال">
  <div class="card-modern-body">
    <span class="card-modern-tag">تطوير الويب</span>
    <h3 class="card-modern-title">عنوان المقال يكتب هنا</h3>
    <p class="card-modern-text">وصف مختصر للمقال يعطي فكرة للزائر عن المحتوى الذي سيقرأه.</p>
    <div class="card-modern-footer">
      <div class="card-modern-author">
        <img src="رابط-صورة-الكاتب" alt="الكاتب">
        <span>اسم الكاتب</span>
      </div>
      <span class="card-modern-date">12 أكتوبر</span>
    </div>
  </div>
</div>

/* كود CSS */
.card-modern { 
  background: #fff; border-radius: 16px; overflow: hidden; 
  box-shadow: 0 4px 15px rgba(0,0,0,0.05); transition: 0.3s; 
  width: 320px; font-family: sans-serif; dir: rtl; text-align: right;
}
.card-modern:hover { transform: translateY(-8px); box-shadow: 0 15px 30px rgba(0,0,0,0.1); }
.card-modern img { width: 100%; height: 200px; object-fit: cover; }
.card-modern-body { padding: 25px; }
.card-modern-tag { 
  display: inline-block; padding: 5px 12px; background: #eff6ff; 
  color: #3b82f6; font-size: 0.8rem; font-weight: 700; 
  border-radius: 50px; margin-bottom: 12px; 
}
.card-modern-title { font-size: 1.3rem; font-weight: 900; margin: 0 0 12px 0; color: #1e293b; line-height: 1.4; }
.card-modern-text { color: #64748b; font-size: 0.95rem; line-height: 1.6; margin-bottom: 20px; }
.card-modern-footer { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #f1f5f9; padding-top: 15px; }
.card-modern-author { display: flex; align-items: center; gap: 10px; }
.card-modern-author img { width: 35px; height: 35px; border-radius: 50%; }
.card-modern-author span { color: #475569; font-size: 0.9rem; font-weight: 700; }
.card-modern-date { color: #94a3b8; font-size: 0.85rem; }

02

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

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

تحسين أداء المواقع

تعرف على أسرار تقليل حجم ملفات CSS و JS لرفع سرعة موقعك في أداة PageSpeed Insights.

اقرأ المزيد

HTML & CSS Dark Tech Card Code

<!-- كود HTML (يتطلب ربط مكتبة FontAwesome للأيقونة) -->
<div class="card-tech">
  <div class="card-tech-icon"><i class="fas fa-rocket"></i></div>
  <h3>تحسين أداء المواقع</h3>
  <p>تعرف على أسرار تقليل حجم ملفات CSS و JS لرفع سرعة موقعك.</p>
  <a href="#" class="card-tech-link">اقرأ المزيد <i class="fas fa-arrow-left"></i></a>
</div>

/* كود CSS */
.card-tech { 
  background: #1e293b; border-radius: 16px; padding: 25px; 
  width: 320px; border: 1px solid #334155; transition: 0.4s; 
  position: relative; overflow: hidden; text-align: right; dir: rtl;
}
.card-tech:hover { 
  border-color: #3b82f6; box-shadow: 0 10px 30px rgba(59, 130, 246, 0.15); 
  transform: translateY(-5px); 
}
/* الخط الجانبي المتحرك */
.card-tech::before { 
  content: ''; position: absolute; top: 0; right: 0; 
  width: 4px; height: 0; background: #3b82f6; transition: 0.4s; 
}
.card-tech:hover::before { height: 100%; }

.card-tech-icon { 
  width: 50px; height: 50px; background: rgba(59, 130, 246, 0.1); 
  color: #3b82f6; border-radius: 12px; display: flex; 
  justify-content: center; align-items: center; 
  font-size: 1.5rem; margin-bottom: 20px; 
}
.card-tech h3 { color: #f8fafc; font-size: 1.4rem; margin: 0 0 15px 0; font-weight: 900; }
.card-tech p { color: #94a3b8; font-size: 0.95rem; line-height: 1.7; margin-bottom: 20px; }
.card-tech-link { 
  display: inline-flex; align-items: center; gap: 8px; 
  color: #3b82f6; text-decoration: none; font-weight: 700; transition: 0.3s; 
}
.card-tech-link:hover { gap: 12px; color: #60a5fa; }

03

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

في عالم الـ UI/UX، أحياناً "الأقل هو الأكثر". هذا التصميم النظيف يركز على التايبوجرافي (النص) مع صورة بارزة بسيطة خالية من الزخارف والظلال الكثيفة. مثالي للمدونات الشخصية والتقنية.

تصميم الواجهات • 5 دقائق قراءة

قواعد الـ Typography في تصميم الويب

كيف تختار الخطوط المناسبة لموقعك؟ تعرف على قواعد المسافات والتباعد لضمان أقصى قدرة على القراءة لزوارك.

HTML & CSS Minimalist Card Code

<!-- كود HTML -->
<div class="card-mini">
  <img src="رابط-الصورة-هنا" alt="غلاف المقال">
  <div class="card-mini-content">
    <span class="card-mini-meta">تصميم الواجهات • 5 دقائق قراءة</span>
    <h3>قواعد الـ Typography في الويب</h3>
    <p>كيف تختار الخطوط المناسبة لموقعك؟ تعرف على قواعد المسافات لضمان أقصى قدرة على القراءة لزوارك.</p>
  </div>
</div>

/* كود CSS */
.card-mini { 
  background: #ffffff; border-radius: 0; 
  border-bottom: 3px solid #e2e8f0; width: 320px; 
  transition: 0.3s; text-align: right; cursor: pointer; 
  direction: rtl; display: flex; flex-direction: column;
}
.card-mini:hover { border-bottom-color: #0f172a; background: #f8fafc; }
.card-mini img { width: 100%; height: 180px; object-fit: cover; }
.card-mini-content { padding: 20px; }
.card-mini-meta { 
  color: #94a3b8; font-size: 0.85rem; font-weight: 600; 
  text-transform: uppercase; letter-spacing: 1px; 
  margin-bottom: 10px; display: block; 
}
.card-mini h3 { 
  color: #0f172a; font-size: 1.5rem; font-weight: 900; 
  margin: 0 0 10px 0; line-height: 1.3; 
}
/* إخفاء النص الزائد بـ 3 نقاط (...) بعد السطر الثاني */
.card-mini p { 
  color: #64748b; font-size: 1rem; line-height: 1.6; margin: 0; 
  display: -webkit-box; -webkit-line-clamp: 2; 
  -webkit-box-orient: vertical; overflow: hidden; 
}

أسئلة شائعة (FAQ) حول الأكواد

لدمج هذه البطاقات داخل حلقة بلوجر (Blogger Loop) لتظهر فيها المقالات تلقائياً، تحتاج إلى استبدال النصوص الثابتة بأكواد بلوجر (Data Tags). على سبيل المثال، استبدل رابط الصورة بـ <data:post.featuredImage/> واستبدل العنوان بـ <data:post.title/>.

أفضل طريقة هي وضع هذه البطاقات داخل "حاوية" (Container) واستخدام CSS Grid. يمكنك إضافة الكود التالي للحاوية:
display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px;
هذا الكود سيجعل البطاقات تترتب تلقائياً حسب حجم الشاشة.

نعم بالتأكيد! لقد قمنا بتحديد العرض الافتراضي بـ width: 320px; في أكواد الـ CSS لتناسب المعاينة. يمكنك تغييره إلى width: 100%; إذا كنت ستضعها داخل Grid، أو تعديل الرقم للتحكم في الحجم كما تشاء.

---

ارتقِ بمستوى واجهاتك اليوم

تابع قسم "مكتبة الأكواد" دائماً للحصول على المزيد من القصاصات البرمجية الجاهزة!

💡 نصيحة للمطورين: هل تبحث عن المزيد من الإضافات الجاهزة لمشروعك؟ تفقد مقالنا السابق عن 5 أكواد CSS جاهزة لتصميم أزرار احترافية لتعزيز واجهة المستخدم لديك!

🚀 تم النسخ بنجاح!