CSS3 - top notification bubble - html

Question

How to add pure css notification bubble for the following example
Code CSS
<style>
.outer{
width:103px;
height:113px;
display:inline-block;
padding:5px;
margin:25px 14px 15px 14px;
font-size: 14px;
font-weight:bold;
color:#8E9FA9;
text-transform: uppercase;
border:1px solid #cccece;
text-align:center;
background-color:#f8f8f8;
letter-spacing: -0.06em;
-webkit-text-shadow: #ffffff 1px 1px;
moz-text-shadow: #ffffff 1px 1px;
text-shadow: #ffffff 1px 1px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
-webkit-box-shadow: 0 3px 2px 1px rgba(0, 0, 0, 0.03);
-moz-box-shadow: 0 3px 2px 1px rgba(0, 0, 0, 0.03);
box-shadow: 0 3px 2px 1px rgba(0, 0, 0, 0.03);
}
.outer:hover {
color:#7D878E !important;
-webkit-box-shadow: 0px 3px 2px 1px rgba(0, 0, 0, 0.05);
-moz-box-shadow: 0px 3px 2px 1px rgba(0, 0, 0, 0.05);
box-shadow: 0px 3px 2px 1px rgba(0, 0, 0, 0.05);
}
a.outer span {
font-size: 14px;
display:block;
padding:86px 0 6px 0;
background-repeat:no-repeat;
background-color:#f1f2f3;
background-position:50% 18px;
}
a.outer span:hover {background-position:50% -98px;}
a.outer.add_user span {background-image:url(icon_big_user_add.png);}
</style>
Code HTML
<a href="#" class="outer add_user">
<span>Test</span>
</a>
Results
Question
How to add pure css notification bubble at the top of the box just like this example.
as you might seen there is blue ball that shows numbers, how to apply such notification ball based on the above example. ~ Thanks

Answer 1

See this fiddle.
CSS:
.outer {
width:103px;
height:113px;
display:inline-block;
padding:5px;
margin:25px 14px 15px 14px;
font-size: 14px;
font-weight:bold;
color:#8E9FA9;
text-transform: uppercase;
border:1px solid #cccece;
text-align:center;
background-color:#f8f8f8;
letter-spacing: -0.06em;
-webkit-text-shadow: #ffffff 1px 1px;
moz-text-shadow: #ffffff 1px 1px;
text-shadow: #ffffff 1px 1px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
-webkit-box-shadow: 0 3px 2px 1px rgba(0, 0, 0, 0.03);
-moz-box-shadow: 0 3px 2px 1px rgba(0, 0, 0, 0.03);
box-shadow: 0 3px 2px 1px rgba(0, 0, 0, 0.03);
}
.outer:hover {
color:#7D878E !important;
-webkit-box-shadow: 0px 3px 2px 1px rgba(0, 0, 0, 0.05);
-moz-box-shadow: 0px 3px 2px 1px rgba(0, 0, 0, 0.05);
box-shadow: 0px 3px 2px 1px rgba(0, 0, 0, 0.05);
}
a.outer span {
font-size: 14px;
display:block;
padding:80px 0 6px 0;
}
.num_notifs {
border-radius: 5px;
width: 50%;
margin-top: 2px;
background: #00b7ea; /* Old browsers */
background: -moz-linear-gradient(top, #00b7ea 0%, #0052bf 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop(100%,#0052bf)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #00b7ea 0%,#0052bf 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #00b7ea 0%,#0052bf 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #00b7ea 0%,#0052bf 100%); /* IE10+ */
background: linear-gradient(to bottom, #00b7ea 0%,#0052bf 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#0052bf',GradientType=0 ); /* IE6-9 */
text-align: center;
color: white;
text-decoration: none;
font-weight: none;
}
HTML:
<a href="#" class="outer add_user">
<div class="num_notifs">4319</div>
<span>Test</span>
</a>