CSS Stil für Keyboard-Tasten

In meinem Blog gebe ich häufig Tastenkombinationen an, um zu beschreiben, wie bestimmte Dinge bedient werden. Um diese Tastaturkürzel mehr herauszuheben, habe ich einen CSS-Stil entworfen. Hier ein Beispiel:

Bitte drücke Strg + Alt + Entf.

Ich finde, dass die Wörter „Strg“ und „Alt“ sowie „Entf“ aussehen, wie richtige Tasten einer Tastatur. 🙂
Den Code dafür möchte ich natürlich niemanden vorenthalten.

HTML-Seite mit Keyboard CSS-Stil

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<html>
	<head>
		<title>Beispiel</title>
		<style type="text/css">
		tt
		{
			padding-top: 1px;
			border-top: 1px solid #CCCCCC;
 
			padding-bottom: 1px;
			border-bottom: 3px solid #888888;
 
			padding-left: 2px;
			border-left: 1px solid #CCCCCC;
 
			padding-right: 2px;
			border-right: 3px solid #888888;
 
			background-color: #EEEEEE;			
		}
		</style>
	</head>
	<body>
		Bitte drücke <tt>Strg</tt> + <tt>Alt</tt> + <tt>Entf</tt>.
	</body>
</html>

Ein Gedanke zu „CSS Stil für Keyboard-Tasten“

  1. Sehr coole Sache. Das ist natürlich nicht nur ein schickes Gimmick für HTML-Designer sondern macht dem Leser das Finden von Textstellen leichter. Wenn ich versuche die Theorie von der Praxis zu trennen, um das Tutorial anzuwenden, ist so etwas Zucker.

    Noch cooler wäre es jetzt die weißen Tasten und grauen Kontrollkeys im CSS zu unterscheiden. Dass wäre jetzt aber ein Gimmick…

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.