If you look at this site, you’ll note that there’s an opacity/transparency effect along with a mouse-over effect on the main content and the side column content. This was done using CSS. In CSS3, there’s an opacity property that can set the transparency for an object and all its child elements. It can be done by adding the following property to the CSS of the class/id in question:

opacity: 0.7;

In essence, setting it to 0.7 would be the equivalent of making the object about 70% of its normal opacity. Easy, right? There is a problem, of course, as this only works in modern browsers capable of CSS3 and not IE6/7. Luckily, IE has their own property using alpha-filters to get transparency to work. So, for IE browsers, we’d need to add the following to the class/id:

filter: alpha(opacity=70);

Read the rest of this entry »

Gasp! I’ve finally updated the site with a whole new design and it’s one that I’m actually quite proud to put up for your viewing pleasure.

The design makes use of a few things:

• Some CSS3 (that means for the full effect, please use a good modern browser, e.g. Firefox 3.5+, Chrome, Safari 4, IE9, and my personal favorite, Opera 10).
• My playful side
• An annoying opacity effect, but without it, you wouldn’t be able to see the clouds!
• Google Analytics tracking (finally!)
• My new shift66design logo

This new design was inspired and could not have been completed without the following:

• My lovely wife, Ying-Ying (that’s us right there)
• A middle of the night urge to get this done after sitting on it for the good part of 2 years

That’s it. Enjoy. I may never update this site again.