Keyboard Demo

25 March 2005 · Last updated: 11 December 2006

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

Useful Info

EMAIL: www.designdetector.com (replace the 1st dot with "@")

RSS NEWSFEED: Subscribe to news of fresh posts and site updates. (RSS 2.0 compatible newsreader required.)

Disclaimer

Some links on this website lead to information provided by external services not under my control, therefore I am not responsible for the content or accuracy of the linked information.

All code examples are not guaranteed 100% free from bugs and/or mistakes. Use them at your own risk. I do not take any blame should a problem occur relating to use of code on this site given as an example for your own use. Such code has been tested and found to work for me, but I cannot vouch for other computer systems (existing now, or in the future) which it may be used on, or changes you introduce yourself based on my code.

This website is © Christopher Hester, except where separate authors are named. No part of this website may be reproduced or re-used in any way without my prior permission, except content added from separate authors (who retain the copyright on their material), examples of code, and any other content I explicity state is free to copy and make use of.

This page was last updated on 11 December 2006.

What's New

Recent Finds


View previous finds

Current Book Reading

Recently Read Books