Responsive Text Effects - Gradient Overlays
- Last Update
- 1 May 2013
- Regular License
- $12
- Extended License
- $60
- Sales
- 7
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.