I’ve been playing with CSS3, just for fun really. All of the styles I’ve used work in Safari; most of them work in Firefox and Opera; none of them work in Internet Explorer 7.

For my test page I wanted: paragraphs with transparent coloured backgrounds layered over images; each image to be different; the boxes to have rounded corners; the position of the paragraphs to alternate; the last paragraph to have no background image; the text of the heading at the top of the page to have a glow effect.

But I also wanted the html to be as clean and raw as possible, leaving the styling completely up to the css. I wanted to do without divs, classes and id tags, to see if I could get it to work without adding hooks into the markup. The html is simply an unordered list with a paragraph tag in each list item (I tried reproducing it here, but even using the ‘code’ feature WordPress tries to render it: so I gave up).

My test page worked perfectly in Safari, gracefully in Firefox and Opera, and at the bare minimum in Internet Explorer 7.

Transparent backgrounds

For this I used the alpha transparency of RGBa; not opacity because, as I discovered before, that would apply to the text as well as the background. RGBa is supported in the latest versions of Safari and Firefox (and in Opera 10, which is currently in beta). I had to include a hack to tell IE7 to add a background colour, otherwise the text was unreadable.

Different images

I wanted to keep these out of the html and include them as background images in the css. Of course I could have added a class to each list item, but that would have cluttered the html. I chose to use the ‘+‘ selector to define the image for each subsequent list item. This works in each of Safari, Opera and Firefox. It doesn’t work in IE7, so the same image appears in each list item.

Rounded corners

I used the proprietary -moz-border-radius and -webkit-border-radius styles (for Firefox and Safari respectively), because it’s a nice enhancement but doesn’t matter if they’re not there.

Alternate positions

I wanted the paragraphs of text to alternate between appearing on the left of the image and on the right. For this I used nth-child to style every other paragraph. This works in Safari and Opera.

Styling the last paragraph

I simply used last-child to style the last list item differently. This worked in Safari, Opera and Firefox; not in IE7.

Text shadow

I used text-shadow for this, setting the x and y positions to zero (ie directly behind the text) so that it appears to glow around the edges. Text shadow is supprted in Safari and Opera.

Note

I built this page as an em-based layout, so it’s scalable. However I was lazy with the images, so these are large and pulled directly from my Flickr account. Therefore they don’t scale; and they’re not optimised to load quickly, so they don’t.