I was a little bored this evening and decided to play with a little bit of web design. More precisely, I wanted to toy with opacity/transparency in CSS and vertically centered content. Nothing major, or fancy for sure, but I came up with this mess. I actually utilized a vertically centered design when this domain was strictly for my web design work. Unfortunately after multiple computer crashes, the old design is long gone, unless its still hiding on an old flash drive somewhere. And so, decided to give it another shot.

While surfing the web doing some research, I came across the following two websites, which is what was used in the experiment:

• Opacity/Transparency: Design Dazzling – CSS Transparency in All the Browsers
• Vertically Centered Content: DocType.com – How to vertically center content on a page

This design is at 940px wide so obviously any lower resolution will butcher the vertically centered code. It renders normally and as intended, in Firefox 3.6, Chrome 4 and IE 8

If anyone would like to test it in other browsers, please do, as I’m curious to know the results.

The code is far from clean, I’m sure. Any suggestions on easier ways to accomplish what I set out to do? I’d be interested in hearing about that too.