A while ago I redesigned the homepage of my company Contronix (or better to design something that may be called homepage at all ;)).
The goal was to create a modern looking design. As Firefox 3.5 was on the verge of being published, I had a look at new design possibilities using pure CSS.
All design items that make the site looking modern, like rounded borders and drop shadows are achieved using CSS3 tags. The definition of border-radius and box-shadow is not finally defined yet and thus browser specific tags still need to be used. Here I decided to support Gecko and Webkit (at least Webkit browsers that use the webkit- prefix; I am not sure what Konqueror uses and which CSS3 tags are supported by it, but percentage of users is marginal anyway).
The nice thing about using those CSS3 tags is, that they provide an automatic fall-back for old browsers and that you do not have problems with creating and aligning images too achieve the effects. The fall-back here means that on old-tech-browsers you’ll have the same layout but it just won’t look as good. Here I decided that this is quite sufficient…
Besides the rounded borders and drop shadows on boxes I decided to use text-shadow for links. This way they get a slight 3D look. Unfortunately it isn’t possible to use text-shadow for showing links solely but links have to be decorated with more “traditional mehtods” as well. Else users with Internet Explorer wouldn’t see links at all — even IE 8 doesn’t support text-shadow yet (and there are quite a few IE users still out there).
One disadvantage of those new tags is, that depending on the browser version the rendering differs very much. E.g. not very old versions of Chrome and Safari render the box shadows quite ugly.
So to have a good look at the Contronix site use a modern browser for the best representation, and I mean modern: Firefox 3.5, Safari 4, Chrome 3.
BTW: besides those browser specific tags I didn’t use any browser hacks for the base layout (there should be a few browser hacks in the JS libraries used). And the page was never tested on IE 6!
