Loading...CSS3 has gained immense popularity ever since it was introduced. With HTML5 and CSS3, many interactive design concepts have sprung up which would otherwise be inconceivable. CSS3 provides a wide range of options to beautify your website such as use of webfonts, drop shadow and object opacity control to name a few. Many aspects of CSS3 may be totally new for the users of CSS2 but there are many resources that for learning CSS3 on the web or for obtaining the desired results through easy-to-use tools. CSSWarp is a cool online utility that generates HTML/CSS code for Illustrator like warped text effect. Just play around with the tools and you can get a desired warped text design.
On CSSWarp, enter the text that you’d like to warp and hit the “Warp It” button. You’ll instantly see your text in a warped form on the artboard. You can also adjust the size of the artboard by clicking and dragging the resizing handles on its sides. You can play around with the Curve and move the control pints to alter its shape. You can also add more control points to the default path to have more control on the shape of the curves.
Web Fonts. You can choose a font from Google Fonts Dropdown and the font is automatically applied to the text. Or you can also choose local fonts, i.e. the ones already installed on your computer.
On CSSWarp, You can either choose pixels or points as the measurement units. You can also choose an option for aligning your text on the path which are Stair Step Aligned Text, Rotated Text and Vertical Skewed Text. Other advanced options like Kerning, Line Height, Anchor etc. are also available. Once you are done configuring your text on the path, click on the “Generate HTML” button and you’ll get the full HTML/CSS code for it.
The creator of CSSWarp also plans to add some other options in the future like Kerning Tables, Local Storage, CSS Warp is a very handy tool to add customized warped text on your site through HTML and CSS3.