Show HN: CSS3 Animated Glowing Forms | Hacker News Reader

Show HN: CSS3 Animated Glowing Forms

kaylarose.github.com

182 pointskaylarose57 comments

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/

Open articleView on HN

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/

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

Maybe it's just me, but the CSS3 rendering uses more of my CPU than the image scrolling.

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

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.

Chrome 10 (stable-latest): exhibits the problem

Chrome 11 (beta-latest): renders properly

Oh, I lied -- I'm on Chrome 10.

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

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.

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

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.

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

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

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

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.

I thought one goal of using CSS3 is to have super performant animations.

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?

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.

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

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.

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

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.

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.

Try it with 256px shadows. ;)

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.

I'm loving that glow!

Great work.

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

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

Whatever happened to usability

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

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.

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

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

Cool use of animation.

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

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>

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.

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.

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.

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

Try validating it.

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.

https://github.com/kaylarose/Glowform/commit/f52937

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

Awesome job man.

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

Also, I am not a man. But thanks!

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.

runs kinda slow on my iphone :(

what iphone are you using? 3G? 4?

Works nice and smooth on iPhone 4 until you zoom in — the further you zoom in, the more jumpy it becomes.

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.

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

Right! I have pixel color picker and could have discovered that!

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

Okay! But, me, I couldn't tell the rest was just gray! I assumed you had lots of nice reds and greens in there!

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.

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

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.

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.

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!

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

Reply on news.ycombinator.com