Sitepoint offered up an article by Tim Wright (CSSKarma), CSS Angles: Just the Edge Your Web Page Needs!, which shows that increasing the size of a single border property results in an angular object that can be placed behind things. After some experimentation I found a new solution and a new conundrum.
Tim’s applied this to “shelf shadows”, where a nav item appears to be propped up on a shelf with a shadow below:
I looked at the CSS and thought, “This is cute, but could be more elegant with just two 1kb images.” So I wrote it, and it turned out fine. In fact, it turned out better, in my opinion, because the shadow edges were anti-aliased. I showed my developer Tyrel Kelsey the results, then bragged, “I can even make both the shadows and the shelf size scale with the text.” Then whipped up that solution as well.
In short, my first solution used two images: a x-repeating 1×20 “shelf” hooked to the UL, and a 10×20 “shadow” hooked to each LI in place of Tim’s border corner.
My second solution used a 1px square for the top “shelf”, and a 1px border–both hooked to the UL. The top shelf was set 1em from the top to allow for scaling.
The “shadow” was a much larger image, 100×200, and set .1em to the left and 1em from the top of each LI, thus masking it’s gargantuaness (similar to sliding doors).
It was a slick application for the same effect, but then Tyrel popped my balooon.
“Are you on FireFox 3?” Tyrel asked. “Because mine already scales on FF3, and it doesn’t look all jagged like yours.”
Page zoom. I still am on FF2, and I remembered earlier in the week how I embarrassed myself in the web design course I teach when the page zoom disturbed an effect I was demonstrating. In fact, a lot of the em-based scaling approaches so popular just a year ago are sliding towards obsolescence thanks to page zoom on IE 7+ and now on FF3 as well..
Not only are they made obsolete, current CSS-based designs that are enhanced by the elasticity (e.g. layouts with reading-width columns or other applications of em-based scaling (e.g. sliding doors) may look worse with page zoom. My second example sure did when scaled in IE7. And if you open my design 2 on FF3 and compare the page zoomed rendering to the rendering with Zoom Text Only turned on, you’ll agree that the clarity is compromised in the former.
So while I’m proud of my two CSS variations on Tim Wright’s shelf-and-shadow concept, and they are great solutions for older browsers (I can’t believe I’m referring to FF2 as “older”!), it’s also clear to me that em-based scaling and elasticity is on it’s way out, and browser-based page zoom will solve a lot of designer’s accessibility-influenced design challenges–but not, perhaps, without affecting our “tricks” of the past.