title: CSS3 - top notification bubble
body: <p>How to add pure css notification bubble for the following example</p>
  
  <p><strong><em>Code CSS</em></strong></p>
  
  <pre><code>&lt;style&gt;
  
  .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);}
  
  &lt;/style&gt;
  </code></pre>
  
  <p><strong><em>Code HTML</em></strong></p>
  
  <pre><code>&lt;a href="#" class="outer add_user"&gt;
  
  &lt;span&gt;Test&lt;/span&gt;
  
  &lt;/a&gt;
  </code></pre>
  
  <p><strong><em>Results</em></strong></p>
  
  <p><img src="https://i.stack.imgur.com/DpkjJ.png" alt="enter image description here"></p>
  
  <p><strong><em>Question</em></strong></p>
  
  <p>How to add pure css notification bubble at the top of the box just like this example.</p>
  
  <p><img src="https://i.stack.imgur.com/SVz16.png" alt="enter image description here"></p>
  
  <p>as you might seen there is blue ball that shows numbers, how to apply such notification ball based on the above example. ~ Thanks</p>