Rosy Glow of Completion
Years ago I attended a developers conference in Boston. One of the sessions I attended was given by one of the originators of the user interface design for Visual Basic. He was talking about how, in the future, every action a person takes in an application will generate feedback in some format. As an example he mentioned a form that would gradually change color as each field was filled in. He called it the "rosy glow of completion," or something along those lines.
In past years, we could implement a rosy glow of completion for forms using dynamic HTML, but we'd either have to create background images, or lose the gradually increasing effect associated with this technique. Now, with both the canvas element and SVG, implementing the "rosy glow of completion" is a piece of cake.
Example 15-11 shows a web form with a rounded box around the five input fields and div-based button. I used a div element because I didn't want to mess around with having to cancel a form submit, since this example is demonstrating just the visual aspect of the rosy completion effect.
Behind the form is an SVG rounded rectangle. As fields are filled in and the Try It button clicked, depending on how many fields are completed, the background color is gradually filled in with—what else?—a nice misty rose.
Example 15-11. Rosy glow of completion à la SVG
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd"> ...