Responsive Text Effects – Gradient Overlays (Canvas)

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 web
design. 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, with
just a little bit of of JavaScript or Flash wizardry, these tools allowed websites to pick and use any font they pleased, and there
was rejoicing and jubilation in web-designer land. But even greater things were yet to come, in the name of CSS3 and HTML5, which
not 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 the
web: Responsive Text Effects. This takes web typography to a whole new level, as you are no longer limited to using just one
flat 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 effects
editor and generator called the Visual Builder. use it to quickly tweak and create your text effects, without having to hand-code the
Javascript configuration settings. The visual builder includes 7 custom fonts and over 30 images and video files that you’re free to
use in your own designs. It is also fully customizable and well documented.

The Visual Builder

Download Responsive Text Effects – Gradient Overlays (Canvas)

Leave a Reply

Your email address will not be published. Required fields are marked *