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> |
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…