Use CSS Text Wrapper to wrap text in any shape

If you are a blogger or a webmaster, you must be familiar with the trick of adding floating DIVs to the left or right of the text to wrap it around images. While a single DIV element is rectangular in shape, by making use of a number of small DIV elements and stacking them together vertically, we can make the text wrap around any shape. Although, it's achievable but implementing it will be a big pain since we have to adjust each DIV element after taking careful measurements. But by using CC Text Wrapper, we can do this in a flash.

CSS Text Wrapper allows you to easily generate the codes necessary to wrap text in any shapes other than just a rectangle. This is helpful when you want to wrap text around circular images. See this example. Here is another example right on this post (without images)

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam pede. Donec iaculis, purus at porta tristique, pede nisi rhoncus pede, non nonummy augue nunc in tortor. Nunc gravida, nisl ac tempor rutrum, risus odio pharetra eros, eu feugiat diam nisi sit amet sem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam quis neque at odio laoreet convallis.

On CSS Text Wrapper generator, there is a rectangular area on the middle of the page which will be your the working area. On this working area you will find two vertical lines on either side of the text. Grab the lines at any place, to create points and drag them on the working area to create any shape. You can also load an image on the background and use it as a guide to trace a shape around it. Before you start making shapes, adjust the size of the working area according to the size of your web page and specify the line height, which will be the height of the DIVs.

The CSS code is generated on the fly and you can make any number of changes to the shape and have the code instantly. CSS Text Wrapper provides you with three different methods to implement the code.

1. A simple HTML/CSS code which you can copy and paste on any page or blog post. The code is bulky but suitable when you want to make a shape on only one page or blog. The text wrap on this post is made using this method.
2. A HTML code with classes that you have to add to the web page and some additional codes that you have to add to your stylesheet. This code is cleaner but requires you to edit the stylesheet. Use this method if you are going to implement the text wrap feature in a number of pages on your site.
3. The third method involves the use of JavaScript and hence will work only when JavaScript is enabled on the visitor's browser.

Use the one that suits you and create beautiful wrapping designs.