The easiest css for red Facebook style notifications

Question

I need a facebook style notification, but getting something that looks like a nice cross browser seems complicated. For example, different browsers seem to handle paddings differently, resulting in weird search notifications.

What is the best cross-browser way to ensure that notifications display well? Not against using javascript, but of course it's preferable to use css

Answer 1

The best way to achieve this is to use absolute positioning :

/* Create the blue navigation bar */ .navbar { background-color: #3b5998; font-size: 22px; padding: 5px 10px; } /* Define how each icon button should look like */ .button { color: white; display: inline-block; /* Inline elements with width and height. TL;DR they make the icon buttons stack from left-to-right instead of top-to-bottom */ position: relative; /* All 'absolute'ly positioned elements are relative to this one */ padding: 2px 5px; /* Add some padding so it looks nice */ } /* Make the badge float in the top right corner of the button */ .button__badge { background-color: #fa3e3e; border-radius: 2px; color: white; padding: 1px 3px; font-size: 10px; position: absolute; /* Position the badge within the relatively positioned button */ top: 0; right: 0; } 

 <!-- Font Awesome is a great free icon font. --> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/> <div class="navbar"> <div class="button"> <i class="fa fa-globe"></i> <span class="button__badge">2</span> </div> <div class="button"> <i class="fa fa-comments"></i> <span class="button__badge">4</span> </div> </div> 

Answer 2

Here is one that turns on the animation when the counter changes.

http://jsfiddle.net/rahilsondhi/FdmHf/4/

 <ul> <li class="notification-container"> <i class="icon-globe"></i> <span class="notification-counter">1</span> </li> 

  .notification-container { position: relative; width: 16px; height: 16px; top: 15px; left: 15px; i { color: #fff; } } .notification-counter { position: absolute; top: -2px; left: 12px; background-color: rgba(212, 19, 13, 1); color: #fff; border-radius: 3px; padding: 1px 3px; font: 8px Verdana; } $counter .css({opacity: 0}) .text(val) .css({top: '-10px'}) .transition({top: '-2px', opacity: 1}) 

Animation using jQuery:

 $('button').click(function() { var $counter = $('.notification-counter') var val = parseInt $counter.text(); val++; $counter.css({opacity: 0}).text(val).css({top:'-10px'}).animate({top: '-1px', opacity: 1}, 500); }); 

It uses the Awesome font for the globe icon and jQuery Transit for animation.

Answer 3

pretty good tutorial to get you started.

http://rndnext.blogspot.com/2009/02/creating-badge-icon-plugin-with-jquery.html

Answer 4

Perhaps absolute positioning:

 <div id="globe" style="height: 30px; width: 30px; position: relative;"> <img src="/globe.gif" /> <div id="notification" style="position: absolute; top: 0; right;0;">1</div> </div> 

Something like that. Obviously, you would like to change the specifics and possibly use background images. The point is to emphasize absolute positioning, which is really compatible with browsers, at least in my experience.

Answer 5

 /* Create the blue navigation bar */ .navbar { background-color: #3b5998; font-size: 22px; padding: 5px 10px; } /* Define how each icon button should look like */ .button { color: white; display: inline-block; /* Inline elements with width and height. TL;DR they make the icon buttons stack from left-to-right instead of top-to-bottom */ position: relative; /* All 'absolute'ly positioned elements are relative to this one */ padding: 2px 5px; /* Add some padding so it looks nice */ } /* Make the badge float in the top right corner of the button */ .button__badge { background-color: #fa3e3e; border-radius: 2px; color: white; padding: 1px 3px; font-size: 10px; position: absolute; /* Position the badge within the relatively positioned button */ top: 0; right: 0; } 

 <!-- Font Awesome is a great free icon font. --> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/> <div class="navbar"> <div class="button"> <i class="fa fa-globe"></i> <span class="button__badge">2</span> </div> <div class="button"> <i class="fa fa-comments"></i> <span class="button__badge">4</span> </div> </div> 

Answer 6

Markup:

 <div id="ContainerDiv"> <div id="MainImageDiv"> //Add the image here or whatever you want </div> <div id="NotificationDiv"> </div> </div> 

Css:

 #NotificationDiv { position: absolute; left: -10 //use negative values to push it above the #MainImageDiv top: -4 ... }