Introduction
As you may guess, I love to play with Cascaded Style Sheets. If you think, this page looks terrible/awesome it is due to the excessive use of CSS. I use LaTeX a lot and was always disgusted by this mess of fonts, colors and tables in HTML. Then I started to create web pages XHTML was nearly standard, but nobody used it. Whenever I see a web page it has this sluggish, cuby table layout. The following examples should show that clear and cute web design is possible without this misuse of HTML-tags.
Unfortunately, most of this examples use bleeding edge technology. Some may look not very well in your browser. Most time I use a Gecko-based browser. If I am in good mood I take a look at my pages with KHTML-engine (and am appalled). I usually check them in lynx, too (seriously). Very rarely I check pages in MS Internet Explorer. I nearly never use Opera, not because I think, it’s a bad browser, but I am not used to it. I assume it renders most of this pages well.
Maybe you ask, why I do not use browser independent technologies like tables or even frames. Well, I thought very long time about this point. I know all these pages telling about accessibility for all users. Hey, it is accessible: use lynx, it is available on most platforms, has very small footprint and is fast. I know all these statistics about MS Internet Explorer being used by 98.99% of Internet users. While I give a shit for whose stats I wouldn’t even care if 102% would use: IE is not a browser, it is simply a broken piece of software. It can’t render even simply CSS formats and has a lot of security issues. I don’t see any reasons for this alleged distribution of this thing.
So, if you have some really problems with or comments to my design, you are welcome to send me a mail. But save your blames.
Examples
- Fixed, transparent navigation
- The well known CSS-menus: vertical and horizontal in one (use the alternate stylesheet)
- Collapsing Menus without any active components using pure XHTML/CSS.
- Fvwm over HTML: this is just a try to make an Fvwm2-desktop with XHTML and CSS only (’Look, ma, no pictures.’) The text is taken from an article from Hendrik Spiegel and Malte von dem Hagen with permission of Malte.
- Tables can look good: This is inspired by Seamus P. H. Leahy and his Reformat the Table. I did not look at his code but saw the demo and thought: 'Uh, cool, a table? Must have.'
Sources
I am by far no master of CSS, so I take a lot of inspiration from the real ones:
- Newt Edge: Lim Chee Aun’s nice collection of examples.
- Eric Meyer is the author of Eric Meyer on CSS from O’Reilly. You must see his demo complexspiral.
- CSS Zengarden is very nice examples of the possibilities of CSS: participants render the very same XHTML with dozens of variants in stylesheets to get different designs.
- Browse Happy is a campaign of the Web Standards Project. It doesn't really fit in this list as its main topic is not CSS but I find its design very clear. This is the way web pages should look like. (To be serious they use a very strange markup, but their design is great.)