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

Search Engine Optimization

Image
This is the first post in a series on search engine optimization (SEO). I will be looking at key SEO factors identified by the SEOmoz.org consulting group and pitting them against Magnolia CMS , a Web content management system. This series should be interesting to online marketers, people employing web communications, and anyone looking to increase their site rank. Download all posts in a single PDF. What is SEO? The purpose of SEO is to enhance the volume and quality of traffic directed to a website via search engine results. Search engines aim to provide users with the most relevant results, while webmasters attempt to tweak their sites in order to move it up in the rankings and attract profitable, organic traffic. SEO began in the early 1990s, and quickly degenerated into a tug of war between search engines and webmasters. For each new weighting factor introduced by the engines, crafty webmasters invented means to circumvent it. As a result, many undeserving sites achi...
Read more

Search-engine friendly URLs

Image
This post belongs to a series about  search engine optimization  (SEO) with Magnolia CMS. Today we look at creating search-engine friendly URLs. URLs are an important SEO element for search engines as well as users. Search engines are more likely to index static, short, clean URLs. Users appreciate their readability too. While most crawlers can follow dynamically generated URLs, there is evidence that when dynamic parameters are appended to a URL, the crawler only follows them to sites considered to have high importance. Request parameters should be avoided in the URL, as the crawler may view several URLs pointing to the same content as duplicates, lowering page rank. Good http://www.yoursite.com/books/hardcover Bad http://www.yoursite.com?p=72&s=0 Page URLs should: Include important keywords, as keywords are highlighted in search results. Most SEO experts agree that including them in a URL is important. Keywords also increase the likelihood of a visitor click...
Read more