Keyboard Demo

25th March 2005 · Last updated: 5th October 2016
 

Comments

I recently came across this great Windows Keyboard Layout demo, made entirely with CSS and a couple of images. But I didn't like the gaps between the rows of keys, nor the way the keys had the top and bottom characters on one line, separated by a slash. Plus I don't think you need the lower case alphabet on there. Also, it doesn't show the keys on the right side, such as the arrows and number pad.

Not one to let possible improvements go by, I decided to see if I could spruce it up a bit. I ended up spending hours perfecting a whole new demo, which I've tried to make look as realistic as possible. I created several more images (for the various arrows and such) and aligned each key so the shape matched my own keyboard. (Yes, my right SHIFT key really is that wide!) I even added the three green lights at the top. And if you look closely, you'll also see some text on the bottom slope of two keys.

Here then is my demo.

Note: It works perfectly in Opera 7.54u2, Opera 8.02 and Firefox 1.0.5 on Windows XP. I haven't tried other browsers, except for IE6, which is a total disaster. If anyone cares to find out why, please do. Let me know of any problems with other modern browsers and platforms too.

Note also that if you have a Minimum Font Size set to 10px or higher, some of the small text on the keys may be too large. (It is set to 9px.)

If it looks a mess on your system, here's a screenshot of how it should look.

Comments (2)

Comments are locked on this topic. Thanks to everyone who posted a comment.

  1. Steven:
    Sweet! I'm sorry you never got any comments about this post, that is extremely cool...

    Have you seen the creating the British flag with border art on Stu's site? It's pretty cool... I never knew how powerful CSS was until recently. I love your site too! I'm sorry it can't keep going...

    Regards,

    -Steven

    Posted on 6 April 2005 at 1:54 am
  2. Chris Hester:
    Wow! Stu's flag, and other demos on his site, are out of this world!

    I have no hesitation in recommending him as the new God Of CSS. Just look at the excellent alternative styles you can apply to the front page. (Better than many I have seen in the CSS Zen Garden!)

    His CSS animation trick is also incredible. This should be linked to on every site.

    I know I was right to quit now, this guy is streets ahead of anything I can do.

    Posted on 6 April 2005 at 10:54 am