L'elemento kbd serve a marcare del testo inserito tramite tastiera. Possiamo formattare questo elemento con i CSS per renderlo simile ad un tasto. Vediamo come fare.
Giocando con il colore alternato dei bordi e usando bordi arrotondati e ombre dei box l'effetto che si ottiene è molto simile all'originale:
kbd {
font: 0.95em Monaco, Courier, monospace;
color: #505050;
border: 1px solid;
border-color: #ddd #999 #999 #ddd;
padding: 0 5px;
background: #f5f5f5;
border-radius: 4px;
box-shadow: 0 0 4px rgba(0,0,0,0.2);
cursor: default;
}
Il font monospaziato non è strettamente necessario, in quanto le tastiere da computer usano spesso un font sans-serif. Osservate attentamente il font usato sui tasti della vostra tastiera per decidere quale famiglia di font usare. Per esempio per la tastiera dell'iMac si potrebbe usare un Lucida Grande o un Helvetica.
Potete visionare l'esempio finale in questa pagina.