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:

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:

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.