

Show HN: CSS3 Animated Glowing Forms - kaylarose
http://kaylarose.github.com/Glowform/
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/
======
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.

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

~~~
runningdogx
Chrome 10 (stable-latest): exhibits the problem

Chrome 11 (beta-latest): renders properly

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

~~~
malnourish
Good luck. The Webkit rendering really blows it out of the water.

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

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

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

------
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 2 _512_ w*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.

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

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

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

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

~~~
wdewind
runs kinda slow on my iphone :(

~~~
zinssmeister
what iphone are you using? 3G? 4?

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

~~~
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!

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

