Skip to main content

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.

keys-css-chromium

Old, non-supported browsers degrades to this.

keys-css-old

Labels:

Comments

  1. michaelhueOctober 6, 2010 at 6:23 PM

    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. :)

    ReplyDelete

Post a Comment

Popular posts from this blog

How to Record CPU and Memory Usage Over Time in Windows?

Whenever the computer is lagging or some application is taking too long to respond, we usually fire up task manager and look under the Performance tab or under Processes to check on processor utilization or the amount of free memory available. The task manager is ideal for real-time analysis of CPU and memory utilization. It even displays a short history of CPU utilization in the form of a graph. You get a small time-window, about 30 seconds or so, depending on how large the viewing area is.
17 comments
Read more

How to Schedule Changes to Your Facebook Page Cover Photo

Facebook’s current layout, the so called Timeline, features a prominent, large cover photo that some people are using in a lot of different creative ways. Timeline is also available for Facebook Pages that people can use to promote their website or business or event. Although you can change the cover photo as often as you like, it’s meant to be static – something which you design and leave it for at least a few weeks or months like a redesigned website. However, there are times when you may want to change the cover photo frequently and periodically to match event dates or some special promotion that you are running or plan to run. So, here is how you can do that.
1 comment
Read more

Diagram 101: Different Types of Diagrams and When To Use Them

Diagrams are a great way to visualize information and convey meaning. The problem is that there’s too many different types of diagrams, so it can be hard to know which ones you should use in any given situation. To help you out, we’ve created this diagram that lays out the 7 most common types of diagrams and when they’re best used:
Post a Comment
Read more