CSS - iOS notification badge DIVs

by aybalasubramanian

HTML

<div class="app">
    <div class="notification"></div>
</div>
<div class="app">
    <div class="notification">1</div>
</div>
<div class="app">
    <div class="notification">9</div>
</div>
<div class="app">
    <div class="notification">10</div>
</div>
<div class="app">
    <div class="notification">99</div>
</div>
<div class="app">
    <div class="notification">1000</div>
</div>
<div class="app">
    <div class="notification">9999</div>
</div>

CSS

.notification {
    min-width:.5em;
    height:1.3em;
    padding:0 .375em;
    font:bold 1em Arial;
    line-height:1.4em;
    color: white;
    border-radius: 1em;
    box-shadow: 0 .25em .4em rgba(0, 0, 0, .33);
    background-clip:padding-box;
    background-color:#e91823;
    background-image: linear-gradient(top, #F9BABD 0%, #ED3F48 50%, #E91822 50%, #C50104 100%);
    background-image: -o-linear-gradient(top, #F9BABD 0%, #ED3F48 50%, #E91822 50%, #C50104 100%);
    background-image: -ms-linear-gradient(top, #F9BABD 0%, #ED3F48 50%, #E91822 50%, #C50104 100%);
    background-image: -moz-linear-gradient(top, #F9BABD 0%, #ED3F48 50%, #E91822 50%, #C50104 100%);
    background-image: -webkit-linear-gradient(top, #F9BABD 0%, #ED3F48 50%, #E91822 50%, #C50104 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #F9BABD), color-stop(0.5, #ED3F48), color-stop(0.5, #E91822), color-stop(1, #C50104));
}
.app {
    width:4em;
    height:4em;
    float:left;
    margin:1em;
    border-radius:.65em;
    background:#ccc;
}
.app .notification {
    float:right;
    position:relative;
    top:-.5em;
    right:-.5em;
}