WebAppers

/ best free open source web resources /

Shopify

CSS3 Text to Path Generator

Posted · Category: License Free, Tools

CSS3Warp is a proof of concept: create Illustrator like “warped” text (text following an irregular path) with pure CSS and HTML.

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 your done, click “Generate code”. Copy the CSS and HTML into your document.

css-text-to-path

Requirements: CSS3 Support
Demo: http://csswarp.eleqtriq.com/
License: License Free

4 Comments
  • andy

    Very cool. Thanks for this.

  • http://karloo.com rain

    good function~

  • Pingback: Länktips vecka 10 | Niklas Malmgren

  • http://www.crearedesign.co.uk Will Postlethwaite

    This is a really cool application to demonstrate the capability of css3. Real time generator also fun to use and the code is done for you. All in all a neat app, but as for cross browser compatibility css3 still has some issues there. great app thou

Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons