CSS Keeps Getting Better

I’ve knocked together a quick demonstration of what CSS can do these days.  Take a look (I’ll wait).

Ultimately, this is how this sort of styling should be done on the web. Importantly, I’m not a web designer and I haven’t used any “tricks” to deliver this. This is all hand-coded from easy to read articles on the web.  You can do this yourself without very much work; cutting and pasting the code on this page would be a good start.

The weakness is the anti-aliasing (Firefox does this slightly better than Chrome). If you had a single colour background and no transparency, you could fix that with the excellent cornerz plug-in. I’m not sure what other approaches you could do here. There’s a Javascript PNG generator that could be used to create corner images, but it would be very hard to be compatible with both the gradient and the background image. There’s also some nasty issues with the compatibility of background images and background effects: sometimes the wrong one shows on top. Finally, the opacity isn’t all it could be: there’s no easy way of getting the text fully opaque and getting the gradient bleed through at the same time.

As with most things CSS, it’s all a bit more complex than you think it should be. But it does work. Here’s hoping browsers improve their anti-aliasing and render the rest of this discussion moot.

Technorati Tags: ,,,,,

Published by

Julian Birch

Full time dad, does a bit of coding on the side.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s