Ridiculous Things To Do With CSS3 Box Shadows | Hacker News Reader

Ridiculous Things To Do With CSS3 Box Shadows

viget.com

124 pointsjessedhillon15 comments

I know HTML5 and CSS3 are cool and exciting new opportunities, but these examples use just as much CPU (if not more) as they would if built in Flash. Insane CPU usage is part of the reason I ditched Flash.

There will be more hardware acceleration to come for CSS3. Gotta give Google, Apple, Mozilla, and Microsoft a high bar to shoot for.

Someone should gather all these cool demos for browser "certification."

Yeah, in the future there will be ads saying you should buy the latest nVidia graphics card for your fucking browser.

They already do.

http://www.asus.com/News/s3uOpCJHYLTl31xy/

Why is that bad? Everyone uses a browser. Now all we need is a popular web game to use as a benchmark.

Witch is fine because the future browser are going to include more and more video, animations and audio.

Users like you could always use the lynx browser, and let other people choose what they want.

Of course this is not exclusively using box shadow but all kinds of clever CSS3 properties such as transform, gradients, etc - non the less very well done.

It really shows what kind of freedom CSS3 brings to the web.

Most of these things (if not all) can be done in Firefox. I'd assume the point of this is to show off the cool things you can do with "HTML5"-- and making it work in just one browser seems to go against the goal.

box-shadow is CSS3, not HTML. HTML is markup for text, CSS is formatting that text.

It's not about making it only work in one browser — it's that currently these effects collectively (as Arnorhs points out, this isn't just box-shadow) are only rendered properly by that one browser (actually it's the rendering engine which is most important here — WebKit — which means I can view them fine in Safari 5.1).

I not sure why the developer labels it "Chrome only". I use Webkit Nightly (Safari) as my main browser, and it's slightly annoying when developers don't seem to realize that Safari and Chrome are both Webkit browsers and as such their support of the CSS3 spec is exactly the same.

The difference is the version of webkit included in the browser. I'm also running nightly Webkit, and all the examples work fine, however in default Safari 5 only about 60% render correctly

A lot of these are only rendered "properly" by WebKit because they're using WebKit-specific syntax. And I don't mean the prefixes; I mean cases where the WebKit-prefixed syntax differs from what the spec drafts say. So if you just swap the prefixes it'll look "wrong" in browsers that are following the draft more closely.

This rocks so hard. I'm definitely going to have to find a way to get these effects into my CSS editor.

Impressive! More eye-opening than any HTML5 (Canvas) demo that I've seen

Really? Even one from 2009 is pretty impressive.

http://9elements.com/io/projects/html5/canvas/

Yes, much more impressive than that.

Recreating old Flash demos from 2004 in HTML 5 Canvas is nothing special. If you got drawCircle() and setBrush() in your framework, it's not a giant leap to add animation following the mouse. It's not impressive because that's what such an API is supposed to allow. It's like being impressed that the statement echo "Hello World" printed something to the screen when that's exactly what it's supposed to do.

I found the CSS demo more impressive because it did something unexpected and creative with CSS. They turned the concept of a "box shadow" on its head.

Reply on news.ycombinator.com