I remember seeing the Dragon Labs Dragonfish Glowing Form Demo[1] when it first came out, and it always stuck in my head. They implement the effect by using a rather large background image and a mask image and move the background image around via Javascript. I was inspired and wanted to see how close I could get with CSS3.<p>I recommend using a Webkit browser [and you can see an alternate version of the animation on Firefox 4].<p>[1] http://labs.dragoninteractive.com/panel/demo/
I remember being impressed by Dragon Lab's Dragonfish Login Form Demo[1] when it first came out. They implement the effect by using a rather large background image and a mask image and move the background image around via Javascript.<p>I wanted to see how close I could get using CSS3 without any images.<p>I recommend using a Webkit browser [you can also see an alternate implementation using Firefox 4]<p>[1]<a href="http://labs.dragoninteractive.com/panel/demo/" rel="nofollow">http://labs.dragoninteractive.com/panel/demo/</a>
I usually consider these exercises as fun, but pointless. This certainly meets that criteria, but I could actually see using this in a project.<p>It is very hot.<p>Are you also creating the 'Log in' button with CSS3? It's a little off on my screen. Browser is Chrome 9 on Windows 7: <a href="http://imgur.com/E9tif" rel="nofollow">http://imgur.com/E9tif</a>
Usability problem: the animation attracts attention, distracts the eye. The moving glow, mixed with the small lettering, makes it hard to read quickly. When the animation finally stopped on my system, I was suddenly able to read the lettering easier.<p>This is cool-looking, for sure.
Firefox 4, animation does not restart after focusing a form field, clicking elsewhere, and then re-focusing on it.<p>I quite like the whole effect, though.
Very nice. I recently tested out a few designs using large CSS3 shadows and it indeed slowed the browser <i>way</i> down when applied to a "FB Wall" number of page elements. Hopefully we don't have to wait for hardware to pick up the slack in implementation here.
Remember, about 25% of men are partially red-green color blind. So, a 'fire engine red' such as in the usual banner at HN such men can see, but lots of 'red' in mixtures of colors register as black. An emerald green can be seen, but in lots of mixtures the greens don't register. So, some light greens register as gray.<p>I'm such a man and mostly can't read that page.