[Sep 27, 2009]
Retro vector graphics are back. But now, they're bigger, better and HTML'r than ever before!
Ah well, at least for me this opens quite a few doors. I think this effect leads me to a whole lot more.
What you see here are three stretching boxes with lighter outlines. When you view this in Firefox, Chrome or any other (partially) CSS3 compatible browser, you can see the underlying boxes through the boxes in the front. Simple opacity really. But when you're viewing this in Internet Explorer 8, the opacity fails and I can't seem to get it perfectly right. IE7 and IE8-Compat show transparancy, but cap off some corners.
But no tears, at least you see the coolest part of it!
A stretching box is actually made up of four triangles, as you can see in this example.
To move the top corner to the right, I simply compress the top-right triangle and stretch the top-left triangle.
To move the top corner down, simply compress both top triangles downwards. Now if you do this for all corners, you get a stretching box.
In some cases a hole can appear in the center, because the triangle-corners moved too far away from each other. To overcome that, I use an additional div which moves and scales along with the triangles.
For the first version of this effect, I used four images (one for each triangle) and stretched them to get the same result as what you're seeing now. But when I stumbled upon www.uselesspickles.com, I decided to use that technique. The upside of using images is, that you get smoother looking boxes in IE, because IE doesn't seem to use anti-aliasing on div elements. But the downside of using images is, that it's too much for Chrome. Chrome is really bad with manipulating images and takes up almost all processing power. But now, using the borders of div elements, Chrome is really the smoothest browser around and has the best performance.