iPhone Notification Badge in CSS
In answering this question,
, 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; }
Thanks mate :)
Nice, thank you! :-)
[…] 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 […]