Work

A portfolio of projects we’re working on, web interfaces and logos we’ve designed, and books we’ve written. Interested in hiring us? Drop us a line →

Articles

Gravity-Defying Page Corners
A short, poetic tutorial for creating a simple, reusable “page curl” using a single background image and CSS. (December 2006)
Anatomy of an Icon
A quick look at the methods and techniques I use to create icons in two standard sizes. (August 2004)
Mountaintop Corners
Remove pixels to create flexible, rounded corner boxes and borders with the help of CSS. (Published by A List Apart, April 2004)
Faux Columns
Multi-column CSS layouts can run into trouble when one of the columns stops short of its intended length. Here's a simple solution. (Published by A List Apart, January 2004)
Styling Nested Lists
A mini-tutorial on nesting unordered lists for outlines and site maps. (October 2003)
Accessible Image-Tab Rollovers
An indepth how-to on creating accessible, javascript-free, rollover image-tabs using CSS and a simple unordered list of text hyperlinks. (September 2003)

CSS Tips

Exceptionally Negative
Using negative margins on an element can at times be the easiest way to "nudge" it out from the rest, treating the exception to the rule in order to simplifiy code. (May 2005)
CSS Centering 101
"How do I center a fixed-width layout using CSS?" Find out how. (September 2004)
Clickable Link Backgrounds
A bulletproof unordered list of links, each with a unique (purely decorative) left-aligned icon that is referenced with CSS — but that is also clickable. (July 2004)
Bulletproof Slants
Slant-separated navigation that is flexible and accessible. (July 2004)
CSS Photo Zoom
Demonstration of using CSS to zoom a single image on hovering. (August 2003)
Mini-Tab Shapes
A variation of Mini-Tabs using a single, centered GIF image to stylize hovered and active navigation items. (August 2003)
Magic Icons for Lazy People
A neat trick for creating one set of icons that changes color with a simple CSS update. (July 2003)
CSS Mini-Tabs
The un-tab, tab. An example of an alternate take on pure, CSS tabs using just a styled, unordered list and no images or tables. (June 2003)
Icon-Styled Headings
Using background-image to stylize heading tags and lists. An easy, but smart way to keep non-essential images out of your markup. (June 2003)
Simplified CSS Tabs
My own take on the CSS tab extravaganza that has been sweeping the web. It uses just a styled, unordered list and a 1x1 pixel image to create the bottom border -- thereby bomb-proofing the display for most modern browsers. (April 2003)