Skip to content

Instantly share code, notes, and snippets.

@dijeferson

dijeferson/StyleForKeys.html

Created March 13, 2018 15:31
Show Gist options
  • Save dijeferson/fb5f8678c97397cbabd46d9690317f30 to your computer and use it in GitHub Desktop.
Save dijeferson/fb5f8678c97397cbabd46d9690317f30 to your computer and use it in GitHub Desktop.
Download ZIP
Nice CSS for showing key combinations
Raw
StyleForKeys.html
<html>
<head>
<style>
.kbd {
position: relative;
top: -1px;
color: #333;
font-size: 0.8em;
background-color: #fff;
border: 1px solid #bbb;
border-bottom: 2px solid #999;
border-radius: 4px;
padding: .2rem .4rem;
font-family: courier;
display: inline;
font-weight: bold;
}
.kbd-black {
position: relative;
top: -1px;
color: #eee;
font-size: 0.8em;
background-color: #333;
border: 1px solid #ddd;
border-bottom: 2px solid #999;
border-radius: 4px;
padding: .2rem .4rem;
font-family: courier;
display: inline;
font-weight: bold;
}
</style>
<body>
<p>Teste de teclado</p>
<p>
<div class="kbd">CTRL</div> + <div class="kbd">ALT</div> + <div class="kbd">Del</div>
</p>
<p>
<div class="kbd-black">CTRL</div> + <div class="kbd-black">ALT</div> + <div class="kbd-black">Del</div>
</p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment