Fancy Input adds CSS3 text effects to input fields — a gimmick or a chance to delight?

Fancy Input adds CSS3 text effects to input fields — a gimmick or a chance to delight?

Fancy Input is an experimental jQuery plugin that utilizes CSS3 effects in an unexpected place: text input fields.

Created by developer Yair Even-Or, this project is worth a look for any designer interested in emerging Web technology, but it also leaves room for an interesting discussion.

This, of course, is just an exploration of CSS3 — the developer himself describes it as a way to make “it fun to type text” — but, one of the best things about experiments is that they help us imagine the possibilities of real-world implementation. In the case of Fancy Input, it really does make filling out text fields significantly more entertaining, but beyond this isolated situation, should we use animated text to energize typing?


Shadows, gradients, and yes, animation (including text animation) are re-emerging on the Web following Flash’s decline, and this is a preview of how open technologies can be used in similar, but hopefully more tasteful ways.

Designs like this promotional page for Cloudier (an app which we covered here) have kept the use of animation classy, and Fancy Input should be praised as well for being both smooth and responsive.

I am concerned, however, that as animation becomes more common and as tools like Adobe Edge Animate develop, overuse and misuse will turn CSS3 animations into a gimmick, when what we really want to do, in most cases, is create an opportunity to delight.

What do you think?

➤ Fancy Input

For more on CSS3, these CSS 3D clouds are quite incredible.

Read next: Google Maps SDK for iOS 1.1 gains support for ground overlays, keys now open to all developers

Here's some more distraction