Benachrichtigungsbanner

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

Benachrichtigungsbanner informieren Benutzer über wichtige Informationen wie Erfolgsmeldungen, Warnungen oder Fehler. Sie erscheinen normalerweise am oberen oder unteren Rand einer Seite. Sie haben sie wahrscheinlich schon für Dinge gesehen wie:

Erfolgsmeldungen – z. B. „Ihr Profil wurde erfolgreich aktualisiert.“
Fehlermeldungen – z. B. „Etwas ist schiefgelaufen, bitte versuchen Sie es erneut.“
Informationshinweise – z. B. „Wir haben unsere Datenschutzbestimmungen aktualisiert.“

Erstellen wir ein einfaches Benachrichtigungsbanner. Beginnen Sie mit einem einfachen Container:

<div class="notification">
  This is a notification message!
</div>

Fügen Sie etwas Styling hinzu, um es hervorzuheben:

.notification {
  background-color: #4CAF50;
  color: white;
  padding: 15px;
  margin-bottom: 15px;
  border-radius: 4px;
}

Dies erstellt ein grünes Benachrichtigungsbanner mit weißem Text.

Aufgabe

Einfach

Ihnen wird das HTML für ein Benachrichtigungsbanner bereitgestellt. Ihre Aufgabe ist es, dieses so zu gestalten, dass es wie eine echte Erfolgsmeldung aussieht.

Ihre Aufgabe:

Platzieren Sie das Icon und den Text nebeneinander, indem Sie display: flex und align-items: center verwenden.
Fügen Sie padding innerhalb des Banners hinzu, um die Lesbarkeit zu erhöhen.
Geben Sie dem Banner einen grünen Hintergrund (#4CAF50) und machen Sie den Text weiß, da es sich um eine Erfolgsmeldung handelt.
Runden Sie die Ecken ab.
Fügen Sie einen box shadow hinzu, damit das Banner eine gewisse Tiefe erhält.
Fügen Sie mithilfe von margin-right einen Abstand zwischen dem Icon und dem Text hinzu.
Machen Sie das Icon mit font-size: 18px etwas größer.

Ziel: Ihr Banner sollte wie eine saubere Erfolgsmeldung mit einem Häkchen-Symbol auf der linken Seite und Text auf der rechten Seite aussehen.

Spickzettel

Benachrichtigungsbanner informieren Benutzer über wichtige Informationen wie Erfolgsmeldungen, Warnungen oder Fehler. Sie erscheinen normalerweise am oberen oder unteren Rand einer Seite.

Erstellen Sie ein einfaches Benachrichtigungsbanner:

<div class="notification">
  This is a notification message!
</div>

Gestalten Sie das Benachrichtigungsbanner:

.notification {
  background-color: #4CAF50;
  color: white;
  padding: 15px;
  margin-bottom: 15px;
  border-radius: 4px;
}

Verwenden Sie für Banner mit Icons Flexbox, um den Inhalt auszurichten:

.notification {
  display: flex;
  align-items: center;
}

Fügen Sie Tiefe mit Box-Shadow und Abständen zwischen den Elementen hinzu:

.notification {
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.notification .icon {
  margin-right: 10px;
  font-size: 18px;
}

Probier es selbst

<!DOCTYPE html>
<html>
<head>
  <title>Notification Banners</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
    }
    
    .notification {
    
    }
    
    .notification_icon {
        
    }
  </style>
</head>
<body>
  <div class="notification notification--success">
    <span class="notification_icon">✓</span>
    <div class="notification_message">Your changes have been saved successfully!</div>
  </div>
</body>
</html>