Neu Calculator
Une calculatrice neumorphique de 260 × 372 px qui calcule vraiment : écran en creux, 19 touches en relief qui s'enfoncent au clic, touche = en dégradé violet ; enchaînement des opérations, %, ±, division par zéro affichée « Err », résultats arrondis à 12 chiffres — et plusieurs calculatrices indépendantes sur une même page.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Glassmorphism comprend 47 effets, dont 6 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Tout le relief vient de deux ombres sur une seule teinte. Le boîtier .neu-calc (260 × 372 px, padding: 20px, border-radius: 24px) est peint en #e0e5ec et porte #b8bec7 10px 10px 20px en bas à droite et #fff -10px -10px 20px en haut à gauche : la lumière vient du coin supérieur gauche. L'écran .neu-calc-display (220 × 56 px, rayon 14 px) prend les mêmes ombres en inset à 4 px — il est creusé dans le boîtier — et aligne le chiffre à droite en 24 px gras, #374151. La grille .neu-calc-grid range 19 <button> sur 4 colonnes (47,5 × 44 px, écart 10 px, rayon 12 px), le 0 occupe deux colonnes. Chaque touche est en relief (4px 4px 8px) et passe en creux au :active (inset 2px 2px 4px), avec transition: .15s : mesuré dans Chromium, Firefox et WebKit, l'ombre calculée sous le doigt est bien l'ombre inversée. Les opérateurs sont en violet #8b5cf6, la touche = en dégradé 135deg #8b5cf6 → #a78bfa avec un halo violet de 12 px.
Le JavaScript (une IIFE, rien de global) crée une instance par .neu-calc trouvée dans la page et écoute les clics sur le boîtier ; chaque touche porte sa valeur dans data-key. Les opérations s'enchaînent de gauche à droite, comme sur une calculette de caisse : 12 + 30 × 2 = donne 84 (et non 72, il n'y a pas de priorité des opérateurs). % divise la valeur affichée par 100 : 200 % → 2, donc 12,5 × 80 % = 10 ; mais 12,5 − 20 % = 12,3 (la touche ne calcule pas « 20 % de 12,5 »). ± change le signe, C remet tout à zéro, un second point est ignoré. 5 ÷ 0 = affiche Err ; ensuite, seuls un chiffre ou C sont pris en compte. Les résultats sont arrondis à 12 chiffres significatifs (0,1 + 0,2 affiche 0.3) et passent en notation 1.42857143e-3 au-delà de 15 caractères ; la saisie s'arrête à 14 chiffres, ce que l'écran affiche sans déborder même avec le signe moins (mesuré dans les trois moteurs : 9 px de marge pour − et 14 chiffres ; 16 chiffres déborderaient de 10 px). Le séparateur décimal est le point.
Quatre décisions, chacune vérifiée par une mesure. Le fond : posée sur un cadre noir, l'ombre claire #fff de la calculatrice deviendrait un halo (19,8:1 contre le noir, 1,3:1 sur sa propre surface) ; le cadre .demo-preview déclare donc la même surface #e0e5ec et 32 px de marge verticale, sans rien imposer à body. Une instance par boîtier : pas de fonction globale appelée par onclick, pas d'écran cherché par id — avec ces deux raccourcis, deux copies dans une page se mélangent (4 et 2 tapés sur la seconde écrivent « 42 » dans la première) ; le script est aussi compatible avec une politique de sécurité qui interdit les scripts en ligne. Les décimales : les résultats sont arrondis, sinon 0,1 + 0,2 afficherait 0.30000000000000004, et la saisie est limitée pour que le 16e chiffre ne sorte pas de l'écran. Après une division par zéro, seule une nouvelle saisie est acceptée, pour ne jamais afficher NaN. Les touches portent type="button" : placées dans un formulaire, elles ne l'envoient pas (vérifié).
Accessibilité
- Clavier : les 19 touches sont de vrais
<button>. Mesuré dans les trois moteurs, Tab les parcourt dans l'ordre de lecture (C en premier), Entrée et Espace les activent (7 deux fois → « 77 »), et l'anneau de focus du navigateur reste visible (outline: auto). En revanche, les touches du clavier physique (chiffres, +, Entrée) ne sont pas écoutées : pour une borne ou une balance tactile, c'est sans objet ; sur un site, ajoutez unkeydownqui appelle le même clic sur[data-key]. - Lecteurs d'écran : l'écran est un simple
div; ses changements ne sont pas annoncés. Ajoutezrole="status"(ouaria-live="polite") sur.neu-calc-displaypour que le résultat soit lu après =. Les touches ±, ×, ÷ et − sont lues par leur symbole, différemment selon les lecteurs : unaria-label(« plus ou moins », « multiplier », « diviser », « moins ») lève l'ambiguïté. - Contraste : le chiffre de l'écran
#374151sur#e0e5ecmesure 8,1:1. Les chiffres des touches#6b7280(14,4 px, graisse 600) ne mesurent que 3,8:1 et les opérateurs#8b5cf63,3:1, sous le seuil de 4,5:1 du texte courant ; le blanc de la touche = descend à 2,7:1 sur le bout clair du dégradé#a78bfa(4,2:1 sur#8b5cf6). Assombrissez les chiffres en#4b5563(6,0:1) et les opérateurs en#6d28d9(5,6:1) si la calculatrice sert à des achats. Le relief lui-même est peu contrasté par nature (ombre sombre 1,5:1, ombre claire 1,3:1 sur la surface) : la forme des touches ne doit pas être la seule indication — ici le symbole l'est. - Mouvement : seule l'ombre change, en 0,15 s, et uniquement pendant l'appui. Aucun déplacement, aucune animation continue :
prefers-reduced-motionn'a rien à couper.
Compatibilité navigateur
CSS : box-shadow doubles et inset, grille CSS, linear-gradient, :active. JavaScript : querySelectorAll().forEach, closest(), toPrecision() — aucune bibliothèque, aucune ressource externe. Testé collé dans une page vierge dans Chromium 151, Firefox 153 et le WebKit 26.5 de Playwright : mêmes résultats aux mêmes calculs (84, 2, Err, 0.3, 1.42857143e-3), même ombre au :active, deux calculatrices indépendantes. La police demandée est Inter : si elle n'est pas chargée sur votre page, le navigateur prend sa police sans empattement par défaut, et la largeur des chiffres varie un peu (14 chiffres et le signe tiennent dans l'écran avec la police par défaut de Chromium, de Firefox et de WebKit, mesuré).
Sans JavaScript, la calculatrice s'affiche entière (écran à 0, touches en relief qui s'enfoncent) mais ne calcule pas. NodeList.forEach manque avant Chrome 51, Firefox 50 et Safari 10 : remplacez-le par Array.prototype.forEach.call si vous visez ces versions. Sur iOS, Safari n'applique :active au toucher que si un écouteur touchstart existe sur la page (comportement documenté par Apple, non mesuré ici) : document.addEventListener('touchstart', function () {}, { passive: true }) suffit pour voir les touches s'enfoncer sous le doigt ; le calcul, lui, fonctionne dans tous les cas.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec Premium) :
<div class="demo-preview">
<div class="neu-calc-scene">
<div class="neu-calc">
<div class="neu-calc-display">0</div>
<div class="neu-calc-grid">
<button type="button" class="neu-calc-key neu-calc-key--op" data-key="C">C</button>
…
<button type="button" class="neu-calc-key" data-key="7">7</button>
…
<button type="button" class="neu-calc-key neu-calc-key--eq" data-key="=">=</button>
</div>
</div>
</div>
</div>Le code complet HTML + CSS + JS de Neu Calculator, prêt à coller — et les 840 effets. Ou 299 € TTC une fois, accès à vie.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Teinte de la surface (CSS — background: #e0e5ec sur .neu-calc, l'écran, les touches et .demo-preview) |
#e0e5ec (gris bleuté) | Changez-la partout à la fois : le neumorphisme ne fonctionne que si le fond et la surface ont la même teinte. Recalculez alors les deux ombres : une plus sombre d'environ 15 % (#b8bec7 ici) et une plus claire (#fff). Sur un fond d'une autre teinte, l'ombre claire devient un halo. |
Profondeur du relief (CSS — box-shadow de .neu-calc et .neu-calc-key) |
boîtier 10 px / flou 20 px · touches 4 px / 8 px | Gardez un flou double du décalage. Au-delà de 6 px sur les touches, les ombres de deux touches voisines se chevauchent dans l'écart de 10 px. |
Taille des touches (CSS — .neu-calc-key { height: 44px }, .neu-calc-grid { gap: 10px }, .neu-calc { width: 260px }) |
47,5 × 44 px, écart 10 px | La largeur suit celle du boîtier (4 colonnes). 300 px de large donnent des touches de 57,5 px (61 px avec un padding de 16 px et un écart de 8 px, comme dans la scène de l'atelier). 38 px de haut et 8 px d'écart ramènent le boîtier de 372 à 334 px. |
Couleur des opérateurs et de = (CSS — .neu-calc-key--op { color }, .neu-calc-key--eq { background }) |
#8b5cf6 et dégradé #8b5cf6 → #a78bfa | Une seule couleur d'accent suffit. Pour la lisibilité, visez 4,5:1 sur #e0e5ec : #6d28d9 donne 5,6:1, le violet d'origine 3,3:1. |
Ajouter ou renommer une touche (HTML — data-key) |
C, ±, %, ÷, ×, -, +, =, ., 0-9 | Le texte du bouton est libre (« AC », « − »), seule la valeur de data-key compte pour le calcul. Le moins s'écrit data-key="-", même si la touche affiche « − ». |
Longueur de saisie (JS — cur.replace("-", "").length >= 14 ; résultats : cur.length > 15) |
14 chiffres saisis, 15 caractères affichés | Adaptez-les à la largeur de l'écran : environ 13,4 px par chiffre à 24 px. Avec un écran plus étroit (scène de la balance, 202 px) ou une police plus large, baissez les deux limites ensemble. |
FAQ
.neu-calc présent au chargement : chacune a son écran et ses calculs (mesuré avec deux copies — 42 tapé sur la seconde, la première reste à 0). Il n'y a ni id ni fonction globale. Pour une calculatrice ajoutée après le chargement (fenêtre modale), relancez le bloc d'initialisation sur ce nouvel élément.
