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.

Compared with the opacity CSS property (which also makes a translucent background), RGBa does not makes the contents of a HTML element semi-transparent.

As well as other CSS3 properties, (like box-shadow, border-radius), all the modern browsers (FireFox, Safari, Chrome, Opera) excellent supports the RGBa property, but only not Internet Explorer.

However, there is a simple way to make cross browser RGBa support, i.e. even in IE, moreover in all popular versions: IE6, IE7 and IE8.

RGBa CSS3 Definition For Modern Browsers

It looks like this:

.style {
  background: rgba(255,204,000,0.5);
}

In this example we are using RGB format of this color: #FFCC00, and apply the 50% opacity.

RGBa Support For Internet Explorer

The following code emulates the RGBa in IE6, IE7 and IE8:

.style {
  background: transparent;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FFFCC00,endColorstr=#7FFFCC00);
}

RGBa represented here as a hex code and looks like #AARRGGBB, where the AA is the alpha value in hex format.

This code for Internet Explorer I recommend to put in a separate file and connect to the site with conditional comments.

A you can see, everything is simple.

Lastly, I want to advise you the RGBa CSS Generator for Internet Explorer. Enough to specify the RGBa definition in the form, and you will get IE version of RGBa.

But we will use them, while browsers like IE6, IE7 and IE8 will exist and while Microsoft will not create a normal browser, which will stand on equal with modern browsers like FireFox, Safari, Chrome and Opera.

We, web developers, are constantly faced with deficiencies of Internet Explorer, and CSS hacks allow to overcome them in most cases.

In this post I would like to group the personal CSS hacks for each of the 4 popular versions of IE. Most likely you already know the CSS hacks for IE6 and IE7, but for IE8 and IE9 probably not. Therefore the focus of this article is on a personal CSS hack for Internet Explorer 8 and Internet Explorer 9.

CSS hack for Internet Explorer 6

It is called the Star HTML Hack and looks as follows:

* html .color {color: #F00;}

This hack uses fully valid CSS.

CSS hack for Internet Explorer 7

It is called the Star Plus Hack.

*:first-child+html .color {color: #F00;}

Or a shorter version:

*+html .color {color: #F00;}

Like the star HTML hack, this uses valid CSS.

CSS hack for Internet Explorer 8

@media \0screen {
  .color {color: #F00;}
}

This hacks does not use valid CSS.

CSS hack for Internet Explorer 9

:root .color {color: #F00\9;}

This hacks also does not use valid CSS.

Demo

I’ve created a simple demo, it displays, what personal CSS hacks works fine for all 4 versions of IE. Take a look.

box-shadow for modern browsers (except IE8)

You can use following code for Firefox, Safari, Chrome and Opera 10.50 pre-alpha:

.box-shadow {
  -moz-box-shadow: 10px 10px 10px #000; /* Firefox */
  -webkit-box-shadow: 10px 10px 10px #000; /* Safari, Chrome */
  box-shadow: 10px 10px 10px #000; /* CSS3 */
}

If you are using an up to date version of Firefox, Safari or Chrome, it’s enough to use just this CSS:

.box-shadow {
  box-shadow: 10px 10px 10px #000; /* CSS3 */
}

box-shadow for Internet Explorer

Download the ie-css3.htc file, put it in the same place where your CSS file, and then use this CSS code for Internet Explorer to make box-shadow:

.box-shadow {
  behavior: url(ie-css3.htc);
}

It’s reasonable to connect this CSS through conditional comments.

Cross-browser box-shadow demo

In the following example you can see the demonstration of both CSS3 styles – border-radius and box-shadow:

• Internet Explorer support for CSS3 border-radius and box-shadow

Turn your attention on few limitations while using these solutions for IE.

Fortunately almost all modern browser (FireFox, Safari, Chrome and Opera since 10.50 pre-alpha) supports CSS3 border-radius, but unfortunately none of a versions of Internet Explorer (even IE8) does not support this property.

I very long time was waiting for a moment, when I can safely use the border-radius property on my sites. And this moment has finally has come – now we can make rounded corners in Internet Explorer with his means. This method uses VML and behaviour.

border-radius for modern browsers

This is the way that works in all modern browsers (except IE8) like FireFox, Safari, Chrome and Opera since 10.50 pre-alpha:

.rounded-corners {
  -moz-border-radius: 10px; /* Firefox */
  -webkit-border-radius: 10px; /* Safari, Chrome */
  border-radius: 10px; /* CSS3 */
}

border-radius for Internet Explorer

Download the border-radius.htc file, put it somewhere on your site, and then use this CSS code:

.rounded-corners {
  behavior: url(http://yoursite.com/border-radius.htc);
}

And replace http://yoursite.com/ on your absolute path, where you have placed the border-radius.htc file.

I think it’s better to put this CSS in a separate file and connect it using conditional comments:

<!--[if IE]><link rel="stylesheet" href="ie.css" type="text/css" media="screen, projection" /><![endif]-->

Demo

Download crossb-rowser border-radius demo.