HN Explorer

Show HN: CSS3 Animated Glowing Forms (kaylarose.github.com)

182 points by kaylarose ↗ HN
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/

61 comments

[ 3.2 ms ] story [ 127 ms ] thread
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.

mauriciob
Maybe it's just me, but the CSS3 rendering uses more of my CPU than the image scrolling.
jarin
Okay, that is just sexy looking. I feel like I need to make a gaming site now or something.
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

[deleted]
(comment deleted)
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.
runningdogx
Chrome 10 (stable-latest): exhibits the problem

Chrome 11 (beta-latest): renders properly

bmelton
Oh, I lied -- I'm on Chrome 10.
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.
malnourish
Good luck. The Webkit rendering really blows it out of the water.
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!

zinssmeister
haha sorry about that. good job woman :) Ok that doesn't sound right either.

Yeah I just checked it on my iPad and it looks nice.

wdewind
runs kinda slow on my iphone :(
zinssmeister
what iphone are you using? 3G? 4?
[deleted]
(comment deleted)
tmgrhm
Works nice and smooth on iPhone 4 until you zoom in — the further you zoom in, the more jumpy it becomes.
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.
elii
I thought one goal of using CSS3 is to have super performant animations.
bmelton
I thought that was the point of WebGL?

Honestly, this is the first I've heard of CSS3 animations as intending to be ultra-fast, but I admittedly haven't kept up on the HTML5/CSS3 discussions.

Can you cite a reference for me please?

jarin
That may be the one goal, but I think probably a bigger goal is to have animations that are handled by the browser itself (and not Flash), and can be written in lightweight code.
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.
retlehs
It should still demonstrate proper HTML and it only takes a few seconds..

http://dl.dropbox.com/u/145404/demo.html - submit inside the <form>

bmelton
Why, exactly, should it demonstrate proper HTML?

The POINT is the glow. That the glow works on a form is by happenstance, I'd suppose, as that was the original inspiration. Regardless, it could be a glow behind a blank div and I'd be equally impressed.

The nit that you're picking is akin to tasting someone's new gumbo recipe, and complaining that they didn't use the good china.

retlehs
Why should it demonstrate proper HTML? Because you're showing everyone how to do something.

Sites like http://css-tricks.com/ and http://nicolasgallagher.com/ don't show you how to make things with incorrect code, they show you how to make things with beautiful, semantic code.

bmelton
It's a proof of concept, not a tutorial.

I think our interpretation of this is different. Your assertion is that she's trying to show people how to do something. My take is that she's showing people what she did.

rberdeen
"Proper HTML"? There are some minor problems with it, but the placement of the input tag isn't one of them.

Try validating it.

bretthopper
For a tech demo that's #1 on HN I don't think it's too much to ask to have a valid HTML form.
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.
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.
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."
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.

natrius
The text on the page is actually gray (#444).
NY_USA_Hacker
Right! I have pixel color picker and could have discovered that!
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

NY_USA_Hacker
Okay! But, me, I couldn't tell the rest was just gray! I assumed you had lots of nice reds and greens in there!
scoot
So why say you can't read it when you can read it as well as the rest of us? Overstating your case just makes you look... well, not smart.
knowtheory
Mainly it makes him look color-blind, and used to people not designing accessible visual experiences.

The fact that he found the site difficult to read (like everyone else), he attributed to the most likely cause of such experiences in the past, i.e. his color-blindness, rather than the fact that the design is just really hard to read.

That the design is so difficult to read is done mainly to make the form pop out by contrast. It's a cool effect, but there's no way i'd deploy that for mass consumption. It's a piece of artwork in it's current state (albeit a really cool one).

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.

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.
NY_USA_Hacker
I'm "partial red-green" color blind. So, saturated, primary reds and greens I see as distinct. But if start to mix colores with some reds and greens, then I can see two colors as the same that other people see as distinct.

Partial red-green color blindness is very well understood. Nearly all colors that should be distinct still are but, yes, apparently I don't see fire engines and carrots just the same!

[deleted]
(comment deleted)
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.

rhizome
Try it with 256px shadows. ;)
nitrogen
Well, when you're doing a minimum of 256000 calculations per page element, you should expect some slowness (assuming a radius 256 filter requires a 512x512 kernel to process). A less naive implementation of blurring blurs horizontally then vertically, for a rough estimate of 2512w*h calculations, which could still be a lot for a lot of page elements.

I guess what I'm trying to say is this: don't expect to render a ton of large-radius shadows in realtime unless you're rendering with a modern game engine on a fast GPU.

kingsidharth
Whatever happened to usability
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.
nostrademons
The problem is that the intent of a user, when they see in a form, is to fill in that form. Adding a glowing background distracts them from their task, hence bad usability.

It's much like Google's homepage fade, which was originally added to draw attention to the search box (the primary focus of the page) and remove the distractions of the other links. The problem was that it fired almost all the time, and whenever there's an animation going on, your attention is drawn to the animation and away from whatever it is that you were doing. It ends up being counterproductive to animate parts of the page in order to highlight other, static parts of the page.

alkavan
very cool! but this seems to work right only on Chrome 11? FF4 animation does not change color / does not restart and in IE9 it just looks green and ugly. can't see much use right now :\",
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