Making Pretty FeedBurner Counter With Only CSS3

Lately I often play with CSS3, in particular with border-radius and box-shadow properties. They allow to easily make a beautiful design of page elements like buttons, tabs etc.
As a result I have made pretty FeedBurner counter using only CSS3, and in this post I want to tell you, how to create such a counter on your site.
I made a demo with different colors of counter. Look at it.
We will display the digits as text, therefore we’ll need a WordPress plugin, which able to do this. I very like FeedBurnerCount plugin and I recommend to use it for our FeedBurner counter.
HTML + PHP code
HTML code of a counter including the PHP code of the FeedBurnerCount plugin will looks like this:
<div id="feedcount"><div id="counter"><?php echo fbc_count() ?></div><div id="readers">readers</div></div>
CSS styles
Now we will design a counter using CSS. I will show an example on orange counter.
Main styles looks like this:
#feedcount { display: inline-block; text-align: center; padding: 2px 4px 1px 1px; font: bold 11px/14px Arial, sans-serif; overflow: hidden; color: #FFF; background: #FC8205; border: 1px solid #F25805; *width: 85px; /* only for IE6 and IE7 */ } #readers { float: right; padding: 1px 0 0; } #counter { float: left; padding: 1px 3px 0; margin: 0 5px 0 0; font-size: 13px; position: relative; top: -1px; color: #333; background: #FDC077; border: 1px solid #F25805; border-right-color: #FEE0BC; border-bottom-color: #FEE0BC; }
We’ll get such a counter:

Figure 1
Now we add little bit of CSS3 styles to make the counter more glamorous. Firstly it’s rounded corners:
#feedcount { -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; }
Secondly it’s inner and outer shadow:
#feedcount { -moz-box-shadow: inset 0 0 2px #FFF, 1px 1px 1px rgba(0,0,0,0.15); -webkit-box-shadow: inset 0 0 2px #FFF, 1px 1px 1px rgba(0,0,0,0.15); box-shadow: inset 0 0 2px #FFF, 1px 1px 1px rgba(0,0,0,0.15); }
And the end result will look like:

Figure 2
As you can see, it’s very easy to make sexy FeedBurner counter in any color just changing several CSS styles.
What About Browsers?
Of course, the shadows and rounded corners will work only in modern browsers: FireFox, Safari, Chrome, Opera. In Internet Explorer we’ll see a counter like on figure 1. One more thing – unfortunatelly, inset box-shadow not yet working in Safari.
oy eee. It is very very good. thanck’s baby.
I’m your fanatiks
Hey man, nice post!
Eventually I’ll come here to check your ideas.
Cheers from New Zealand
Really nice ! Thank you :)
Great THX this was i writing today in an article on my blog. So i can use your style .
It looks much better than all i have seen.
Thomas
Very beautiful. Thanks for sharing.
But you used PHP too ;)
Joking aside very nice dude!!! :)
i liked it n i try`d it also………..
thanxxxx.
awesome tutorial, thanks!
It is cool… But not easy for non-technical guys.
All what i need, thx !
good one
wow absolutely great and wonderful post… i add more features in counter addition to your Dear Author…Thanks for sharing.. I love you..:)
How to add in my Blog this feeds. Thanks
Really awesome bro… :D
It’s really nice … I’ll wait your more brilliant ideas …. thanx
You opened the lock, to beautify RSS feed counter, now i can do much more this code, thanks for the sharing
Hi! Great post, and great feed counter, but I can’t get it to show the number on my blog here at Tumblr :(. What do I need to do?
It does not work anymore.