10 ms·
Apple Keyboard in pure CSS.
- apoo 16y agoSweeet job
- aba_sababa 16y agoSigh. Who's going to write the first good GUI for cross-browser CSS?
- asnyder 16y agoThere 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.
- pokoleo 16y agoIt's pretty sweet. One bug i noticed: holding down the shift key breaks up the bottom row. (using chrome)
- pokoleo 16y agoI should probably mention that I'm zoomed out (cmd -)
- Groxx 16y agocmd + 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 16y agoMaybe he mapped CapsLock to be a control key, like the rest of us. :)
- tiddchristopher 16y agoI tried pressing Caps Lock and Escape depressed, then I remembered that I have it mapped.
- tuhin 16y agoNot so responsive for me in my office Xp in Chrome. Gets stuck if I type too fast.
- alexsb92 16y agoAnd 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 16y agoWorks fine for me, Chromium 9.0.597.107 Ubuntu 10.10 64Bit
- olalonde 16y agoSame 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 16y agoWorks perfectly here, in Chrome, on Linux. You're clicking up top to set focus first, right?
- alexsb92 16y agoyeah 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 16y agofirefox 4 linux doesn't seem to work for me but it could be noscript.
- narsil 16y agoDid you try clicking on the white pad first to set the cursor position?
- smackfu 16y agoWelcome to the future of the web.
- x5315 16y ago"Pure CSS". Really? The CSS is cool and everything, but there's some JavaScript going on there.
- littledanehren 16y agoYeah, and there's HTML too! Complete bullshit!
- irrelative 16y agoMore 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 16y agoThe 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.
- Dylan16807 16y agoIs 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.
- sahillavingia 16y agoCredit where credit's due: :) http://forrst.com/posts/Working_css3_Apple_Keyboard-thx http://forrst.com/posts/Working_css3_Apple_Keyboard-thx
- gnubardt 16y agoSaw a cool presentation at Hack And Tell tonight: Rule 110 in only css3 http://elilies.com/rule110-full.html http://elilies.com/rule110-full.html
- limmeau 16y agoNice, 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 16y agoThis looks very silly when typing with the Dvorak layout. :)
- kahawe 16y agoYour Dvorak looks pretty silly too when using QGMLWB. ;)
- maxbRuns 16y agoAwesome. I think the eject icon could be made out of unicode symbols. http://en.wikipedia.org/wiki/List_of_Unicode_characters#Geometric_shapes http://en.wikipedia.org/wiki/List_of_Unicode_characters#Geom...
- yeahsure 16y agoGood idea. I think the arrow keys could be made out of unicode symbols as well.
- kaka189 16y agoIts fun.Its more fun in IE :)
- geoffw8 16y agoVery cool. Works perfectly for me Chrome/osx.
- defroost 16y agoWorks 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 16y agohttp://dl.dropbox.com/u/921159/Keyboard/keyboard-background.jpg http://dl.dropbox.com/u/921159/Keyboard/keyboard-background.... not so pure
- jqueryin 16y agoThis could easily be remedied with some CSS3 background gradients.
- morphir 16y agoprove it :)
- farlington 16y agoProof: http://f.cl.ly/items/0T010H1W0X2r3w1B2z3K/keyboard.html http://f.cl.ly/items/0T010H1W0X2r3w1B2z3K/keyboard.html
- dm8 16y agoIt really looks great. CSS3 is really fun..
- zachbeane 16y agoI'm surprised no font snob has brought up the lack of VAG Rounded yet.
- graywh 16y agoWhy is the Delete "key" tied to Delete instead of Backspace?
- Spic 16y agoI didn't expect to see an html element with id="asdfg" that actually makes sense.
- micheljansen 16y agoJust 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.