Interactive CSS3 lighting effects

http://attasi.com/labs/ipad/

by jeremymcanally • 15 years ago

99 24 15 years ago

attasi.com

cleverjake• 15 years ago

wow, great job.

whiskers• 15 years ago

Stunning result in this case, and with minimal assets (an image, some CSS) - great!

Sadly doesn't obviously transfer well to anything other than a flat glossy object though.

james33• 15 years ago

The shadow can translate to a lot of other things, and that's the first thing I noticed.

emn132• 15 years ago

it's not just CSS3; there's some javascript too.

rhizome• 15 years ago

Flat glossy?! Did you see where they mentioned "specular highlights?" Proof positive.

smlacy2• 15 years ago

I don't get the "interactive" part? Can I interact with this? It feels like a static image to me.

thomasxiii2• 15 years ago

Pop that baby open in Safari.

EvanYou2• 15 years ago

Use a webkit browser.

emn132• 15 years ago

For some weird reason his javascript only sets -webkit- prefixed CSS properties; it's quite likely this would work in firefox (and possibly eventually IE10), were it not for this.

smlacy2• 15 years ago

I'm on Linux, so Chrome is all I've got.

arb99• 15 years ago

works for me in chrome 15.0.874.121 on osx

tikhonj• 15 years ago

It works for me on Chrome 15 under Fedora.

dantheman0207• 15 years ago

Working flawlessly on Ubuntu 11.10 with Chrome 15.0.874.121

EvanYou2• 15 years ago

Very sexy. I won't be surprised if I see this on the Apple home page one day.

untog• 15 years ago

(Best in Safari)

I know this is just an experimental page, but it still makes me shudder to see this kind of phrase reappearing on web sites.

funkah• 15 years ago

Gotta start somewhere.

lambda• 15 years ago

I really don't mind that sort of phrase when it's pointing out that the cutting-edge features that they are demonstrating, while they are on the standards track, currently work best in a particular browser.

On an actual production web page? Sure, that's awful. Blocking people on other browsers from viewing (like Apple did with their HTML5 showcase)? Yeah, that's bad. Demonstrating a technique that still requires vendor prefixes, and not applying all of the vendor prefixes that work? Well, that's just lazy.

But informing people that the effects you are demonstrating work best in a particular browser because the other browsers don't happen to implement those features yet, or aren't fully compatible yet, isn't bad. It's just preventing confusion for people who come there and don't see the given effect.

In order for web standards to progress, we need experimentation. We need early implementations, that test out the space, and we need designers who try out these implementations and see what you can do with them. And yeah, when that happens, they will be experimenting with features that aren't supported everywhere, and will create examples that only work on one or two browsers.

Complain when you see this in production. Complain when you see people recommending user agent sniffing. But for early stage experimentation? It's not a problem.

grunar• 15 years ago

Yet another reason that Flash is going the way of the dodo.

alabut• 15 years ago

Maybe more like a llama - still around but nowhere near as useful or in the same numbers. Llamas were like the cows of the Aztec era.

deepkut• 15 years ago

This is absolutely gorgeous.

businessbingo• 15 years ago

Looks fantastic :) Would be event better if it wasn't (Best in Safari)

Adolph_Jobs• 15 years ago

The guy's logo looks like a ripoff of the Arch logo :/

Interactive CSS3 lighting effects

Related Stories