(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.