الشارات

جزء من قسم Practical Frontend في رحلة HTML على Coddy — الدرس 22 من 35.

الشارات هي مؤشرات صغيرة تُستخدم لإظهار الأعداد أو الحالة بجانب عنصر آخر. مثال: دائرة حمراء بها رقم تُظهر الرسائل غير المقروءة. غالباً ما يتم إرفاقها بـ الأزرار، أو الأيقونات، أو صور الملف الشخصي.

لماذا هي مهمة:

تجعل المعلومات المهمة (مثل الإشعارات) مرئية بسرعة.
تُستخدم بشكل شائع في التطبيقات، ووسائل التواصل الاجتماعي، ومواقع التجارة الإلكترونية.

لنقم بإنشاء شارة بسيطة:

أولاً، قم بإنشاء عنصر HTML أساسي لاحتواء شارتك:

<button class="btn">
  Messages <span class="badge">5</span>
</button>

بعد ذلك، أضف بعض لغة CSS الأساسية لتنسيق الشارة:

.btn {
  position: relative;
  padding: 10px 20px;
  font-size: 16px;
}

.badge {
  position: absolute;
  top: -5px;
  right: -10px;
  background: red;
  color: white;
  border-radius: 50%;
  padding: 4px 8px;
  font-size: 12px;
}

بهذا، توضع الشارة في زاوية الزر لتظهر عدد الرسائل.

التحدي

سهل

لقد تم تزويدك بـ HTML يحتوي على عدة أزرار. مهمتك هي إنشاء شارات (badges) تظهر في الزاوية العلوية اليمنى لكل زر باستخدام CSS فقط. مهمتك هي:

تعيين موضع الشارة: استخدم position: absolute حتى تتمكن من وضعها بالنسبة للزر.
وضعها في الزاوية العلوية اليمنى: استخدم قيمًا سالبة لـ top و right.
تعيين الألوان والنص: استخدم خلفية حمراء ونصًا أبيض.
ضبط الخط والحشوة (padding): قم بتعيين font-size: 12px; font-weight: bold; padding: 4px 7px;.
جعلها دائرية وإضافة عمق: استخدم border-radius وظل صندوق صغير (box-shadow: 0 2px 4px rgba(0,0,0,0.2)).

ورقة مرجعية

الشارات (Badges) هي مؤشرات صغيرة تُستخدم لإظهار الأعداد أو الحالة بجانب عنصر آخر، وعادةً ما يتم إرفاقها بـ الأزرار أو الأيقونات أو الصور الشخصية.

هيكل HTML الأساسي:

<button class="btn">
  Messages <span class="badge">5</span>
</button>

تنسيق CSS للشارات:

.btn {
  position: relative;
  padding: 10px 20px;
  font-size: 16px;
}

.badge {
  position: absolute;
  top: -5px;
  right: -10px;
  background: red;
  color: white;
  border-radius: 50%;
  padding: 4px 8px;
  font-size: 12px;
}

الخصائص الرئيسية:

position: absolute - يسمح بتموضع دقيق بالنسبة للعنصر الأب
قيم top و right السالبة - تضع الشارة خارج العنصر الأب
border-radius: 50% - ينشئ شكلاً دائرياً
box-shadow - يضيف عمقاً وفصلاً مرئياً

جرّب بنفسك

<!DOCTYPE html>
<html>
<head>
  <title>Badges</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 40px;
      background-color: #f5f5f5;
      display: flex;
      gap: 20px;
    }

    .button {
      position: relative; /* needed for badge positioning */
      padding: 12px 25px;
      font-size: 16px;
      border: none;
      border-radius: 8px;
      background-color: #4cafef;
      color: white;
      cursor: pointer;
    }

    .button:hover {
      background-color: #3a92d8;
    }

    .badge {
      
    }
  </style>
</head>
<body>

  <button class="button">
    Messages
    <span class="badge">5</span>
  </button>

  <button class="button">
    Notifications
    <span class="badge">!</span>
  </button>

  <button class="button">
    Cart
    <span class="badge">3</span>
  </button>

</body>
</html>