[CSS]ショートカットの表記をApple Keyboard風に美しく実装するスタイルシート

サイト構築 -CSS

Post on:2013年5月10日

sponsorsr

ブログなどでショートカットを単にテキストで記述するのではなく、ちょっと洒落た感じに、Apple Keyboard風に実装するスタイルシートを紹介します。

これは、Apple Keyboardの写真

デモはこんな感じです。

デモページ

大きくすると、こんな感じ。
角丸もシャドウも美しくデザインされています。

デモページ：拡大

実装はシンプルで、HTMLはclass（mac-key）を付与するだけ、CSSも10行ちょいです。

HTML

<p>New Tab <span class="mac-key">&#x2318;</span> + <span class="mac-key">t</span>
</p>
<p>New Window <span class="mac-key">&#x2318;</span> + <span class="mac-key">n</span>
</p>
<p>New Incognito Window <span class="mac-key">&#x21E7;</span> + <span class="mac-key">&#x2318;</span> + <span class="mac-key">n</span>
</p>
<p>Reopen Closed Tab <span class="mac-key">&#x21E7;</span> + <span class="mac-key">&#x2318;</span> + <span class="mac-key">t</span>
</p>

CSS

body {
  padding:20px;
  height:100%;
  font: 20px Helvetica, serif;
  color: #555;
}

.mac-key {
  /*Box Properties*/
  display:inline-block;
  width:48px;
  height:48px;
  margin: 0px 4px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.5);
/*Text Properties*/
  font: 18px/48px Helvetica, serif ;
  text-transform: uppercase;
  text-align: center;
  color: #666;
}