Keyboard shortcuts that look like keys

I spotted this CSS class being used in Chrome keyboard shortcut help. I applied the style to our keyboard shortcut documentation at Magnolia. Now the shortcuts look like actual keys. That was a quick way to add a bit of polish.
.kbd {
  background-color: #f7f7f7;
  border: 1px solid #ccc;
  color: #333;
  font-size: 13px;
  line-height: 1.4;
  text-shadow: 0 1px 0 #fff;
  font-family: Arial,Helvetica,sans-serif;
  display: inline-block;
  padding: 0.1em 0.6em;
  margin: 0 0.1em;
  white-space: nowrap;
  -webkit-box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2), 0 0 0 2px #ffffff inset;
  -moz-box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2), 0 0 0 2px #ffffff inset;
  box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2), 0 0 0 2px #ffffff inset;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}

Here's the result:


Popular posts from this blog

Vanity URLs with Magnolia CMS

Image
Vanity URLs are short, easy to remember Web addresses used for campaigns, microsites and landing pages. They are a key Internet marketing tool. In this post I whip out my vanity cane, clip on my grill and show you how to get vain with Magnolia CMS. A vanity URL typically contains a word or phrase that describes a specific target such as a campaign slogan. When a user visits the vanity URL they are redirected to the actual target site. The URL can be constructed using a: trailing path: www.shell.com/ eco-marathon domain prefix: experience .virgin-atlantic.com domain suffix: www.amazon. de entirely unique domain name: mynavyfuture.com The URL is often reproduced in print ads, hoping that the short and snappy look makes it easier to remember. Magnolia CMS provides two approaches to creating vanity URLs: 1) Virtual URI mapping is used to create path-based vanity URLs. In this mechanism a trailing path is mapped to an actual page. In the configuration example below, www.example.com/winter...
Read more

Doc Jam 2013

Image
Magnolia Conference 2013 has left town. Time to sum up the results. I organized a Doc Jam session to collect feedback on documentation. If you haven't been to a jam session before, it's pretty simple: Name a documentation topic that is missing. Help us write a table of contents for it. Here are the top three topics proposed by the attendees. 1. Managing system health How can an administrator tell a system is healthy? Symptoms and numbers to watch out for (too many nodes?) Collecting system statistics. Events to log routinely vs. events to log when in trouble. Serious vs. harmless log entries Issue scenarios like what to do when the search stops returning results. Idea! Create a Health app that provides vital stats. 2. Replicating your environment Replicating a complete site to a dev or test environment.  Configuration to change after cloning. Changing subscribers to avoid publishing content to production. 3. Activation (publishing) best practic...
Read more