Skip to main content

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.

CSS-text-wrap

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.

Comments

Popular posts from this blog

69 alternatives to the default Facebook profile picture

If you have changed the default Facebook profile picture and uploaded your own, it’s fine. But if not, then why not replace that boring picture of the guy with a wisp of hair sticking out of his head with something different and funny?

How to Schedule Changes to Your Facebook Page Cover Photo

Facebook’s current layout, the so called Timeline, features a prominent, large cover photo that some people are using in a lot of different creative ways. Timeline is also available for Facebook Pages that people can use to promote their website or business or event. Although you can change the cover photo as often as you like, it’s meant to be static – something which you design and leave it for at least a few weeks or months like a redesigned website. However, there are times when you may want to change the cover photo frequently and periodically to match event dates or some special promotion that you are running or plan to run. So, here is how you can do that.

How to Record CPU and Memory Usage Over Time in Windows?

Whenever the computer is lagging or some application is taking too long to respond, we usually fire up task manager and look under the Performance tab or under Processes to check on processor utilization or the amount of free memory available. The task manager is ideal for real-time analysis of CPU and memory utilization. It even displays a short history of CPU utilization in the form of a graph. You get a small time-window, about 30 seconds or so, depending on how large the viewing area is.