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 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.