Bildirim banner'ları

Coddy'nin HTML Journey'sinin Practical Frontend bölümünün bir parçası — ders 24 / 35.

Bildirim banner'ları, kullanıcıları başarı mesajları, uyarılar veya hatalar gibi önemli bilgiler hakkında bilgilendirir. Genellikle bir sayfanın üstünde veya altında görünürler. Muhtemelen bunların şu gibi durumlar için kullanıldığını görmüşsünüzdür:

Başarı mesajları – örneğin, “Profiliniz başarıyla güncellendi.”
Hata mesajları – örneğin, “Bir şeyler yanlış gitti, lütfen tekrar deneyin.”
Bilgi uyarıları – örneğin, “Gizlilik politikamızı güncelledik.”

Basit bir bildirim başlığı oluşturalım. Temel bir kapsayıcı ile başlayın:

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

Öne çıkmasını sağlamak için biraz stil ekleyin:

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

Bu, beyaz metinli yeşil bir bildirim başlığı oluşturur.

Görev

Kolay

Bir bildirim başlığı (banner) için HTML kodu size verilmiştir. Göreviniz, onu gerçek bir başarı mesajı gibi görünecek şekilde stillendirmektir.

Göreviniz:

display: flex ve align-items: center kullanarak simgeyi ve metni yan yana yerleştirin.
Daha okunabilir hale getirmek için başlığın içine padding ekleyin.
Bir başarı bildirimi olduğu için başlığa yeşil bir arka plan (#4CAF50) verin ve metni beyaz yapın.
Köşeleri yuvarlayın.
Başlığa derinlik kazandırmak için bir box shadow ekleyin.
margin-right kullanarak simge ile metin arasına boşluk ekleyin.
font-size: 18px ile simgeyi biraz daha büyük yapın.

Hedef: Başlığınız, solda bir onay işareti simgesi ve sağda metin bulunan temiz bir başarı mesajı gibi görünmelidir.

Kopya kağıdı

Bildirim banner'ları, kullanıcıları başarı mesajları, uyarılar veya hatalar gibi önemli bilgiler hakkında uyarır. Genellikle bir sayfanın üstünde veya altında görünürler.

Temel bir bildirim banner'ı oluşturun:

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

Bildirim banner'ını stillendirin:

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

Simgeli banner'lar için içeriği hizalamak üzere flexbox kullanın:

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

Kutu gölgesi ve öğeler arasındaki boşlukla derinlik ekleyin:

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

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

Kendin dene

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