
Apple Keyboard in pure CSS. - sahillavingia
http://dl.dropbox.com/u/921159/Keyboard/page.html
======
x5315
"Pure CSS". Really? The CSS is cool and everything, but there's some
JavaScript going on there.

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

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

------
sahillavingia
Credit where credit's due: :)

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

------
ck2
[http://dl.dropbox.com/u/921159/Keyboard/keyboard-
background....](http://dl.dropbox.com/u/921159/Keyboard/keyboard-
background.jpg)

not so pure

~~~
jqueryin
This could easily be remedied with some CSS3 background gradients.

~~~
morphir
prove it :)

~~~
farlington
Proof: <http://f.cl.ly/items/0T010H1W0X2r3w1B2z3K/keyboard.html>

------
Groxx
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
Maybe he mapped CapsLock to be a control key, like the rest of us. :)

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

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

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

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

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

~~~
limmeau
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
This looks very silly when typing with the Dvorak layout. :)

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

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

[http://en.wikipedia.org/wiki/List_of_Unicode_characters#Geom...](http://en.wikipedia.org/wiki/List_of_Unicode_characters#Geometric_shapes)

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

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

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

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

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

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

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

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

------
geoffw8
Very cool. Works perfectly for me Chrome/osx.

------
dm8
It really looks great. CSS3 is really fun..

------
kaka189
Its fun.Its more fun in IE :)

------
apoo
Sweeet job

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

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

