What's this all about?back
CSS3Warp is a proof of concept: create Illustrator like "warped" text (text following an irregular path) with pure CSS and HTML.
How does it work?
CSS3 brings new text-transform options: rotation, skew, matrix, transform-origin... By applying the right transformations to every single letter it is possible to create the illusion of text following a path.
Type your text into the webform, click "Warp it!", then alter the path as you like. You can attach your text to a circle or a bezier. Add or delete points, or change position, angle and radius of the circle. When you're done, click "Generate code". Copy the CSS and HTML into your document.
About Font usage
You have two options:
- Choose a font from the Google Font-Directory for warping.
- Tell your webbrowser which local font on your machine you want to use.
The second option can be problematic, as your browser won't find the font if you do not specify the exact name here. The "exact" name must not necessarily be the same name you see in a dropdown menu in some word processor. Use some font inspection software if you can't get your font working. It's also possible that your browser doesn't like the format. Use a different browser, or a service like fontsquirrel to convert your font.
At the moments px and points are possible. I'm still examining how other units work. If you need values that are outside of the range of the sliders type them into the form fields.
I plan to add some functionality over time:
- Kerning Tables: this is a must. Proper text warping needs individual kerned letters.
- Local storage. Would be nice not to start all over again every time you come here, right?
- Undo/Redo. One more nice to have.
Input and suggestions
If you have an idea, a feature request, found a bug or just want to tell how much you love this tool please use the contact form on my blog.