What is meta? ×
Meta Stack Exchange is where users like you discuss bugs, features, and support issues that affect the software powering all 131 Stack Exchange communities.

I really like this circle with number inside of it. It's awesome way to show new messages in non offensive. I want to create similar notification UX for some eGovernment portal. How can I create this in css. I know I can inspect css with Google chrome or firebug, but currently I have no notification in my inbox :/ to analyse this html & css.

Notification Inbox

share|improve this question

closed as off topic by random Mar 12 '11 at 19:43

Questions on Meta Stack Exchange are expected to relate to the software that powers the Stack Exchange network within the scope defined by the community. Consider editing the question or leaving comments for improvement if you believe the question can be reworded to fit within the scope. Read more about reopening questions here.If this question can be reworded to fit the rules in the help center, please edit the question.

2  
you'd probably be better off asking this question on stackoverflow instead of meta. –  BrokenGlass Mar 12 '11 at 19:40
    
Ok, I asked here because I found this question stackoverflow.com/questions/605291/… which was not closed as off topic. You can move to main SO, no problem, my mistake –  nemke Mar 12 '11 at 19:55

1 Answer 1

CSS:

.unreadCount{
    font-family:Arial,Helvetica,sans-serif;
    display:block;
    float:left;
    background-color:#e23535;
    color:#fff;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
    padding:2px 4px;
    font-size:9px;
    margin:3px 0 0 -117px;
 }
share|improve this answer
    
yes, now I see it :) got the inbox notifications, thanks –  nemke Mar 12 '11 at 19:43
2  
use border-radius:50%; rather than 10px; for a circle that scales to whatever size your font is. –  Spudley Mar 12 '11 at 22:03

Not the answer you're looking for? Browse other questions tagged .