Accueil » Tutoriaux » Css » Les balises KBD

Les balises KBD

Une petite astuce, pour illustrer facilement une touche du clavier, ou mettre du texte en évidence, grâce aux CSS, hé oui, encore ces fameuses CSS! :)

Autant l'annoncer toute suite, ce tutoriel va être court, très court! ;)

Dans votre fichier css, ou entre les balises <style> de votre document, placez ce bout de code :

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

Maintenant, vous pouvez, dans votre contenu, écrire le code :

Nous nous retrouvons donc avec cette petite chose là : T

C'est pas spécialement magnifique, certes, mais ça a le mérite d'être efficace, par exemple pour écrire un tutoriel... "Appuyez ensuite sur la touche C de votre clavier ..."

Sympathique, non? :)

Voilà, c'était aussi simple que cela, personnalisez vos touches pour votre site... amusez vous bien! ;)

Le 12/06/2006 par Legibe

Partager ce tutoriel :

Vous avez aimé ce tutoriel ?

Faites un don pour nous encourager à en écrire d'autres! :-)

Commentaires :

CSS, balises html <kbd>, Touches

Si vous avez remarqué une erreur (une faute ou tout autre type de problème que nous puissions corriger), n'hésitez pas à nous écrire!
Soyez aussi précis que possible et n'oubliez pas de nous indiquer le tutoriel dans lequel l'erreur se trouve. Merci!! :)

NoShade est un site de tutoriaux en graphisme (Photoshop, Illustrator, Cinema 4D, Flash, Blender, The GIMP, PAO), code (XHTML/CSS, PHP/MySQL) et en Photographie. En prime, quelques interviews d'infographistes de talent.