Ultra-simple rounded CSS tabs
I have created a demonstration of Aqua-like CSS tabs that doesn’t require any additional markup. Like my Rounded corners with CSS demo, it uses :before and :after from CSS2.
Note that this technique is not for everybody, and it is not especially suited if you want everything to look the same in all browsers. For instance, the technique used is utterly incompatible with any version of Internet Explorer, because MSIE doesn’t understand the required pseudo-elements.
However, this technique is well-suited if you need to retrofit tabs to already existing designs without altering your markup.
Note that this is just a quick hack, and I have not attempted to create a fallback rendering that makes the demo look a little prettier in Internet Explorer, even if it is quite easily achieved. And, this being the quick hack it is, comes without any explanations. View source and see what’s going on.
Comments
Comment from Moose on 2004-01-05 13:36
Arve,
Very nice! The tabs however jump and become slightly misplaced if the anchors are activated, and then tabs hovered.
The problem with tabs, as I see it, is the content that is displayed if a tab is activated. tabs per se are easy to style.
M.
Comment from Arve on 2004-01-05 14:31
The tab jumping should now be fixed (it was a simple matter of presenting two different examples in a rather confusing way, in case anybody wonders).
Comment from Judi on 2004-01-05 19:43
Arve, I’m posting this through Internet Explorer 5.2 instead of Safari. I can’t spend more than a few seconds on your site without rolling over something that is crashing Safari.
Anyway, I did post the comment on the other site without a problem. It’s just this page that’s giving me trouble. I usually read it through a RSS aggregator so I never noticed the crashing before.
This discussion has been closed. No further comments may be added.