Uygulamalı CSS3 ve HTML5 sayısal badge (rozet) örnekleri

Badge (rozet), bir bağlantının kaç öğe ile ilişkili olduğunu belirten sayısal göstergelerdir.

Örneğin:

• Haber 23
• Oy 10
• Paylaşılan 5

Yukarıda gösterildiği gibi 23, 10, 5 sayısal numaralar rozet(badge) olarak adlandırılırlar.
Rozet oluşturmak için .rozet sınıfını(class) <span> etiketinin içinde aşağıdaki örnekteki gibi kullanabiliriz.

• Sıcak Pembe 16
• Menekşe 12
• Açık Mavi 10
• Gri 10
• Kestane Rengi 7

CSS sınıfı örneğimiz ise aşağıdaki gibidir.

.rozet {
	font-family: "Verdana";
	font-size: 10px;
	font-weight: 700;
	padding-bottom: 4px;
	padding-left: 6px;
	padding-right: 6px;
	text-shadow: none;
	display: inline-block;
	min-width: 10px;
	padding: 3px 7px;
	line-height: 1;
	color: #FFF;
	text-align: center;
	white-space: nowrap;
	vertical-align: baseline;
	border-radius: 10px;
}
/*Renkler için */
.sicak_pembe {
	background-color:HotPink;
	color: #FFF;
}
.kestane_rengi {
	background-color:#8f0621;
	color: #FFF;
}
.giri_renk {
	background-color: #CCC;
	color: #FFF;
}
.acik_mavi {
	background-color: #2d87ef;
	color: #FFF;
}
.menekse {
	background-color: #5b39b6;
	color: #FFF;
}

Rozetler diger etiketlerin içinde de kullanılabilirler.
Örneğin button içinde
Oy Kullanalar 14
 

  <button class="btn btn-primary">Oy Kullananlar <span class="rozet lacivert">14</span></button>

Rozet oluşturmanın diğer bir şeklide HTML5′ in data-attribute özniteliği ile CSS attr() işlevini(function) birlikte kullanmaktır.

    <a class="button" href="#" data-notifications="10">Yorumlar</a>

CSS kulanımı

[data-notifications] {
  position: relative; /*etiket pozisyonunun relative olduguna emin olalım*/
}

[data-notifications]:after {
  content: attr(data-notifications);
  position: absolute;
  background: #FF0000;
  border-radius: 50%;
  display: inline-block;
  padding: 0.3em;
  color: #f2f2f2;
  right: -15px;
  top: -15px;   
}

Demo sayfasında sayısal ve diğer rozetlerle alakalı onlarca örnek bulabilirsiniz.