Konami Code Markup and Style

by J. Albert Bowden

HTML

<ul>
  <li><kbd class="keyboard-key">↑</kbd></li>
  <li><kbd class="keyboard-key" >↑</kbd></li>
  <li><kbd class="keyboard-key" >↓</kbd></li>
  <li><kbd class="keyboard-key" >↓</kbd></li>
  <li><kbd class="keyboard-key" >←</kbd></li>
  <li><kbd class="keyboard-key" >→</kbd></li>
  <li><kbd class="keyboard-key" >←</kbd></li>
  <li><kbd class="keyboard-key" >→</kbd></li>
  <li><kbd class="keyboard-key" >B</kbd></li>
  <li><kbd class="keyboard-key" >A</kbd></li>
</ul>

CSS

.keyboard-key{border: 1px solid #aaa; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; -moz-box-shadow: 1px 2px 2px #ddd; -webkit-box-shadow: 1px 2px 2px #ddd; box-shadow: 1px 2px 2px #ddd; background-color: #f9f9f9; background-image: -moz-linear-gradient(top, #eee, #f9f9f9, #eee); background-image: -ms-linear-gradient(top, #eee, #f9f9f9, #eee); background-image: -o-linear-gradient(top, #eee, #f9f9f9, #eee); background-image: -webkit-linear-gradient(top, #eee, #f9f9f9, #eee); background-image: linear-gradient(top, #eee, #f9f9f9, #eee); padding: 1px 3px; font-family: inherit; font-size: 0.85em}
li{display:inline-block}