Kamis, 13 Juni 2013

Responsive Text Effects - Gradient Overlays




Description

The Visual Builder

A long time ago …

In the dark ages of the internet, there were just 3 fonts and 12 colors to pick from for all your webdesign. Times were tough, but people had to just get by and make do with blinking text and cheesy Giff animations. Luckily,things slowly got better. The number of web-safe colors and fonts increased, and then cufon and sifr came along. Suddenly, withjust a little bit of of JavaScript or Flash wizardry, these tools allowed websites to pick and use any font they pleased, and therewas rejoicing and jubilation in web-designer land. But even greater things were yet to come, in the name of CSS3 and HTML5, whichnot only standardized the use of custom fonts, but brought many other goodies like native video playback, canvas and audio SVG.

And today, we’re happy to present to you the next step in the march towards more beautiful text and typography for theweb: Responsive Text Effects. This takes web typography to a whole new level, as you are no longer limited to using just oneflat color for HTML text blocks, but any kind of gradient you can imagine. No image or media files are required. Add to this the ability to work with HTML5’s custom fonts, including popular icon fonts like fontawesome, and the possibilities of what can be done with this are endless, limited only by the imagination. We’ve assembled a few examples to set the ball rolling, so please have a look at the live preview.

The script work much in the same way as cufon does, by taking text and transforming it into a live image using the canvas tag,that flows and responds to its containers size just like normal text would. The download package includes a specially made effectseditor and generator called the Visual Builder. use it to quickly tweak and create your text effects, without having to hand-code theJavascript configuration settings. The visual builder includes 7 custom fonts and over 30 images and video files that you’re free touse in your own designs. It is also fully customizable and well documented.




Category : Scripts, html5, canvas | Rating: 5.0 out of 5.