Rozetler

Coddy'nin HTML Journey'sinin Practical Frontend 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ç buton içeren bir HTML verilmiştir. Göreviniz, sadece CSS kullanarak her butonun sağ üst köşesinde görünen badges (rozetler) oluşturmaktır. Göreviniz:

Rozet konumunu ayarlayın: Butona göre konumlandırabilmek için position: absolute kullanın.
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ç boşluğu (padding) ayarlayın: font-size: 12px; font-weight: bold; padding: 4px 7px; değerlerini ayarlayın.
Dairesel hale 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.

Kopya kağıdı

Rozetler (Badges), başka bir öğenin yanında sayıları veya durumu göstermek için kullanılan küçük göstergelerdir; genellikle butonlara, simgelere veya profil resimlerine eklenirler.

Temel HTML yapısı:

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

Rozetler için CSS stillendirmesi:

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

Temel özellikler:

position: absolute - üst öğeye göre hassas konumlandırma sağlar
Negatif top ve right değerleri - rozeti üst öğenin dışına konumlandırır
border-radius: 50% - dairesel şekil oluşturur
box-shadow - derinlik ve görsel ayrım ekler

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>