How can I code this awesome glowing border effect with CSS and JavaScript?

Question

This form has an awesome effect when you focus on one of its fields:

http://labs.dragoninteractive.com/panel/demo/

Any clues on how I can recreate this? Here are

Answer 1

The soft edge that you see is actually a transparent image named content-gradient.png inside an <img/> tag.

So the big colorful image comes beneath this PNG and creates an illusion of soft glowing edges.

If you have Google Chrome or Firefox with Firebug, you can "inspect" the DOM to see how it works. You'll notice that the colorful image's background position is being changed at runtime which can be done using a loop with jQuery or another Javascript library.

The js.php?page=login resource is probably what's taking care of the logic.

Answer 2

The color changing action occurs as the position of rmap.jpg (the very large colorful image) is animated. There is an .png with alpha-transparencies which acts as matte over rmap.jpg, creating the nice soft color transition. The animation is handled using jQuery.

Peter Schmalfeldt created a demo which is also downloadable.