Ajouter du style à vos raccourcirs clavier en CSS

Voici une petite astuce CSS qui vous permettra de mettre en évidence vos raccourcis clavier lorsque vous faites un tutoriel par exemple.

On va donc commencer par le code HTML. On va créer un paragraphe qui contiendra les raccourcis clavier. Pour les raccourcis on va utiliser une balise peu connue, <kbd>. Ainsi pas besoin de créer un span, on pourra styliser la balise « kbd » en général.

Quelques raccourcis : <kbd>Ctrl</kbd>+<kbd>C</kbd> &gt; Copier <kbd>Ctrl</kbd>+<kbd>V</kbd> &gt; Coller ...

Maintenant qu’on a ça on va ajouter du CSS afin de créer un effet de touche de clavier. Pour cela on va jouer avec les bordures. En gros, la touche de clavier seras représentée par un rectangle avec un bord haut et gauche fin alors que les bords bas et droit seront plus épais pour donner un effet de relief. Si vous voulez vous pouvez même changer les couleurs afin de donner un effet encore plus réel.

kbd {
/* Des marges internes pour augmenter la taille */
 padding-top: 0; /* Pour les marges supérieure et inférieures elles ne sont pas nécéssaires sinon vous aurez un bloc plus gros que votre texte autour. */
 padding-bottom: 0;
 padding-left: 2px; /* Les marges latérales sont nécessaires pour que le texte intérieur ne soit pas collé aux bordures. */
 padding-right: 2px;
/* Les bordures */
 border-top: 1px solid #E1E1E1;
 border-left: 1px solid #E1E1E1;
 border-bottom: 2px solid #B1B1B1;
 border-right: 2px solid #B1B1B1;
/* Un fond pour la touche du clavier */
 background: #EBEBEB;
/* La couleur du texte dans le raccourci */
 color: #000;
}

Voilà, maintenant lorsque vous voulez ajouter un raccourci clavier dans vos tutoriaux il suffit de les entourer de la balise <kbd>.

Voir un exemple