Wednesday, December 19th, 2007
CSS Text Wrap: Squeeze that text around any line
<p>Sick of those straight lines that your text follows? Rounded corners can only do so much? Now, a new tool is here to help you out: CSS Text Wrap.The CSS Text Wrapper allows you to easily make HTML text wrap in shapes other than just a rectangle. You can make text wrap around curves, zig-zags, or whatever you want. All you have to do is draw the left and right edges below and then copy the generated code to your website
On the flip side, you get a choice of inline HTML (below), XHTML with CSS classes, or JavaScript.
HTML:
-
-
<div style="float:left;clear:left;height:15px;width:4px"></div><div style="float:right;clear:right;height:15px;width:3px"></div><div style="float:left;clear:left;height:15px;width:13px"></div><div style="float:right;clear:right;height:15px;width:8px"></div><div style="float:left;clear:left;height:15px;width:22px"></div><div style="float:right;clear:right;height:15px;width:14px"></div><div style="float:left;clear:left;height:15px;width:30px"></div><div style="float:right;clear:right;height:15px;width:19px"></div>
-
Related Content:
4.3 rating from 35 votes
very cool. reminded me of an old demo I did (wrapping text around an image using just javascript and a little PHP – http://verens.com/demos/autocropper/autocropper.html)
must show this to the cow-orkers