Skip to Main Content
Painting the Web
book

Painting the Web

by Shelley Powers
May 2008
Beginner content levelBeginner
656 pages
17h 41m
English
O'Reilly Media, Inc.
Content preview from Painting the Web

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"> ...
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Start your free trial

You might also like

Reinventing the Organization for GenAI and LLMs

Reinventing the Organization for GenAI and LLMs

Ethan Mollick
Mastering PHP 7

Mastering PHP 7

Branko Ajzele

Publisher Resources

ISBN: 9780596515096Supplemental ContentErrata Page