Show HN: CSS3 Animated Glowing Forms

[kaylarose]

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.

I recommend using a Webkit browser [and you can see an alternate version of the animation on Firefox 4].

[1] http://labs.dragoninteractive.com/panel/demo/

[kaylarose]

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.

I wanted to see how close I could get using CSS3 without any images.

I recommend using a Webkit browser [you can also see an alternate implementation using Firefox 4]

[1]http://labs.dragoninteractive.com/panel/demo/

[edandersen]

>> They implement the effect by using a rather large background image and a mask image and move the background image around via Javascript.

Scrolling the background image position with javascript can be really slow on even recent browsers, pushing the CPU when software rendering. Mobile Safari also shows image "seams" between mask images when zoomed out.

[bmelton]

I usually consider these exercises as fun, but pointless. This certainly meets that criteria, but I could actually see using this in a project.

It is very hot.

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: http://imgur.com/E9tif

[kaylarose]

The button uses a combination of a border radius and and inset box shadow to achieve the top highlight, and for some reason Chrome doesn't seem to contain the box shadow within the border boundaries.

[jarin]

Okay, that is just sexy looking. I feel like I need to make a gaming site now or something.

[Xurinos]

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.

This is cool-looking, for sure.

[jarin]

Adding a little bit more padding on the form and making the labels lighter would probably fix that problem.

[malnourish]

Firefox 4, animation does not restart after focusing a form field, clicking elsewhere, and then re-focusing on it.

I quite like the whole effect, though.

[kaylarose]

I'm still working out the kinks in the alternate Firefox implementation which was actually my first attempt at this effect.

[elii]

What's the point of having animated glowing forms if they swallow 50% of the machine's cpu?

[jarin]

I don't think the goal of an animated glowing form is to minimize CPU usage, so this is a bit of a non sequitur.

[melvinram]

Am I the only one that thought "hmm, this is <blink> 2011"?

[jat850]

Maybe, or maybe not, but this is nowhere near as offensive as blink. This is fairly subtle, and if put to a greyscale series, it would be barely even noticeable except as some neat lighting effects.

[radley]

"The logo is on fire," explains one surfer. "Why is the logo on fire?" she asks. "Uh," he stammers as the enthusiasm in his voice quickly dissipates, "it's a flaming logo."

[rhizome]

Very nice. I recently tested out a few designs using large CSS3 shadows and it indeed slowed the browser way 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.

[kaylarose]

The Webkit implementation uses 2 layers of: looped keyframes, color transitions, multi-colorstop gradient backgrounds (which are then animated via background-position animation). And all that sits under two larger inset rgba box-shadows. [+ the gradients and shadows on the inner form itself]

That said, I've actually been pretty pleased performance-wise, I expected worse.

[AndyJPartridge]

I'm loving that glow!

Great work.

I'm outside on a laptop and can hardly read the grey text though.

[kaylarose]

Yeah, on some monitors the contrast is pretty low. I'll probably bump it up.

[kingsidharth]

Whatever happened to usability

[kaylarose]

It's a tech demo. The point is to explore the capabilities of CSS - not to be a shining example of usability.

Related: http://news.ycombinator.com/item?id=2400392

[JeremyBanks]

Is this making some usability mistake? It seems like it has straightforward HTML that will work fine if the spiffy stuff isn't supported.

[retlehs]

Submit button is broken. Why is it outside of the <form>?

Cool use of animation.

[kaylarose]

It's not meant to be a working form. Just a tech demo.

[zinssmeister]

super slick! I can see this work well on an iPhone webview. I want it like ice cream :)

Awesome job man.

[kaylarose]

Good to hear, I didn't get a chance to test on the iPhone.

Also, I am not a man. But thanks!

[NY_USA_Hacker]

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.

I'm such a man and mostly can't read that page.

[jiaaro]

I agree on the importance of accessibility but just wanted to make a note that the only colors on that page are the glowing effect around the form.

the rest of the page actually is grey.

The entire design COULD use a little bump in contrast to aid readability though

[kaylarose]

Edit: Sorry, other people beat me to it. See other replies re:text colors.

However I agree about the contrast, I checked on my external dev monitor (vs. my super bright MBP screen) and the contrast could definitely use some work.

[natrius]

The text on the page is actually gray (#444).

[biot]

A bit of an aside, but to my eyes the HN banner is better described as 'burnt orange' or 'dark carrot' rather than fire engine red.

[mkilling]

Why does this have 160 upvotes on Hacker News? It's CSS, it doesn't work in all browser and it's not even remotely useful