August 17, 2011

Revolution in Web Design - Creative Text Boxes

Jaja ok it many not be a revolution, but its a pretty neat; check out some examples like a guitar or a triangle.

The illusion of irregular shape text boxes: Now you can give any shape you want to your HTML text container. The effect is accomplished only with empty floating <span> tags so it doesn't hurt SEO or anything like that.

This script works on IE8,IE9, Firefox and Chrome; it also works on IE7 but not as well as in the others browsers... and i couldn't care less for IE6 so don't ask for support on that browser!

Some example of how to use it:

CreativeTextBox({
text: document.getElementById("text"),
leftSizes: [410, 456, 487, 507, 520,
   524, 525, 518, 506, 485,
   454, 407, 328],
pixelDistance:40
}); 

And actually i created a website just for this script: CreativeTextBoxes.com; there you can find the documentation, a little video tutorial and a couple of tools that helps you get the shapes you want.

If after reading the documentation you have questions about how to use it post them here in this post entry; if you have questions/comments about how the script works internally please do so on Github. The code is minified on the website but it is uncompressed and commented in github.

Hope you like it.

2 comments:

  1. Hey AltIvan, creativetextboxes.com expired August 5th... can't get to your examples! I would leave a coment on Github but I can't seem to find a way to do that without a pull request. Thanks!

    ReplyDelete
    Replies
    1. Its been updated to the new domain: http://creboxes.info/

      Delete

You can use [CODE][/CODE] to post Javascript code.
You can start a sentence with ">" to make a quotation.