Gabriel-Rambault.fr

Sommaire

Créer les touches du clavier

Bouton commande :

Je veux obtenir ce bouton : A qui s'enfonce quand la souris le survole.

Commençons en écrivant : <p class="bttext">A</p>

Bien entendu, tant que je n'ai pas créé les classes css, à l'affichage, nous obtenons simplement la lettre A

Pour un bouton à l'intérieur d'un texte, nous écrivons dans le fichier php :

<span class="bttext">A</span>

Et en complément, nous avons besoin des 2 classes suivantes dans le fichier css :

.bttext
{
display: inline-block; /*les touches seront des blocs mis sur une même ligne. */
width: 20px; /*largeur de base d'une touche */
height: 20px; /*hauteur de base d'une touche*/
color: #fff; /*couleur du texte en blanc*/
font-family: "Consolas,"DejaVu Sans Mono", "Lucida Console", monospace"; /*choix d'une police de largeur fixe*/
background-color: #8b4513; /*couleur du fond*/
border-top: #f4a460 0.183em solid; /*couleur du bord supérieur*/
border-right: #000 0.25em solid; /*couleur du bord droit*/
border-bottom: #000 0.25em solid; /*couleur du bord inférieur*/
border-left: #f4a460 0.25em solid; /*couleur du bord gauche*/
padding: 0.125em 1.4em 1.125em 0.3125em; /*positionnement de la lettre*/
vertical-align:80%;/*positionnement vertical de la lettre, par rapport à la ligne de base.*/
}

2 - Résultat : A

a:hover .bttext
{
color: #000; /*couleur du texte en noir*/
/*on inverse ensuite les couleurs des bordures*/
border-top: #000 0.25em solid;
border-right: #f4a460 0.25em solid;
border-bottom: #f4a460 0.25em solid;
border-left: #000 0.25em solid;
}

Le résultat se retrouve dans le cadre 2 ci-dessus à droite.

Traitons les touches caractères en séries.

Dans le fichier php, nous écrivons :

<?php
$lettres=array('A','Z','R','T','Y','U','I','O','P');
echo '<p><span class="gras">Ligne 1</span>';
foreach($lettres1 as $value) { echo '<span class="bttext">'.$value.'</span>';}
echo '</p>';
?>

Voilà ce que nous obtenons :

Ligne 1 : AZRTYUIOPEch

Ici, j'ai un petit problème : en fonction de la police de caractères choisie, le bouton "I" va être moins large.
Pour le résoudre, je dois utiliser une police de caractères dite à chasse fixe (tous les caractères occupent la même largeur).
Dans mon cas, ou plus exactement sur mon ordinateur, j'ai trouvé la police "DejaVu Sans Mono".

Je vous mets donc les 2 exemples de lignes pour vous montrer :

UIO police "DejaVu Sans Mono"

UIO police Helvetica

En modifiant, nous aurons pour les lignes 2, 3 et 4 :

Ligne 2 : QSDFGHJKLM
 
Ligne 3 : WXCVBN
 
Ligne 4 : CtrlFnAltAltgrBarre Espace

Observation :

Pour les touches ci-dessus, j'ai appliqué à toutes la même formule, et de ce fait les dimensions varient et ne sont pas très logiques. Elles vont être reprises une par une, pour reconstituer un clavier aussi proche que possible de la réalité.

1ère touche particulière :

Pour la touche E, nous avons 2 caractères : E et €

J'ai utilisé la classe ".bttext" et une nouvelle classe spécifique ".ver" qui apporte quelques corrections à la classe ".bttext" pour tenir compte du 2ème caractère :

.ver
{
width: 15px; /*corrige la largeur de la touche*/
line-height: 1.3em; /*corrige la hauteur de ligne, pour pouvoir en mettre 2 dans la touche*/
vertical-align: -20%;/*ici le positionnement vertical de l'ensemble.*/
}

Résultat pour cette touche E
   €
que nous écrivons comme ceci dans le fichier php :

<span class="bttext ver">E<br />&nbsp;&nbsp;&nbsp;€</span>.

Vous allez trouver que cette formule est compliquée pour une seule touche, la touche E !
Consolez-vous, je vais vous donner un truc pour simplifier la saisie.
Je vais simplement créer une valeur constante, comme ceci :

define ('TCHAE','<span class="bttext ver">E<br />&nbsp;&nbsp;&nbsp;€</span>');

Cette ligne de code, je vais la placer :
- soit en début de cette page, entre des balises <?php et ... ?>.
- soit dans mon fichier outils/tutos.php (comme son nom l'indique c'est une boîte à outils)
Attention pas dans les 2, sinon il y a un message d'erreur !
Je n'ai plus qu'à écrire :

<?php echo TCHAE ; ?>

Et voilà le résultat : E
   €

Moyen mnémotechnique pour mémoriser :
TCH pour touche
A pour Alphabétique
N pour Numérique
suivis de la lettre, chiffre ou signe concerné.

Suivant