Rozetler

Coddy'nin HTML Journey'sinin Pratik Ön Yüz bölümünün bir parçası. Ders 22 / 35.

Rozetler, başka bir öğenin yanında sayıları veya durumu göstermek için kullanılan küçük göstergelerdir. Örnek: okunmamış mesajları gösteren sayılı kırmızı bir daire. Genellikle düğmelere, simgelere veya profil resimlerine eklenirler.

Neden önemlidirler:

Önemli bilgileri (bildirimler gibi) hızlıca görünür hale getirirler.
Genellikle uygulamalarda, sosyal medyada ve e-ticaret web sitelerinde kullanılırlar.

Basit bir rozet oluşturalım:

İlk olarak, rozetinizi barındırmak için temel bir HTML öğesi oluşturun:

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

Ardından, rozeti stillendirmek için bazı temel CSS'ler ekleyin:

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

Bununla birlikte rozet, mesaj sayısını gösterecek şekilde düğmenin köşesinde yer alır.

Görev

Kolay

Size birkaç düğme içeren HTML veriliyor. Göreviniz, yalnızca CSS kullanarak her düğmenin sağ üst köşesinde görünen rozetler oluşturmaktır. Göreviniz:

Rozetin konumunu ayarlayın: Düğmeye göre konumlandırabilmek için position: absolute kullanın.
Rozeti sağ üst köşeye yerleştirin: top ve right için negatif değerler kullanın.
Renkleri ve metni ayarlayın: Kırmızı bir arka plan ve beyaz metin kullanın.
Yazı tipini ve iç dolguyu ayarlayın: font-size: 12px; font-weight: bold; padding: 4px 7px; ayarlarını yapın.
Rozeti dairesel hâle getirin ve derinlik ekleyin: border-radius ve küçük bir kutu gölgesi (box-shadow: 0 2px 4px rgba(0,0,0,0.2)) kullanın.

GEREKLİ ÇIKTI BİÇİMİ: [Çevrilmiş içeriğiniz burada]

Kendin dene

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