11 ms·
Show HN: CSS3 Animated Glowing Forms
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 16y agoI 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/ http://labs.dragoninteractive.com/panel/demo/
- edandersen 16y ago>> 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 16y agoMaybe it's just me, but the CSS3 rendering uses more of my CPU than the image scrolling.
- jarin 16y agoOkay, that is just sexy looking. I feel like I need to make a gaming site now or something.
- bmelton 16y agoI 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 http://imgur.com/E9tif
- deleted 16y ago[deleted]
- kaylarose 16y agoThe 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 16y agoChrome 10 (stable-latest): exhibits the problem Chrome 11 (beta-latest): renders properly
- bmelton 16y agoOh, I lied -- I'm on Chrome 10.
- malnourish 16y agoFirefox 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 16y agoI'm still working out the kinks in the alternate Firefox implementation which was actually my first attempt at this effect.
- malnourish 16y agoGood luck. The Webkit rendering really blows it out of the water.
- zinssmeister 16y agosuper slick! I can see this work well on an iPhone webview. I want it like ice cream :) Awesome job man.
- kaylarose 16y agoGood to hear, I didn't get a chance to test on the iPhone. Also, I am not a man. But thanks!
- zinssmeister 16y agohaha 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 16y agoruns kinda slow on my iphone :(
- zinssmeister 16y agowhat iphone are you using? 3G? 4?
- deleted 16y ago[deleted]
- tmgrhm 16y agoWorks nice and smooth on iPhone 4 until you zoom in — the further you zoom in, the more jumpy it becomes.
- elii 16y agoWhat's the point of having animated glowing forms if they swallow 50% of the machine's cpu?
- jarin 16y agoI 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 16y agoI thought one goal of using CSS3 is to have super performant animations.
- bmelton 16y agoI 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 16y agoThat 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 16y agoSubmit button is broken. Why is it outside of the <form>? Cool use of animation.
- kaylarose 16y agoIt's not meant to be a working form. Just a tech demo.
- retlehs 16y agoIt should still demonstrate proper HTML and it only takes a few seconds.. http://dl.dropbox.com/u/145404/demo.html http://dl.dropbox.com/u/145404/demo.html - submit inside the <form>
- bmelton 16y agoWhy, 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 16y agoWhy should it demonstrate proper HTML? Because you're showing everyone how to do something. Sites like http://css-tricks.com/ http://css-tricks.com/ and http://nicolasgallagher.com/ 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 16y agoIt'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.
- Xurinos 16y agoUsability 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 16y agoAdding a little bit more padding on the form and making the labels lighter would probably fix that problem.
- AndyJPartridge 16y agoI'm loving that glow! Great work. I'm outside on a laptop and can hardly read the grey text though.
- kaylarose 16y agoYeah, on some monitors the contrast is pretty low. I'll probably bump it up.
- melvinram 16y agoAm I the only one that thought "hmm, this is <blink> 2011"?
- jat850 16y agoMaybe, 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 16y ago"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 16y agoRemember, 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 16y agoThe text on the page is actually gray (#444).
- NY_USA_Hacker 16y agoRight! I have pixel color picker and could have discovered that!
- jiaaro 16y agoI 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 16y agoOkay! But, me, I couldn't tell the rest was just gray! I assumed you had lots of nice reds and greens in there!
- scoot 16y agoSo 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 16y agoMainly 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).
- rhizome 16y agoVery 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 16y agoThe 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 16y agoTry it with 256px shadows. ;)
- nitrogen 16y agoWell, 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 16y agoWhatever happened to usability
- JeremyBanks 16y agoIs this making some usability mistake? It seems like it has straightforward HTML that will work fine if the spiffy stuff isn't supported.
- nostrademons 16y agoThe 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.
- kaylarose 16y agoIt'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 http://news.ycombinator.com/item?id=2400392
- alkavan 16y agovery 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 16y agoWhy 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