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

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

ویژگی‌ها و موارد استفاده

• نمایش پروژه‌ها در گالری نمونه‌کار (portfolio)
• کارت‌های محصول در صفحات فروشگاهی
• کارت‌های اطلاعات در داشبوردها و پنل‌ها
• افزایش تعامل کاربر هنگام hover یا تمرکز صفحه

روش ساده: استفاده از border-image و گرادیان

<div class="project-card">
  <h4>Project Title</h4>
  <p>Short description...</p>
</div>

/* CSS */.project-card{
  position:relative;
  padding:20px;
  background:#111;
  color:#fff;
  border:4px solid transparent;
  border-radius:12px;
  border-image: linear-gradient(90deg,#00f,#0ff,#0f0,#ff0,#f0f) 1;
  transition: transform .25s ease;
}
.project-card:hover{
  transform: translateY(-6px);
}

توضیح: این روش از border-image با یک گرادیان خطی استفاده می‌کند تا حاشیه رنگی ایجاد شود. مزیت: ساده و قابل پشتیبانی. محدودیت: تنها یک تصویر حاشیه و کنترل انیمیشن داخلی کمتری دارد و برای جلوه‌های پیچیده مناسب نیست.

روش بهینه: استفاده از Pseudo-elements و Transform

<div class="card">
  <div class="card-content">
    <h4>Project Name</h4>
    <p>A short description of the project and technologies used.</p>
  </div>
</div>

/* CSS */.card{
  position:relative;
  padding:20px;
  background:#0f1724;
  color:#e6eef8;
  border-radius:12px;
  overflow:hidden;
}
.card::before,
.card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:2px; /* thickness of the animated border */  -webkit-mask:
    linear-gradient(#fff,#fff) content-box,
    linear-gradient(#fff,#fff);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
}
.card::before{
  background: linear-gradient(90deg,#ff0080,#7928ca,#00c6ff);
  z-index:1;
  transform:translateX(-100%);
  transition:transform .6s cubic-bezier(.2,.9,.2,1);
}
.card::after{
  background: rgba(255,255,255,0.03);
  z-index:0;
}
.card:hover::before,
.card:focus-within::before{
  transform:translateX(0);
}
.card-content{ position:relative; z-index:2;}

توضیح: این الگو از ::before برای ایجاد نوار حاشیه‌ی متحرک استفاده می‌کند. تکنیک ماسک (mask) به جای border سنتی به ما امکان می‌دهد فقط ناحیه حاشیه را نشان دهیم. استفاده از transform و transition عملکرد بهتری دارد چون روی GPU شتاب می‌گیرد و روان‌تر اجرا می‌شود. همچنین pointer-events:none باعث می‌شود حاشیه جلوی تعامل محتوای کارت را نگیرد.

نسخه پیشرفته: چند خط متحرک با انیمیشن پیوسته

.card-anim::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:14px;
  background:
    linear-gradient(90deg, rgba(255,0,150,1), rgba(0,200,255,1)) 0/200% 100%;
  z-index:1;
  animation: slide 4s linear infinite;
  -webkit-mask:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(#fff,#fff);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
@keyframes slide{
  0%{ background-position:0% 50%;}
  100%{ background-position:200% 50%;}
}

توضیح: در این نسخه یک گرادیان با اندازهٔ بیشتر از عنصر تعریف شده و با انیمیشن جا‌به‌جایی پس‌زمینه، اثر حرکت دائمی ایجاد می‌شود. این روش برای کارت‌هایی که باید همیشه برجسته باشند مناسب است، اما مراقب باشید مصرف پردازشی را افزایش ندهد؛ انیمیشن‌های کندتر و تنها روی hover ترجیح داده می‌شوند.

نکات عملیاتی و بهترین شیوه‌ها

• برای بهینه‌سازی، از transform و opacity برای انیمیشن استفاده کنید تا از شتاب‌دهی سخت‌افزاری بهره ببرید.
• در موبایل، انیمیشن‌های سنگین را غیرفعال یا ساده کنید تا مصرف باتری کاهش یابد.
• از prefers-reduced-motion پشتیبانی کنید تا کاربرانی که انیمیشن را غیرفعال کرده‌اند تجربه مناسبی داشته باشند.
• از رنگ‌ها و کنتراست مناسب استفاده کنید تا متن کارت همیشه خوانا بماند.
• برای تعامل صفحه‌کلید، از :focus-within یا tabindex استفاده کنید تا دسترسی‌پذیری حفظ شود.

نمونه پشتیبانی کاهش حرکت

@media (prefers-reduced-motion: reduce){
  .card::before,
  .card-anim::before{
    animation:none;
    transition:none;
  }
}

توضیح: این media query اطمینان می‌دهد کاربرانی که حرکت را ترجیح نمی‌دهند به تنظیمات سیستمشان احترام گذاشته شود و انیمیشن‌ها غیرفعال می‌شوند.

جدول مقایسهٔ ویژگی‌ها

نکات تکمیلی برای توسعه‌دهندگان

• در پروژه‌های تولیدی، از متغیرهای CSS (CSS variables) برای رنگ‌ها و ضخامت حاشیه استفاده کنید تا امکان تغییر آسان فراهم شود.
• برای عملکرد بهتر در شبکه‌های اجتماعی یا سرور-ساید رندرینگ، مطمئن شوید استایل‌ها داخل CSS اصلی بارگذاری می‌شوند و از بارگذاری هوشمند (critical CSS) استفاده کنید.
• همیشه تست ریسپانسیو انجام دهید: حاشیه در اندازه‌های کوچک نباید فضای داخلی کارت را تحت تأثیر قرار دهد.

جمع‌بندی و توصیه‌های نهایی

حاشیه متحرک با CSS روشی قدرتمند برای افزایش جذابیت کارت‌های پروژه است. با انتخاب تکنیک مناسب — ساده برای موارد سبک و pseudo-elements برای کنترل و عملکرد بهتر — می‌توانید تجربه‌ای حرفه‌ای و دسترس‌پذیر ارائه دهید. همیشه به بهینه‌سازی، پشتیبانی از prefere-reduced-motion و تست در دستگاه‌های مختلف توجه کنید.

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

ارسال