Notification bubble using CSS.
<style type="text/css">
.notification{
height: 14px;
-moz-border-radius: 36px;
border-radius: 36px;
width: 14px;
padding: 3px;
display: inline-block;
color: #fff;
text-shadow: 0px 1px 1px #707070;
font-weight: bold;
font-family: helvetica;
text-align: center;
font-size: 12px;
top: -13px;
right: 10px;
position: absolute;
}
.pink{
background-color: #f4a1b2;
border: 1px solid #cf5161;
background: -webkit-linear-gradient(top, #f4a1b2 0%, #f56879 100%);
background: -moz-linear-gradient(top, #f4a1b2 0%, #f56879 100%);
background: -ms-linear-gradient(top, #f4a1b2 0%, #f56879 100%);
background: -o-linear-gradient(top, #f4a1b2 0%, #f56879 100%);
background: linear-gradient(top, #f4a1b2 0%, #f56879 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4a1b2', endColorstr='#f56879',GradientType=0 );
}
.yellow{
background-color: #fecf63;
border: 1px solid #e8aa44;
background: -webkit-linear-gradient(top, #fee499 0%, #febc4b 100%);
background: -moz-linear-gradient(top, #fee499 0%, #febc4b 100%);
background: -ms-linear-gradient(top, #fee499 0%, #febc4b 100%);
background: -o-linear-gradient(top, #fee499 0%, #febc4b 100%);
background: linear-gradient(top, #fee499 0%, #febc4b 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fee499', endColorstr='#febc4b',GradientType=0 );
}
.blue{
background-color: #91daf6;
border: 1px solid #7cb7cd;
background: -webkit-linear-gradient(top, #c2ecfa 0%, #71cef3 100%);
background: -moz-linear-gradient(top, #c2ecfa 0%, #71cef3 100%);
background: -ms-linear-gradient(top, #c2ecfa 0%, #71cef3 100%);
background: -o-linear-gradient(top, #c2ecfa 0%, #71cef3 100%);
background: linear-gradient(top, #c2ecfa 0%, #71cef3 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c2ecfa', endColorstr='#71cef3',GradientType=0 );
}
</style>
<div id="div_notification" runat="server" class="notification pink">
<asp:Label ID="lblNotification" runat="server" Text="2"></asp:Label></div>
<style type="text/css">
.notification{
height: 14px;
-moz-border-radius: 36px;
border-radius: 36px;
width: 14px;
padding: 3px;
display: inline-block;
color: #fff;
text-shadow: 0px 1px 1px #707070;
font-weight: bold;
font-family: helvetica;
text-align: center;
font-size: 12px;
top: -13px;
right: 10px;
position: absolute;
}
.pink{
background-color: #f4a1b2;
border: 1px solid #cf5161;
background: -webkit-linear-gradient(top, #f4a1b2 0%, #f56879 100%);
background: -moz-linear-gradient(top, #f4a1b2 0%, #f56879 100%);
background: -ms-linear-gradient(top, #f4a1b2 0%, #f56879 100%);
background: -o-linear-gradient(top, #f4a1b2 0%, #f56879 100%);
background: linear-gradient(top, #f4a1b2 0%, #f56879 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4a1b2', endColorstr='#f56879',GradientType=0 );
}
.yellow{
background-color: #fecf63;
border: 1px solid #e8aa44;
background: -webkit-linear-gradient(top, #fee499 0%, #febc4b 100%);
background: -moz-linear-gradient(top, #fee499 0%, #febc4b 100%);
background: -ms-linear-gradient(top, #fee499 0%, #febc4b 100%);
background: -o-linear-gradient(top, #fee499 0%, #febc4b 100%);
background: linear-gradient(top, #fee499 0%, #febc4b 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fee499', endColorstr='#febc4b',GradientType=0 );
}
.blue{
background-color: #91daf6;
border: 1px solid #7cb7cd;
background: -webkit-linear-gradient(top, #c2ecfa 0%, #71cef3 100%);
background: -moz-linear-gradient(top, #c2ecfa 0%, #71cef3 100%);
background: -ms-linear-gradient(top, #c2ecfa 0%, #71cef3 100%);
background: -o-linear-gradient(top, #c2ecfa 0%, #71cef3 100%);
background: linear-gradient(top, #c2ecfa 0%, #71cef3 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c2ecfa', endColorstr='#71cef3',GradientType=0 );
}
</style>
<div id="div_notification" runat="server" class="notification pink">
<asp:Label ID="lblNotification" runat="server" Text="2"></asp:Label></div>