Badges

Teil des Abschnitts Practical Frontend der HTML-Journey von Coddy — Lektion 22 von 35.

Badges sind kleine Indikatoren, die verwendet werden, um Anzahlen oder Status neben einem anderen Element anzuzeigen. Beispiel: ein roter Kreis mit einer Zahl, die ungelesene Nachrichten anzeigt. Sie werden oft an Schaltflächen, Icons oder Profilbildern angebracht.

Warum sie wichtig sind:

Sie machen wichtige Informationen (wie Benachrichtigungen) schnell sichtbar.
Häufig verwendet in Apps, sozialen Medien und E-Commerce-Websites.

Erstellen wir ein einfaches Badge:

Erstellen Sie zunächst ein einfaches HTML-Element, das Ihr Badge enthalten soll:

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

Fügen Sie als Nächstes ein wenig Basis-CSS hinzu, um das Badge zu gestalten:

.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;
}

Damit befindet sich das Badge an der Ecke der Schaltfläche und zeigt die Anzahl der Nachrichten an.

Aufgabe

Einfach

Ihnen wird HTML mit mehreren Schaltflächen zur Verfügung gestellt. Ihre Aufgabe ist es, Badges zu erstellen, die mithilfe von reinem CSS in der oberen rechten Ecke jeder Schaltfläche erscheinen. Ihre Aufgabe:

Legen Sie die Badge-Position fest: Verwenden Sie position: absolute, damit Sie es relativ zur Schaltfläche positionieren können.
Platzieren Sie es in der oberen rechten Ecke: Verwenden Sie negative Werte für top und right.
Legen Sie die Farben und den Text fest: Verwenden Sie einen roten Hintergrund und weißen Text.
Passen Sie die Schriftart und das Padding an: Stellen Sie font-size: 12px; font-weight: bold; padding: 4px 7px; ein.
Machen Sie es kreisförmig und verleihen Sie ihm Tiefe: Verwenden Sie border-radius und einen kleinen Box-Schatten (box-shadow: 0 2px 4px rgba(0,0,0,0.2)).

Spickzettel

Badges sind winzige Indikatoren, die verwendet werden, um Zählwerte oder Status neben einem anderen Element anzuzeigen, häufig angehängt an Schaltflächen, Icons oder Profilbilder.

Grundlegende HTML-Struktur:

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

CSS-Styling für Badges:

.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;
}

Wichtige Eigenschaften:

position: absolute - ermöglicht eine präzise Positionierung relativ zum Elternelement
Negative top und right Werte - positioniert das Badge außerhalb des Elternelements
border-radius: 50% - erzeugt eine kreisförmige Form
box-shadow - fügt Tiefe und visuelle Trennung hinzu

Probier es selbst

<!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>