Apple Keyboard in pure CSS.

http://dl.dropbox.com/u/921159/Keyboard/page.html

by sahillavingia • 15 years ago

201 41 15 years ago

dl.dropbox.com

apoo• 15 years ago

Sweeet job

aba_sababa• 15 years ago

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

asnyder• 15 years ago

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.

pokoleo2• 15 years ago

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

pokoleo2• 15 years ago

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

Groxx• 15 years ago

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

genera• 15 years ago

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

tiddchristopher• 15 years ago

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

tuhin• 15 years ago

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

alexsb922• 15 years ago

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.

tremendo• 15 years ago

Works fine for me, Chromium 9.0.597.107 Ubuntu 10.10 64Bit

olalonde• 15 years ago

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

pmcginn• 15 years ago

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

alexsb922• 15 years ago

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.

rtaycher• 15 years ago

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

narsil• 15 years ago

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

smackfu• 15 years ago

Welcome to the future of the web.

x5315• 15 years ago

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

littledanehren• 15 years ago

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

irrelative• 15 years ago

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.

nitrogen• 15 years ago

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.

sahillavingia• 15 years ago

Credit where credit's due: :)

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

gnubardt• 15 years ago

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

limmeau• 15 years ago

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

paulbaumgart• 15 years ago

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

kahawe• 15 years ago

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

maxbRuns• 15 years ago

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

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

yeahsure• 15 years ago

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

kaka189• 15 years ago

Its fun.Its more fun in IE :)

geoffw8• 15 years ago

Very cool. Works perfectly for me Chrome/osx.

defroost• 15 years ago

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.

ck2• 15 years ago

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

not so pure

jqueryin• 15 years ago

This could easily be remedied with some CSS3 background gradients.

morphir• 15 years ago

prove it :)

dm8• 15 years ago

It really looks great. CSS3 is really fun..

zachbeane• 15 years ago

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

graywh• 15 years ago

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

Spic• 15 years ago

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

micheljansen• 15 years ago

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.

Apple Keyboard in pure CSS.

Related Stories