Trop cool : un développeur web recrée un clavier mécanique en CSS

"Tout c'que j'aime c'est manger des cartes graphiques, des clés USB. Un clavier mécanique TA TA."

Un développeur a reproduit un clavier mécanique en CSS, et le rendu est franchement bluffant !

Yoav Kadosh, un développeur web israélien, a partagé la semaine dernière l'un de ses sides projects, hébergé sur la plateforme de présentation d'extraits de code CodePen.

Le développeur, qui s'avère également être salarié chez Microsoft, a mis au point un clavier numérique mécanique en 3D en utilisant une combinaison de techniques CSS, incluant des transformations, des dégradés (gradients), des ombres (box-shadow, text-shadow), des filtres et 2-3 autres astuces.

Les touches de ce numpad virtuel s'actionnent quant à elles à la saisie de leur équivalent sur votre propre clavier.

Après avoir partagé son projet sur Twitter, et à la demande de nombreux utilisateurs du réseau social, Yoav s'est empressé d'ajouter à sa création le bruit satisfaisant (ou énervant, au choix) des touches d'un clavier mécanique, qui se déclenche à chaque activation des touches.

La développeuse turque Roaa Khaddam s'est de son côté approprié le projet pour en faire un remake sous Flutter, en proposant en complément un basculement de la vue du clavier afin de le voir de face. Son clavier 3D est accessible sur la plateforme DartPad.

Découvrir le clavier mécanique en CSS de Yoav Kadosh sur CodePen

À lire aussi sur Les Joies du Code :

• 🔥 J’ai testé : le premier clavier mécanique pour développeurs de Logitech
• 🏰 Stylé : ce château fort responsive adapte sa structure à la taille de votre écran
• 🤬 Insolite : cette police de caractères censure automatiquement les insultes et jurons