Un clavier en CSS

J'ai récemment découvert la balise <kbd> qui sert à indiquer les saisies clavier opérées par l'utilisateur. L'ancien site de Firefox en avait toutefois restreint l'usage à la figuration visuelle des touches du clavier (keyboard en anglais).

En effet, avec un soupçon de CSS, on obtient une représentation très réaliste des touches du clavier, ce qui peut être très utile lorsqu'on rédige un tutoriel. Voici le code CSS :

kbd {
   padding: 0px 2px 0px 2px;
   border-width: 1px 2px 2px 1px;
   border-style: solid;
   border-color: #edd #baa #baa #eed;
   background: #faf6f6;
   color: #000;
}

Une fois que vous avez ajouté ce code dans votre CSS, il vous suffit, lorsque vous écrivez un article, de mettre le texte de la touche entre les balises <kbd> et </kbd>, comme ceci :

Appuyez sur la touche <kbd>Alt</kbd> puis validez en tapant sur <kbd>Enter</kbd>

ce qui affichera :

Appuyez sur la touche Alt puis validez en tapant sur Enter.

Saute-Mouton - http://realia.free.fr/sautemouton_avril/newsprt.php?lng=fr&pg=1971 - [Version PDF]