طراحی کارت پروژه با CSS

کارت پروژه یکی از اجزای پرکاربرد در رابط‌های کاربری وب است که برای نمایش خلاصه پروژه‌ها، نمونه‌کارها، پورتفولیو یا لیست خدمات استفاده می‌شود. در این مقاله به شکل عملی و گام‌به‌گام به طراحی کارت پروژه با CSS می‌پردازیم، از ساختار پایه تا بهینه‌سازی، واکنش‌گرایی و دسترسی‌پذیری.

چرا کارت پروژه مهم است؟

کارت‌ها محتوا را به واحدهای کوچک و قابل هضم تقسیم می‌کنند، به کاربران کمک می‌کنند سریعاً اطلاعات کلیدی (عنوان، تصویر، توضیح کوتاه، برچسب‌ها و لینک) را ببینند و تعامل کنند. طراحی خوب کارت می‌تواند نرخ کلیک و تعامل را بالا ببرد.

ساختار پایه کارت

برای شروع نیاز به یک ساختار HTML ساده و CSS پایه داریم. در این مثال از Flexbox برای چینش استفاده شده است.

<!-- HTML -->
<article class="project-card">
  <img src="project.jpg" alt="تصویر پروژه" class="project-card__img">
  <div class="project-card__body">
    <h4 class="project-card__title">عنوان پروژه</h4>
    <p class="project-card__desc">خلاصه‌ای کوتاه درباره پروژه، تکنولوژی‌ها و نتیجه کار.</p>
    <ul class="project-card__tags">
      <li>React</li>
      <li>CSS</li>
      <li>API</li>
    </ul>
    <a href="#" class="project-card__link">جزئیات بیشتر</a>
  </div>
</article>

