thinking stiff

iPhone Notification Badge in CSS

Posted in Programming by thinkingstiff on 2012/01/21

iPhone Notification Badge - CSS

In answering this question, Vertically and horizontally centering text in circle in CSS, on Stack Overflow, I expanded upon an earlier solution I had to this problem and made them expandable.

These look good in webkit (and great on the iPhone), and pretty decent in -moz, -o, and -ms.

Demo: http://jsfiddle.net/ThinkingStiff/mLW47/

HTML:

<div class="badge">1</div>

CSS:

.badge {
background: radial-gradient( center -9px, circle closest-side, white 0, red 26px );
background: -moz-radial-gradient( center -9px, circle closest-side, white 0, red 26px );
background: -ms-radial-gradient( center -9px, circle closest-side, white 0, red 26px );
background: -o-radial-gradient( center -9px, circle closest-side, white 0, red 26px );
background: -webkit-radial-gradient( center -9px, circle closest-side, white 0, red 26px );
background-color: red;
border: 2px solid white;
border-radius: 12px; /* must be 1/2 of ( border-width*2 + width ) */
box-shadow: 1px 1px 1px black;
color: white;
font: bold 17px/15px Helvetica, Verdana, Tahoma;
height: 18px; /* height + padding-top must equal width */
padding-top: 2px; /* height + padding-top must equal width */
text-align: center;
width: 20px;
}
Tagged with: , , , ,

3 Responses

Subscribe to comments with RSS.

  1. Anonymous said, on 2013/01/17 at 6:22 PM

    Thanks mate :)

  2. Anonymous said, on 2013/10/26 at 7:31 PM

    Nice, thank you! :-)

  3. […] fit the bill. A quick search for “iphone badge css” yielded many hits. But I settled on this one. I wanted to show the pending count on top of an image (used as an icon) and on a standard APEX […]


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: