Thursday 11 June 2015

Notification Bubble using CSS

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>

No comments:

Post a Comment