/* CSS */.project-card{
  display:flex;
  flex-direction:column;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,0.12);
  transition:transform .2s ease, box-shadow .2s ease;
  background:#fff;
}
.project-card:hover{
  transform:translateY(-6px);
  box-shadow:0 12px 30px rgba(0,0,0,0.18);
}
.project-card__img{
  width:100%;
  height:180px;
  object-fit:cover;
}
.project-card__body{
  padding:16px;
}
.project-card__title{margin:0 0 8px;font-size:1.05rem;}
.project-card__desc{margin:0 0 12px;color:#555;font-size:.95rem;}
.project-card__tags{list-style:none;padding:0;display:flex;gap:8px;margin:0 0 12px;}
.project-card__tags li{background:#f0f0f0;padding:6px 10px;border-radius:999px;font-size:.85rem;}
.project-card__link{display:inline-block;padding:8px 12px;background:#007bff;color:#fff;border-radius:6px;text-decoration:none;}

توضیح: کد بالا یک کارت پایه فراهم می‌کند. تصویر با object-fit پوشش مناسب را تضمین می‌کند. افکت hover با transform و box-shadow باعث برجسته‌شدن کارت می‌شود. تگ‌ها (tags) به صورت لیست افقی نمایش داده شده‌اند.

افزودن واکنش‌گرایی و گرید نمایش

برای نمایش چند کارت در صفحه بهترین روش استفاده از CSS Grid یا Flexbox است. Grid کنترل بهتری روی ردیف و ستون می‌دهد.

/* Container for cards */.cards-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:20px;
  align-items:start;
  padding:20px;
}

/* Responsive tweak */@media (max-width:420px){
  .project-card__img{height:140px;}
}

توضیح: grid-template-columns با minmax و auto-fill به کارت‌ها اجازه می‌دهد تا در هر اندازه‌نمایش به‌صورت منطقی بازچینش شوند و فضای خالی بهینه استفاده شود. این الگو برای نمایش پورتفولیو یا لیست پروژه‌ها ایده‌آل است.

دسترسی‌پذیری و تجربه کاربری (A11y)

• از تگ‌های معنایی مثل <article>, <h4> و <img alt> استفاده کنید.
• رنگ‌ها را با نسبت کنتراست کافی انتخاب کنید (حداقل 4.5:1 برای متن معمولی).
• فوکوس کیبورد را به لینک‌ها و کارت‌ها اضافه کنید تا کاربران صفحه‌خوان و کیبورد‌محور بتوانند تعامل کنند.

/* Focus styles */.project-card:focus-within{
  outline:2px solid #0056b3;
  outline-offset:4px;
}

توضیح: focus-within وقتی اعمال می‌شود که یک عنصر فرزند (مثل لینک) فوکوس داشته باشد. این کمک می‌کند تا کاربرانی که با صفحه‌کلید حرکت می‌کنند تشخیص دهند کدام کارت فعال است.

افزونه‌ها و بهینه‌سازی‌ها

• استفاده از CSS variables برای رنگ‌ها و فواصل: نگهداری و تغییر سبک‌ها ساده‌تر می‌شود.
• تصاویر را با فرمت‌های جدید (WebP) و اندازه مناسب بارگذاری کنید تا سرعت صفحه افزایش یابد.
• برای لیست طولانی، از لیزی لود (loading=”lazy”) یا تکنیک‌های بارگذاری تدریجی استفاده کنید.
• استفاده از transition و transform به جای box-shadow سنگین برای انیمیشن‌های سبک‌تر و روان‌تر.

/* Example using CSS variables and lazy-loading */:root{
  --card-bg:#ffffff;
  --primary:#007bff;
  --gap:16px;
}
.project-card{background:var(--card-bg);padding:var(--gap);}
/* HTML img: <img src="project.webp" loading="lazy" alt="..."> */

توضیح: متغیرهای CSS (CSS variables) مدیریت رنگ‌ها و فواصل را مرکزی می‌کنند. مشخصه loading=”lazy” برای تصاویر مرورگر را قادر می‌سازد تا بارگذاری را تا زمان نیاز به تأخیر بیندازد.

نمونه بهبود یافته: کارت با لایه روی تصویر و دکمه شفاف

<article class="project-card card--overlay">
  <div class="card__media">
    <img src="project.jpg" alt="تصویر پروژه" loading="lazy">
    <div class="card__overlay">
      <a href="#" class="card__cta">مشاهده پروژه</a>
    </div>
  </div>
  <div class="card__body">
    <h4>عنوان پروژه</h4>
    <p>توضیح کوتاه و برجسته درباره تکنولوژی‌ها و نکات کلیدی.</p>
  </div>
</article>

/* CSS */.card--overlay{position:relative;overflow:hidden;border-radius:12px;}
.card__media img{display:block;width:100%;height:180px;object-fit:cover;transition:transform .4s ease;}
.card__overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.45));display:flex;align-items:flex-end;justify-content:center;padding:16px;opacity:0;transition:opacity .25s ease;}
.card--overlay:hover .card__overlay,
.card--overlay:focus-within .card__overlay{opacity:1;}
.card__cta{background:rgba(255,255,255,0.9);padding:8px 14px;border-radius:8px;color:#000;text-decoration:none;font-weight:600;}
.card--overlay:hover .card__media img{transform:scale(1.04);}

توضیح: این الگو یک اورلی روی تصویر اضافه می‌کند تا دکمه «مشاهده پروژه» برجسته شود. استفاده از opacity و transform انیمیشن نرم و قابل‌پذیری ایجاد می‌کند بدون فشار زیاد روی پردازشگر.

مقایسه سریع تکنیک‌ها

نتیجه‌گیری و بهترین روش‌ها

• از ساختار معنایی استفاده کنید تا دسترسی‌پذیری و SEO تقویت شود.
• با CSS Grid کارت‌ها را در صفحه مرتب کنید و در داخل کارت از Flexbox بهره ببرید.
• عملکرد را با تصاویر بهینه، lazy-loading و CSS variables حفظ کنید.
• فوکوس و حالت‌های تعاملی را فراموش نکنید تا تجربه کاربری برای همه کاربران مناسب باشد.

با ترکیب این روش‌ها می‌توانید کارت‌های پروژه زیبا، سریع و دسترس‌پذیر ایجاد کنید که هم در دسکتاپ و هم در موبایل عملکرد خوبی دارند. اکنون می‌توانید الگوها را بر اساس نیاز پروژه‌تان سفارشی کنید—اضافه کردن وضعیت پروژه، آیکون‌ها، یا تعاملات بیشتر به سادگی امکان‌پذیر است.

لطفاً از کمبود ها و مشکلات این محتوا برای ما بنویسید

ارسال