This was not used, but it incorporates some Photoshop tricks that will find their way into new site designs. I also made a font study. View the Full-Size Proof and Font Study

James Koehnline's site is a sprawling mass of materials spread over more than one server. He has galleries with work dating back more than 20 years, numerous interfaces for earlier incarnations of his site, animations, and other content. His site needed an update, but completely retooling his entire ouevre was out of the question. We decided to revamp the primary navigation pages, giving better access to his content. He chose the initial color scheme and designed his site logo. I modified the logo to give it some snap and created site graphics from work he had already done. I think it takes an artist to understand artists, and I am available to help build artist websites. Visit koehnline.com

Business sites are part of the web, and restaurants have much to gain from having a coherent web presence. We increasingly rely on the internet for information. This site demonstrates some of what I can do to help promote a business. This is a simple site, but it's highly informative. I included all the important information from the restaurant's menu. I also added a mapquest link to help people find the restaurant and included meta statements for good search engine recognition. I recommend other additions to make such a site stronger, such as an internet coupon and a second style sheet for printing. This is a tableless site. The menu is mostly made of divs and spans. I ended up using a lot of formatting blocks with custom ids and classes to make it all display correctly, but I think the end result is still easier to read, understand, and maintain than it would have been with a conventional table structure. View the Chen's Wok Menu Site

I spent considerable time and effort developing effective CSS hoverbox gallery viewers. These are not so unusual. Stu Nicholls posted a bunch of them on his CSSPlay site. I studied his work, but my viewers are mostly built on ideas presented in Eric Meyer's Pure CSS Popups. Eric wrote simple, effective gadgets for making text or graphics appear at a desired location when the user positions the cursor over a link. I combined his techniques to make both text and graphics appear whenever the mouse hovers or rolls over a specified link. CSSPlay site Pure CSS Popups Part 1 Pure CSS Popups Part 2

Unfortunately, Meyer's code only allows one to see the text and images while the mouse is hovering. I really wanted to let the user press the button and have that lock the image on the screen. I did that with CSS :focus behavior. That works well in Firefox, but neither IE6 nor IE7 supports the :focus pseudoclass. What to do, what to do? As it turns out, IE sort of supports the :active pseudoclass. That is, when the user clicks a link with a style for the :active state, the link stays :active until the user clicks somewhere else. This is identical to :focus behavior, so I exploited that to make my hoverboxes work properly in IE. I also added rules to control the z-index of images and text. That solved the last of the truly annoying functional problems with the viewers. I've posted a page containing two well-behaved hoverbox gallery viewers. My Hoverbox Demo

I've stretched the notion of page styling well into the realm of page behavior, but I still have one more trick up my sleeve. When we talk about web pages, galleries, and the like, we focus on vertical scrolling. It's probably a conditioned response. The vast bulk of web pages are designed to scroll vertically; but my friend, Tim King, showed me a site that uses a horizontal scrolling gallery. I looked at it and immediately knew that I could duplicate the behavior using the :hover, :focus, and :active behaviors discussed above. So, I am writing a horizontal-scrolling CSS Hoverbox. I will post it as soon as it is ready.

I wanted to experiment more with the CSS box model, fonts, and format capabilities, so I wrote a page based on the grid structure of Mondrian's abstract compositions from the 1920s. When you hover over the blocks with the cursor, the blocks light up. Many of them also reveal tidbits of information about Piet Mondrian. This page is formatted and styled with CSS and only CSS. I used no images, JavaScript, or dependent files other than the linked style sheet. If you shut off the style sheet, the page boils down to a single column of unadorned text statements. That's pretty cool, actually.

The page works in Firefox, IE7, and other standards-compliant browsers. It does not work in IE6. I think I have a fix for it, but no time to work with it. I specified a font from the Lithograph or Lithos family. It's a fairly common font based on Greek lettering. If you don't have it, you can probably find the font online. I would have used @font-face, but it's still not fully implemented on any current browser. It's now part of Safari's WebKit, but it's definitely not in Firefox. View the Mondrian Tribute Page