Apple Keyboard in pure CSS. | Hacker News Reader

Apple Keyboard in pure CSS.

dl.dropbox.com

201 pointssahillavingia41 comments

"Pure CSS". Really? The CSS is cool and everything, but there's some JavaScript going on there.

Yeah, and there's HTML too! Complete bullshit!

More to the point, even if it were "pure css", there's nothing pure about it. Perhaps "only css" makes more sense, but CSS was meant as a way to separate style from content.

Try viewing this page without style and let me know what inherit content is present.

The obvious implication in the context of web development is that there were no images used -- all of the rendering is done on the fly by the browser.

However, there are images used, at least one for the background and four for the arrows.

Is that the obvious implication? I've seen pure css used in the context of no images, and I've seen it used in the context of no javascript. Both seem reasonable.

Credit where credit's due: :)

http://forrst.com/posts/Working_css3_Apple_Keyboard-thx

http://dl.dropbox.com/u/921159/Keyboard/keyboard-background....

not so pure

This could easily be remedied with some CSS3 background gradients.

prove it :)

Proof: http://f.cl.ly/items/0T010H1W0X2r3w1B2z3K/keyboard.html

cmd + a letter = a stuck letter. And aww, the capslock doesn't light up. And it would be even cooler if you could type with the keyboard.

Otherwise, excellent job. Responsive and looks great - it's kinda fun to watch myself type as I type :)

Maybe he mapped CapsLock to be a control key, like the rest of us. :)

I tried pressing Caps Lock and Escape depressed, then I remembered that I have it mapped.

Not so responsive for me in my office Xp in Chrome. Gets stuck if I type too fast.

And on Chrome on Linux, it doesn't work at all, as in nothing gets typed. However it's still pretty cool from an effect perspective.

Works fine for me, Chromium 9.0.597.107 Ubuntu 10.10 64Bit

Same setup here. When you type with your physical keyboard you should see the virtual keyboard animating but not the other way around. Took me some time to figure...

Works perfectly here, in Chrome, on Linux. You're clicking up top to set focus first, right?

yeah I'm doing that. It seems to work only when I use my keyboard. Clicking on the actual keys doesn't work. I have Ubuntu 10.10 32bit and Chrome 9.0.597.107 The CAPS lock also doesn't light up.

firefox 4 linux doesn't seem to work for me but it could be noscript.

Did you try clicking on the white pad first to set the cursor position?

Welcome to the future of the web.

Saw a cool presentation at Hack And Tell tonight: Rule 110 in only css3 http://elilies.com/rule110-full.html

Nice, but I still need a keyboard to press space and tab. Now if there was a way of simulating a keyboard in only CSS3...

This looks very silly when typing with the Dvorak layout. :)

Your Dvorak looks pretty silly too when using QGMLWB. ;)

Awesome. I think the eject icon could be made out of unicode symbols.

http://en.wikipedia.org/wiki/List_of_Unicode_characters#Geom...

Good idea. I think the arrow keys could be made out of unicode symbols as well.

Works perfectly in Safari 5. Excellent job. Beautiful to look at and works great, just like the Apple keyboard itself. The only way it could be better is if the focus (the cursor) is automatically loaded and placed on the first line of the page on page-load. I had to click on the paper to start typing.

It's pretty sweet. One bug i noticed: holding down the shift key breaks up the bottom row. (using chrome)

I should probably mention that I'm zoomed out (cmd -)

Just a shame that on my work machine (running Windows 7) it does not work with a touch screen. Maybe iPad owners have more luck, but this seemed like the only useful use case for such a keyboard so I was disappointed that it did not "press" the keys as it does with the mouse.

I didn't expect to see an html element with id="asdfg" that actually makes sense.

I'm surprised no font snob has brought up the lack of VAG Rounded yet.

Why is the Delete "key" tied to Delete instead of Backspace?

Very cool. Works perfectly for me Chrome/osx.

It really looks great. CSS3 is really fun..

Its fun.Its more fun in IE :)

Sweeet job

Sigh. Who's going to write the first good GUI for cross-browser CSS?

There are a couple of GUIs for cross-browser CSS, many of them are web based. A quick search with searchyc, or Google will yield numerous results.

Reply on news.ycombinator.com