Web Design

(old content…use at your own risk)

Progressive Enhancement with CSS & Javascript

Demos of CSS techniques, Javascripts, and solutions to problems posed on the great mailing lists WebDesign-L and CSS-discuss.

Classify Tables
Javascript to assist styling table columns and rows. Can copy classes from COL elements into table cells, handles spanned columns and rows.
Simple CSS Image Rollovers
Swap images on hover without javascript
Custom Bordered Boxes
Various “rounded corners” methods using minimal markup.
Centered Image
Horizontally and vertically center an image inside a container element
Bottom Captions
Make an image’s caption bottom-aligned
CSS Magnifying Glass
Is what it says..
The Breaks
Various techniques to create line-breaks and when to use them
Shrink-to-Fit
Give block elements the “shrink-to-fit” property of single-cell
tables without table markup
Contributions to CSS-discuss
Posts I’ve made to the CSS-discuss mailing list. Useful, boring, a little of both.

Standalone Demos

These pages show elegant examples of the power of CSS, the Document Object Model and the PNG image format. They may only render correctly in a handful of modern browsers.

The Lonely Planet
A planetary orbit simulation using dynamically scaled, alpha-transparent PNG images.
GD Library Demo
An experiment in color separation. I used PHP’s GD library to separate images into HSV semi-tranparent PNG images then recombined them by stacked them on the page.
Believe
IE6/win’s lack of standards support and proprietary features hide the truth! View this in IE/win, then in a modern browser like Mozilla, Opera or Safari.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.