The Making of This Site

This site is a conglomeration of a few designs and layouts I've found interesting on the web. The following is a general explanation of what techniques I used and how I put them together.

The coolest technique design-wise is the Complex Spiral demo, using fixed-positioned background images to give the illusion of "see-through" portions. I've used the same technique here using the "Smoke" image from the Fractal Bargain Bin and some modifications of it using Photoshop. You'll have to look at it in something other than Internet Explorer 6 to see the intended effect (e.g., Firefox) since IE 6 (and below) doesn't support fixed backgrounds except for on the body.

Photoshop... an adventure in itself. The swirl image on the right is my first experiment with filters by following a tutorial on the web, though I can't remember where. After much trial and error, I ended up using a glass filter for the background images on this site, then messing with the hue/saturation and putting semi-transparent layers on top in no particular order. Making these versions again from scratch would be impossible; mostly it was a lot of modifications and undos until it looked acceptable. Which took forever. If I have to do this again I'll hopefully be able to do it in fewer steps!

The "DragonzReef" in the header started out in Microsoft Word using the Viner Hand ITC font, and was then copied into Photoshop where I added the transparent blue background to it. It doesn't quite match the other colors, but I gave up perfecting it. For IE 6 I just had to make this part of the background since PNG images aren't fully supported.

A layout I found interesting was the Jello Mold. This one took some time to figure out how it works; it uses negative margins as the basis for the layout. The Jello Mold Piefecta is a good example, and Mike's explanation page was especially helpful in getting a grasp of how it works and how it can be customized.

I came across another layout called Full Height (basically the Sticky Footer layout but with columns) where the content area takes up the full height of the window even if there isn't enough content to fill it, and the footer is never higher than the bottom of the window. This was simple enough; I just had to make sure that the body and other containing divs had a height of 100%—the Jello Mold components included.

I also needed equal-height columns. Although I had no real preference on how to implement them, there were some technicalities to take into account. Because of the Jello Mold layout, I couldn't just use faux columns since it would screw up the alignment of the backgrounds. And full height would really make it difficult unless the footer was of a static height. So this is where it got the most confusing. My solution is quite a convoluted configuration, but basically I ended up making the column backgrounds with relative- & absolutely positioned divs and setting their z-indexes so they display under the content of their respective column. I also had to make an invisible duplicate of the liquid footer to use as a "margin" below the content; otherwise the last few lines of content would be hidden under the footer since it's absolutely positioned. This duplicate isn't ideal, but I figured it's not too much of a hassle and, since the footer doesn't have much content, it'll be tolerable with browsers that don't support CSS.

I'll add some examples if I get around to it. ;-)