Cascading Style Sheets and Page Design
This page, when it's grown up a little bit, will host a number of my ideas and thoughts on using CSS as a 'design' tool. I think we have come to the stage where CSS is 'fairly' well supported, and flexible enough that it can be used for most (static) page design tasks.
Here are some links to pages i've authored in my very brief incursion into the world of CSS:
- Applying shadows to Content boxes - This trick is quite simple/cool because it uses the power of CSS to relatively position a content box from a shadow background. The shadow is generated using either semi-transparent GIFS or 24bit PNGS to allow the shadow to 'blend' into its background.
- Pure CSS Tabbed User Interface I - Tabbed interfaces are very popular and, if implemented correctly, can practically guide the user through the navigation. This page offers a pure CSS method to do so, by giving visual feedback about where one is and where one can go.
- Pure CSS Tabbed User Interface II - This is an alternative version of the tabbed menu above. It uses similar tricks, but the tabs are inverted to blend into a page header. In Opera and Mozilla, this navigation menu uses position:fixed so that the menu is always available.
- 'Spiky' CSS Boxes - This page demonstrates how one can work round browser implementation issues to generate spiky CSS boxes. This problem is due to different intepretations of 'what' colour goes under the dots/dashes in a border style. See here for an example of using this trick.
- Playing with Font Styles - This page highlights a number of the ways to manipulate text for design effects using pure CSS. See my weblog design for a practical application of these ideas...
- Boxed links for navigation - I saw a box design for navigation links I liked, and this uses very simple CSS for the same effect (which was originally generated using tables and lots of javascript).
- Hover on Non-Links - This page is as much to test browser bugs as to use as a design idea, I do like the design nevertheless (nothing amazing, but nice), and so I include it here for your perusal - it uses hovers on headings and .PNGs - so doesn't do much in IE/win due to its bugs...
Although sparse, this page will grow as I learn to use CSS more effectively. If you use something here, or hopefully improve it - then please let me know.
Valid XHTML V1.0 strict and CSS V2.0.
(graphics on this page from firda's spring collection, although the CSS is home-brewed...)