Styles für Tasten in Onlinedokumentation

Im normalen Fließtext ist es meistens am besten, die Namen von Tasten nicht besonders auffällig zu gestalten, denn dort sollten die Tasten nicht die größte Aufmerksamkeit auf sich ziehen. Anders ist es jedoch z. B. in einer Referenz speziell mit Tastenkürzeln oder in einem Dokument, das optisch besonders attraktiv gestaltet werden soll. Hier können Sie mit CSS ein Design umsetzen, das die Tasten beinahe wie echte Tasten aussehen lässt.

Beispiel 1

Press Ctrl + S to save the file.

Implementierung zu Beispiel 1

Schritt 1: Ergänzen Sie folgenden CSS-Code in der von Ihrer Onlinedokumentation verwendeten CSS-Datei oder im Head-Abschnitt Ihrer Seitenvorlage:


span.f_xx_kbd {
  background-color: #eee;
  color: #333;
  display: inline-block;
  line-height: 1;
  border-radius: 3px;
  border: 1px solid #b4b4b4;
  box-shadow: 0 1px 1px rgba(0,0,0,0.2), 0 2px 0 0 rgba(255,255,255,0.7) inset;
  padding: 2px 5px;
  white-space: nowrap;
}

Schritt 2: Packen Sie den als Taste auszuzeichnenden Text im HTML-Code in ein SPAN-Element der Klasse keyboard-key.

Im Normalfall geschieht dies automatisch, wenn Sie in Ihrem Redaktionssystem ein gleichlautendes Zeichenformat anlegen und dem betreffenden Text dann dieses Zeichenformat zuweisen. Allerdings benennen manche Redaktionssysteme die Formate intern um. Sollte es nicht wie gewünscht funktionieren, müssen Sie sich einmal den erzeugten HTML-Code ansehen und erforderlichenfalls den Namen der Klasse im CSS-Code entsprechend angleichen.

Heißt die Klasse im CSS-Code wie in unserem Beispiel keyboard-key, muss nach dem Generieren der Onlinedokumentation das Ergebnis im vom Redaktionssystem erzeugten HTML-Code schließlich wie folgt aussehen:


<p>Press <span class="keyboard-key">Ctrl></span> + <span class="keyboard-key">S</span> to save the file.</p>

Anmerkung: Eigentlich sieht HTML zur Auszeichnung von Tasten das Element <kbd> vor. Die meisten Redaktionssysteme für Technische Dokumentation unterstützten dieses Element jedoch nicht, weshalb nur der beschriebene Weg über das SPAN-Element verbleibt.

Beispiel 2

Noch etwas plastischer und auffälliger wirken die Tasten in der folgenden Lösung, basierend auf KEYS.css.

Press Ctrl + S to save the file.

Implementierung zu Beispiel 2

Das generelle Vorgehen ist identisch mit dem von Beispiel 1. Verwenden Sie stattdessen lediglich folgende CSS-Codes.

CSS-Code für die helle Variante:


span.keyboard-key {
  display: inline;
  display: inline-block;
  min-width: 1em;
  padding: .2em .3em;
  text-align: center;
  text-decoration: none;
  border-radius: .3em;
  border: none;
  cursor: default;
  user-select: none;
  background: rgb(250,250,250);
  background: -moz-linear-gradient(top, rgb(210,210,210), rgb(255,255,255));
  background: -webkit-gradient(linear, left top, left bottom, from(rgb(210,210,210)), to(rgb(255,255,255)));
  color:  rgb(50,50,50);
  text-shadow: 0 0 2px rgb(255,255,255);
  box-shadow: inset 0 0 1px rgb(255,255,255), inset 0 0 .4em rgb(200,200,200), 0 .1em 0 rgb(130,130,130), 0 .11em 0 rgba(0,0,0,.4), 0 .1em .11em rgba(0,0,0,.9);
}

CSS-Code für die dunkle Variante:


span.keyboard-key {
  display: inline;
  display: inline-block;
  min-width: 1em;
  padding: .2em .3em;
  text-align: center;
  text-decoration: none;
  border-radius: .3em;
  border: none;
  cursor: default;
  user-select: none;
  background: rgb(80,80,80);
  background: -moz-linear-gradient(top, rgb(60,60,60), rgb(80,80,80));
  background: -webkit-gradient(linear, left top, left bottom, from(rgb(60,60,60)), to(rgb(80,80,80)));
  color: rgb(250,250,250);
  text-shadow: -1px -1px 0 rgb(70,70,70);
  box-shadow: inset 0 0 1px rgb(150,150,150), inset 0 -.05em .4em rgb(80,80,80), 0 .1em 0 rgb(30,30,30), 0 .1em .1em rgba(0,0,0,.3);
}

Beispiel 3

Abschließend noch eine weitere Alternative mit einem leichten Schatten:

Press Ctrl + S to save the file.

Implementierung zu Beispiel 3

Das generelle Vorgehen ist auch hier wieder identisch mit dem von Beispiel 1. Verwenden Sie in diesem Fall folgenden CSS-Code:


span.keyboard-key {
  box-sizing: border-box;
  width: auto;
  height: auto;
  padding: 4px 10px;
  margin: 4px 4px;
  border-radius: 6px;
  background: linear-gradient(180deg, #282828,#202020);
  box-shadow: inset -6px 0 6px rgba(0,0,0,0.15),
    inset 0-8px 8px rgba(0,0,0,0.25),
    0 0 0 2px rgba(0,0,0,0.75),
    5px 5px 10px rgba(0,0,0,0.4);
  overflow: hidden;
  color: #fff;
}