Make sure your a.messages class is in relative position. Add a div classed .noteblink inside a.messages with a number representing your new messages. This will create a pulsing blue icon. It's small, but gets everyone's attention on the site I work on.
@keyframes noteBlink {
0% { padding: 3px; top: 5px; right: 5px; opacity: 1; }
50% { padding: 1px; top: 7px; right: 7px; opacity: .6; }
100% { padding: 3px; top: 5px; right: 5px; opacity: 1; }
}
@-webkit-keyframes noteBlink {
0% { padding: 3px; top: 5px; right: 5px; opacity: 1; }
50% { padding: 1px; top: 7px; right: 7px; opacity: .6; }
100% { padding: 3px; top: 5px; right: 5px; opacity: 1; }
}
.noteBlink {
position: absolute;
display: inline-block;
top: 5px;
right: 5px;
font-size: 9px;
padding: 3px;
color: #FFF;
border: 1px solid #01589a;
-moz-border-radius : 2px;
-webkit-border-radius : 2px;
border-radius : 2px;
-webkit-box-shadow: 0px 0px 1px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 0px 1px 0px rgba(50, 50, 50, 0.75);
box-shadow: 0px 0px 1px 0px rgba(50, 50, 50, 0.75);
background: #01589a url('http://cdn.primeleap.net/images/blueGradient2.png') top left repeat-x;
text-shadow: -1px -1px 0px #000, 1px -1px 0px #000, -1px 1px 0px #000, 1px 1px 0px #000, 0px 0px 4px #000;
-webkit-animation: 1s linear 0s normal none infinite noteBlink;
animation: 1s linear 0s normal none infinite noteBlink;
}