Esotropiart

Check this out! Here is a truly unique "little" window CSS object!

What's so unique about this fat little window, you ask? Well, nothing in particular, except for the fact that it employs several interesting techniques perhaps never before achieved - at least not in this exacting combination. Okay, perhaps they have, but only by a select few... after all, why bother! ;D I guess I'm just bothersome.

The images for the top and bottom rounded corner elements are derived from true 3D objects. I used a very nice, newly discovered 3D program (yes, Dave, that's your hint) to model this bar, added lighting and rendered it. I then cut, blended and spliced the rendered 3D object into workable pieces that could tile atop each other without having obvious clipping borders when the bar stretches horizontally. Go ahead and try it! Resize your browser window to your heart's content. It should look smooth at any size. The two highlights on the top and bottom of the bar were also taken from the real rendering. Obviously the rendered bar object has a little more variation in its color, but for the most part, this pieced-together bar represents the original 3D rendering pretty well.

So, instead of using a standard paint application (like Fireworks, Photoshop or Paint Shop Pro), to create the rounded corner elements, they are truly based on a real 3D object! Well, I thought it was inventive and interesting. Obviously a little CSS trickery was used to make the elements land where I wanted them to. View the source of this page and see if it makes sense to you. If not, feel free to ask me a CSS question on EsoQuery. Normally, I would have linked the CSS externally so the page code would be much leaner, and it wouldn't be so obvious how I do these little tricks... but most people know how to view externally linked CSS code anyway, and I want to be helpful, so go ahead and peek! ;)