Cómo Utilizar La Etiqueta «kbd» Para Mostrar Entradas De Teclado

Hoy enseñaremos a usar la etiqueta <kbd> para decorar nuestros textos en html. Se utiliza generalmente para representar entradas de teclado pero también puede usarse con comandos de voz o cualquier otro medio. Funciona principalmente con HTML y se decora con CSS. Aquí tienes una demostración del resultado que nos brinda este atributo tan poco conocido.

Presiona Alt + 0151 para escribir un guión largo

Pues bien, para ingresar los estilos CSS de este atributo, nos dirigimos a la parte de Tema > Editar HTML de nuestra plantilla y buscamos la etiqueta </head> con ayuda del buscador del editor. Se activa con Ctrl + F y se ve así:

Una vez localizada, pegaremos el código del estilo que queramos justo encima de la etiqueta anteriormente mencionada. También es posible utilizar varios estilos sin necesidad de ir sobrescribiendo los anteriores. A continuación te dejo todos los diseños que he recopilado con su respectivo ejemplo de como quedaría una vez pegado en tu plantilla. Elige el que más te guste y copia el código correspondiente.

<style>
kbd {
  font-family: Monospace;
  padding: 2px 5px;
  background: #eee;
  border: 3px solid #bbb;
  border-top-width: 1px;
  border-bottom: 3px solid #777;
}
</style>

Para escribir un guión largo presiona Alt + 0151

<style>
kbd {
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 0.1em 0.5em;
  margin: 0 0.2em;
  box-shadow: 0 2px 0px rgba(0, 0, 0, 0.2), 0 0 0 2px #fff inset;
  background-color: #none; /* Color del subrayado del texto */
}
</style>

Para escribir un guión largo presiona Alt + 0151

<style>
kbd {
  margin: 0px 0.1em;
  padding: 2px 4px;
  border-radius: 3px;
  border: 1px solid #b4b4b4;
  color: #333;
  line-height: 1;
  font-family: consolas,"Liberation Mono", courier, monospace;
  font-size: 0.85em;
  font-weight: 700;
  display: inline-block;
  white-space: nowrap;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2), inset 0px 2px 0px 0px rgba(255, 255, 255, 0.7);
  background-color: #eee;
  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 2 0 0px rgba(255, 255, 255, 0.7) inset;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 2 0 0px rgba(255, 255, 255, 0.7) inset;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
}
</style>

Para escribir un guión largo presiona Alt + 0151

<style>
kbd {
  white-space: nowrap;
  border: 1px solid #ccc;
  font-size: 13px;
  border-radius: 3px;
  padding: 0 3px;
  background: #eee;
}
</style>

Para escribir un guión largo presiona Alt + 0151

<style>
kbd {
    background: #c7c9d3;
    padding: 1px 4px 2px;
    margin: 0 1px;
    border-radius: 4px;
    font-family: monospace;
    line-height: 1.5;
}
</style>

Para escribir un guión largo presiona Alt + 0151

AVISO: Recuerda que para añadir más de un estilo deben de estar dentro de la misma etiqueta <style> ..... </style> o en otra por separado, pero obligatoriamente debes asignarle otro nombre distinto al valor kbd { para cada uno de los estilos que insertes, o de lo contrario, no funcionará.

De este modo, para añadir más estilos correctamente a nuestra plantilla, quedaría algo parecido a esto:

<style>

kbd {
  font-family: Monospace;
  padding: 2px 6px;
  background: #eee;
  border: 3px solid #bbb;
  border-top-width: 1px;
  border-bottom: 3px solid #777;
}

kbd2 {
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 0.1em 0.5em;
  margin: 0 0.2em;
  box-shadow: 0 2px 0px rgba(0, 0, 0, 0.2), 0 0 0 2px #fff inset;
  background-color: #none;
}

</style>

Dejaré también un par de enlaces extra a la plataforma de GitHub para que les eches un vistazo. Con el primero accederás a una librería CSS dedicada para incluir más estilos a la etiqueta <kbd> y con el segundo, puedes mostrar tu apoyo al creador con una donación.

Watch   Support