Un clavier Apple interactif en CSS3

17 août 2011

Après la télévision, place au clavier Apple signé Dustin Cartwright ! Cette fois-ci, le résultat est en plus interactif : tapez du texte pour voir les touches s’enfoncer comme sur un véritable clavier.

Un clavier en CSS3

Le clavier de la firme à la pomme est plutôt bien réussi, surtout quand on sait qu’il est réalisé avec un peu de HTML et une simple feuille de style. Seulement deux propriétés CSS3 ont été utilisées. Il s’agit de :

  • Border Radius pour arrondir les coins du clavier et des touches.
  • Box Shadow pour générer une ombre portée intérieure (avec « inset ») qui donne un effet de relief sur le clavier et les touches.
    box-shadow:  
    	inset 0 0 8px #bbb,
    	0 1px 0 #aaa,
    	0 4px 0 #bbb,
    	0 10px 30px #ddd;
    

Un petit regret tout de même : le fond du clavier avec le dégradé est en fait une simple image. Dommage, car cela aurait pu être très bien géré avec la propriété CSS3 « gradient ». Sans doute que l’auteur n’a pas utilisé de dégradé CSS pour assurer la compatibilité avec Internet Explorer 9 qui ne supporte pas « gradient », et dans une moindre mesure Opera qui ne comprend cette propriété que depuis la version 11.10 avec le syntaxe « -o-gradient ».

Un clavier interactif

Le clavier fonctionne ! Cliquez sur la feuille de papier et vous pourrez vous amuser à taper quelques lettres. Pour rendre le clavier interactif, un bout de code JavaScript a été utilisé. Il récupère la touche avec la fonction « keydown() » de jQuery, lui ajoute une classe CSS avec « addClass() » et inversement lorsque la touche est relachée. Le changement de classe CSS permet de simuler l’enfoncement d’une touche.

$(window).keydown(function(e) {
    key = (e.keyCode) ? e.keyCode : e.which;
    $('.key.c' + key).addClass('keydown');
    console.log(key);
});

$(window).keyup(function(e) {
    key = (e.keyCode) ? e.keyCode : e.which;
    $('.key.c' + key).removeClass('keydown');
});

Un travail original qui peut donner des idées à ceux qui souhaitent développer une application interactive avec du CSS3 et un peu JavaScript.

Requis : navigateur compatible CSS3
Démonstration : http://dl.dropbox.com/u/921159/Keyboard/page.html
Licence : libre

Commentaires

  • Wez

    Vraiment super , la preuve que le CSS3 prend une grande ampleur encore super article merci :)

  • Micka05

    Bientôt, plus besoin d’images ! Bon article, merci ;)