ساخت کارت اطلاعیه با CSS

کارت اطلاعیه یکی از عناصر کلیدی رابط‌های کاربری است که وظیفهٔ نمایش پیام‌های کوتاه، هشدارها یا تأییدیه‌ها را دارد. کارت‌های اطلاعیه باید خوانا، قابل دسترس و سبک باشند تا تجربهٔ کاربری بهتری فراهم کنند. در این مقاله به صورت عملی نحوهٔ ساخت کارت اطلاعیه با CSS همراه با مثال، بهینه‌سازی و نکات دسترسی (accessibility) توضیح داده می‌شود.

ویژگی‌های اصلی یک کارت اطلاعیه خوب

• خوانایی بالا (رنگ، فاصله و اندازه فونت)
• دسترسی‌پذیری (ARIA، فوکوس کیبورد، ترجیح حرکت کم)
• قابلیت واکنش‌گرایی (Responsive) و نمایش صحیح در موبایل
• قابلیت بستن و زمان‌بندی خودکار (dismiss / auto-hide)
• انواع مختلف (خطا، موفقیت، اطلاع‌رسانی، هشدار)

نمونهٔ پایه: HTML کارت اطلاعیه

<div class="notif-card notif-info" role="status" aria-live="polite">
  <div class="notif-icon">ℹ️</div>
  <div class="notif-content">
    <strong>اطلاع:</strong>
    <span>نسخه جدید آمادهٔ دانلود است.</span>
  </div>
  <button class="notif-close" aria-label="بستن اطلاعیه">&times;</button>
</div>

توضیح: این کد ساختار HTML کارت را نشان می‌دهد. از role=”status” و aria-live=”polite” برای اعلام تغییرات بدون مانع شدن تجربهٔ کاربری استفاده شده است. دکمهٔ بستن برای دسترسی کیبورد ضروری است.

CSS پایه برای استایل کارت

:root{
  --bg:#fff;
  --text:#222;
  --info:#2b9fff;
  --success:#28a745;
  --error:#dc3545;
  --warning:#ffb020;
  --radius:8px;
  --shadow:0 6px 18px rgba(0,0,0,.08);
}

.notif-card{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border-radius:var(--radius);
  background:var(--bg);
  color:var(--text);
  box-shadow:var(--shadow);
  max-width:420px;
  margin:8px;
  transform-origin:top right;
  transition:transform .24s cubic-bezier(.2,.9,.3,1), opacity .2s ease;
  opacity:1;
}

.notif-icon{ font-size:20px; }

.notif-content{ font-size:14px; line-height:1.3; }

.notif-close{
  margin-left:auto;
  background:none;
  border:none;
  font-size:18px;
  cursor:pointer;
}

/* Variants */.notif-info{ border-left:4px solid var(--info); }
.notif-success{ border-left:4px solid var(--success); }
.notif-error{ border-left:4px solid var(--error); }
.notif-warning{ border-left:4px solid var(--warning); }

/* Hidden state for transitions */.notif-card.hidden{
  opacity:0;
  transform:translateY(-8px) scale(.98);
  pointer-events:none;
}

/* Reduced motion preference */@media (prefers-reduced-motion: reduce){
  .notif-card{ transition:none; }
}

توضیح: این CSS مجموعه‌ای از متغیرها و قواعد پایه را تعریف می‌کند. از transitions برای انیمیشن ورود/خروج استفاده شده و با class=”hidden” کارت به صورت محو و جابه‌جا می‌شود. همچنین با media query برای کاربران با ترجیح حرکت کم سازگاری در نظر گرفته شده است.

اضافه کردن جاوااسکریپت برای بستن و خودکار پنهان‌سازی

document.addEventListener('click', function(e){
  if(e.target.matches('.notif-close')){
    const card = e.target.closest('.notif-card');
    if(card){
      card.classList.add('hidden');
      setTimeout(()=> card.remove(), 300);
    }
  }
});

// Auto-dismiss after 5s
function showAutoDismiss(card, timeout = 5000){
  const t = setTimeout(()=>{
    card.classList.add('hidden');
    setTimeout(()=> card.remove(), 300);
  }, timeout);

  // Pause on mouseenter
  card.addEventListener('mouseenter', ()=> clearTimeout(t));
}

توضیح: این کد امکان بستن دستی کارت با دکمهٔ بستن و پنهان‌سازی خودکار پس از 5 ثانیه را فراهم می‌کند. همچنین اگر کاربر نشانگر ماوس را روی کارت ببرد، زمان‌بندی پاک می‌شود تا پیام هنگام مرور ناگهانی پاک نشود.

نکات پیشرفته و بهینه‌سازی

• دسترسی (Accessibility): برای هشدارهای فوری از role=”alert” استفاده کنید؛ برای اطلاع‌رسانی‌های معمولی role=”status” مناسب‌تر است. همیشه aria-label روی دکمهٔ بستن قرار دهید.
• پرفرمنس: سعی کنید تنها از transform و opacity برای انیمیشن استفاده کنید تا از reflow و repaints سنگین جلوگیری شود. از will-change با احتیاط استفاده کنید.
• ترجیحات کاربر: از media query prefers-reduced-motion برای غیرفعال کردن انیمیشن‌ها برای کاربران حساس به حرکت استفاده کنید.
• قابلیت دسته‌بندی (Stacking): وقتی چند کارت همزمان نمایش می‌دهید، از container مختص با z-index مناسب و فاصلهٔ عمودی استفاده کنید.

مثال بهبود یافته: استفاده از transform برای ورود

.notif-card{
  will-change: transform, opacity;
  transform: translateY(-6px) scale(.995);
  opacity:0;
}

/* on show */.notif-card.show{
  transform: translateY(0) scale(1);
  opacity:1;
}

توضیح: در این نسخه کارت‌ها به صورت اولیه مخفی و کوچک شده‌اند و با افزودن کلاس show انیمیشن ورود با transform و opacity انجام می‌شود. این روش سبکتر است و بار روی پردازنده را کاهش می‌دهد.

مثال‌های کاربردی و سناریوها

• اعلان بروزرسانی نرم‌افزار: کارت اطلاع‌رسانی با دکمهٔ دانلود/بعداً
• هشدار خطای فرم: کارت خطا با role=”alert” و تمرکز خودکار روی آن برای کاربران اسپیل‌خوان
• پیغام موفقیت: بعد از ارسال فرم، کارت سبز رنگ با آیکون تیک
• نوتیفیکیشن‌های دسته‌ای: صف نمایش کارت‌ها در گوشهٔ صفحه با قابلیت بستن هر کدام

جدول مقایسهٔ انواع کارت

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

ساخت کارت اطلاعیه با CSS و کمی جاوااسکریپت ساده و قابل گسترش است. تمرکز روی دسترسی، عملکرد و تجربهٔ کاربری (UX) از اصول کلیدی است. از متغیرهای CSS برای یکپارچگی رنگ و قابلیت سفارشی‌سازی استفاده کنید و همیشه به ترجیحات کاربران (مثل کاهش حرکت) احترام بگذارید. بهینه‌سازی انیمیشن‌ها با transform/opacity و مدیریت صف کارت‌ها برای برنامه‌های پیچیده‌تر ضروری است.

اگر می‌خواهید نمونه‌ای آماده و قابل استفاده در پروژهٔ خود دریافت کنید، می‌توانم یک نسخهٔ کامل‌تر با پشتهٔ کارت، آیکون‌های SVG و مدیریت صف با استفاده از کلاس‌های CSS و API سادهٔ جاوااسکریپت تولید کنم.

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

ارسال