Badge Text

by nirus

HTML

<h1>Badge Testing</h1>  
 <div style="background: no-repeat url('mail.jpg');width: 111px; height: 68px;">
 <span class = "badgeText">5</span>
 </div>

CSS

.badgeText{
float:right;
background-image: -webkit-linear-gradient(top, #ff1a1a, #e60000 3%, #b30000);
color: #ffcccc;
top:-0.2em;
margin: 0 0 0 0;
padding: 0.1em 0em 0.2em 0em;
font-size: 10px;
line-height: 12px;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
min-width: 2em;
background-clip: padding-box;
border-radius: 3em;
text-shadow: rgba(0, 0, 0, 0.5) 0 -0.08em 0;
-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0 0.1em 0.1em;
box-shadow: rgba(0, 0, 0, 0.5) 0 0.1em 0.1em;
z-index: 2;
position: relative !important;
width: auto;
right: 0;
border: 2.5px solid #aaaaaa;
max-width: 95%;
font-family: "Helvetica Neue", HelveticaNeue, "Helvetica-Neue", Helvetica, "BBAlpha Sans", sans-serif;
white-space: nowrap;
text-overflow: ellipsis;
text-align: center;
display: block;
overflow: hidden;
font-weight: bold;
-webkit-box-flex: 1;
-webkit-box-align: center;
}