Tired of editing code to warp text around a logo? If answer is tiring YES, then you need CSS Text Wrapper to do such task on a fly.
Besides wrapping text on rectangular shapes, you can do same magic for curves, zip-zag and much more.
How to use? Well, using this CSS Text wrapper is really easy thanks to its great user-interface. Here goes the simple procedure:
- Enter or paste text for wrapping in content box (bottom-right).
- Click on update settings, text will appear in editing windows.
- Move the bright points on lines on either side to make the shape.
- You can make additional movable points by click on either line.
- For image enter ‘URL of Tracing Image’ in box below.
Make sure you set content area dimension like width, height etc. After you have made the shape and text in the editing window, click on ‘Im done’ button. Now you will get output in 3 forms as following:
1. Inline CSS/XHTML – This is the fully generated HTML/CSS code. It’s really bulky, but it’s the easiest to apply.
2. XHTML w/ Classes – This is the fully generated HTML with class names. Smaller markup, but you will need to have a stylesheet for this to work.
3. Javascript – The most lightweight, applies two lines of javascript to generate the wrap markup. Requires loading of single small external javascript.
CSS Text Wrapper: Website – See Examples – Video Demo – FAQsÂÂ
For the sake of ease of use first method is best. You can also use 2nd and 3rd but make sure you know where to copy Javascript file and make CSS chnages. Very good for desingers to do stuff with ease and in less time. [via]
In case you are looking to wrap text next to a Google Adsense block, then grab the easy code ‘How to wrap text around Google Adsense or an image’.
