Hackery, Math & Design

Steven Wittens i

CSS Fun

So I decided to try out blogging again. The entire web is doing it, so it must be fun, right?

I played with the Acko.net theme and got this cool transparent-block effect on the right. It works in IE6 and Mozilla Firebird 0.6 (that's good enough for me) though in other browsers it should simply fall back to solid white blocks. For compatibility's sake I did include a CSS3-compliant opacity property in case it's ever implemented...

Basically the blocks are output twice, but the second time it is in a semi-transparent layer with white background, and all inner elements set to 'visibility: hidden'. That way no extra drawing is done, but the elements are sized accordingly. Yes, it's a bad hack, but it looks neat. I believe if IE6 had proper PNG support, I could use a semi-transparent background-image, but I'm not sure. For now, this'll have to do.

Meh
This article contains graphics made with WebGL, which your browser does not seem to support.
Try Google Chrome or Mozilla Firefox. ×