Wednesday, October 6, 2010

Add stylish keyboard styled elements with KEYS.css

If you blog about computers and often show keyboard hotkeys for programs in your post, you can stylize those keyboard keys by using the KEYS.css stylesheet.

Just add the stylesheet to your web pages and wrap the letters with the already defined <kbd> tag for HTML. This will transform the wrapped text into keyboard styled elements. There are 2 styles provided, light and dark and the styled letters fit to any font size automatically.

keys-css-black keys-css-white

KEYS.css uses CSS3 properties, so it will work on modern browsers and degrades gracefully for older browsers.

I have found that KEYS.css works best on Firefox and Opera, both producing identical results (the above screenshots were taken on Firefox). On Chrome 7, and possibly all Webkit based browsers, it produces a slightly less than desirable output.


Old, non-supported browsers degrades to this.


1 comment:

  1. Hey, thanks for this great roundup! I'd like to shed some light on the issue with Chrome. It's a known rendering bug that occurs on elements with inset box-shadow and a border-radius. This only affects Chrome on Windows and Linux, Safari and Chrome on OS X display it correctly.

    The problem is that there are seemingly no workarounds so I only have two choices: leave everything as it is and hope that the bug will be fixed soon or remove the inset box-shadow for Webkit which would take away significant detail for all Safari and Chrome OS X users.

    Feedback is very much appreciated. :)


Popular Posts