CSS raccourcis clavier

  Snippets   -   05/08/2015


Cette bibliothèque CSS va vous aider à afficher des raccourcis clavier. Elle est légère et très rapide à exécuter.


Démonstration

Ctrl + Alt + Suppr
Code associé

<kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>Suppr</kbd>


Intégrer la bibliothèque à votre site

L'utilisation de la bibliothèque a été simplifié au maximum. Il vous suffit d'intégrer la bibliothèque sur votre site.


Solution 1 : Facile et rapide, ajouter simplement le lien vers notre CDN

<link rel="stylesheet" href="https://cdn.online-free-tools.com/css/oft-kbd.min.css" type="text/css" />


Solution 2 : Télécharger la bibliothèque et l'appeler sur votre site



Il vous suffit d'ajouter cette ligne et de paramétrer le chemin d'accès au fichier css. Il est préférable de l'ajouter après les appels à d'autres fichier CSS. Cela évitera que les paramètres soient écrasés.


<link rel="stylesheet" href="/css/oft_kbd.min.css" type="text/css" />


Changer la taille d'affichage des touches

Il est possible de changer la taille des touches en appliquant les class kbd-sd, kbd-md et kbd-lg.

Ctrl
<kbd>Ctrl</kbd>
Ctrl
<kbd class="oft-kbd-sd">Ctrl</kbd>
Ctrl
<kbd class="oft-kbd-md">Ctrl</kbd>
Ctrl
<kbd class="oft-kbd-lg">Ctrl</kbd>
Utiliser une autre police de caractère

Si vous souhaitez utiliser une police de caractère (font) particulière sur les balise, il vous suffit placer ce code CSS après l'appel à la bibliothèque (ou directement à la fin du fichier CSS) :
kbd{
	font-family: 'Inconsolata', monospace;
}
Dans cette exemple on utilise la font Inconsolata, disponible sur Google Font, que l'on aurait appelé au préalable avec :
<link href='https://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>


Tags :  
CSS
  


Autodidacte passionné par le web, je suis toujours à la recherche de nouveaux challenges.
Fondateur de Online-Free-Tools.com.



  Commentaires


Pas de commentaire

Ajouter un commentaire




 FR     EN  

Copyright 2021 -   Contact us - 28/11/2021 18:47:08