curvelicious
Ah, the appeal of curves and other flowing shapes. They have their place in the heart of just about any visual designer, but when it comes to text flows on the Web, everything's been on the straight and boring, thanks to table cells, element boxes, and all that other stuff. Until now, anyway. Yes, the text is flowing along with the curve-- not perfectly in step, I admit, but pretty close. And you thought Web design was all about straight lines and boxes. By the way, this demo should work in IE5/Mac, IE5.x/Windows or later, Netscape 6.2, and Opera 5.x. I expect it works in Konqueror as well, but being Linuxless I can't verify that personally.
Should you want to see a variant on this effect that uses straight-line slants and no images, but isn't quite so widely supported by Web browsers, then you're in the mood for something slantastic. But if you're curious about the curvy effect demonstrated here-- then read on, Macduff!
Gently Floating...
All I did to make this happen was create a 200x200 image of a curve. Then I sliced it up into ten strata, each one 20 pixels tall and only as wide as necessary to show the curve without any clipping. Here are three of those images in row, this time with borders around them so we can clearly see their dimensions:
Stack all ten strata together (without the borders, of course) and we get the same curve I started with. But float those ten strata so that they stack up, and text can flow around them, and their decreasing width allows the text to roughly follow the curve. Thus:
img.curve {float: left; clear: left; margin: 0 1em 0 0;}
The margin helps keep the text away from the curve; the greater the margin value, the further away text will be pushed from the curve.
Something to note is the h1 element at the top of the page (it contains the word "curvelicious"). The background and border are sliding under the floated images. It's supposed to do that. If your browser can do so, try "text zooming" the font up or down, your choice. The curve will remain constant, but watch the text slide up along the curve. It's nifty.
Taking it Further
Of course, the original image could have been sliced up into five strata, or twenty, or even 200-- assuming you wanted to force the user to download that many images. On the other hand, you could try a variant on single-pixel sizing where every row of pixels is the same stretched one-pixel image, exactly the right size to make up part of the curve, and every one floated. Although you save on downloads (only one image gets used) it's a pretty excessive approach from a markup standpoint, and don't blame me if you try it and your browser crashes, but it would work. You could even write a small Javascript to produce the required strata for you, thus keeping page weight down and letting the script automatically calculate the necessary width of each row.