Decimal Focus
Un singolo valore finanziario diventa più leggibile grazie a una scansione precisa delle cifre: il passaggio del puntatore evidenzia la parte intera, il separatore e i decimali in sequenza, mentre una linea sottile definisce la baseline.
Interactive preview
What is Decimal Focus?
Un trattamento tipografico per un singolo importo: separatore, decimali e unità mantengono una gerarchia leggibile e una precisione visiva da interfaccia finanziaria.
How it’s built
Il valore è diviso in span semantici. Hover e focus cambiano il colore della parte intera e attenuano i decimali; la baseline usa un gradiente lineare, così l’effetto resta compatto e non altera il flusso del testo.
Ideal for
- Valori di saldo o variazione in interfacce finanziarie
- Importi in ricevute digitali
- Prezzi dentro controlli compatti
- Numeri di riepilogo in strumenti professionali
Accessibility
Il valore è contenuto in un button per rendere l’interazione raggiungibile da tastiera, ha un aria-label completo e conserva contrasto e leggibilità quando l’animazione è disattivata.
Performance
Nessun canvas o aggiornamento continuo: solo transizioni CSS su testo e pseudo-elemento.
Source code
Explore, copy and reuse the original HTML, CSS and JavaScript.
<div class="demo demo-decimal"><button class="decimal-readout" type="button" aria-label="Valore 24.680,50 euro"><span class="decimal-readout__prefix">€</span><span class="decimal-readout__integer">24.680</span><span class="decimal-readout__separator">,</span><span class="decimal-readout__cents">50</span><span class="decimal-readout__unit">EUR</span></button></div>:root{--fin-bg:#eef2f1;--fin-ink:#172321;--fin-muted:#70807b;--fin-line:#aebdb8;--fin-accent:#147c68;--fin-size:clamp(2.1rem,7vw,4.6rem)}*{box-sizing:border-box}.demo-decimal{min-height:100%;display:grid;place-items:center;padding:clamp(1rem,5vw,3rem);background:var(--fin-bg);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.decimal-readout{position:relative;display:flex;align-items:baseline;flex-wrap:wrap;justify-content:center;border:0;background:transparent;color:var(--fin-ink);cursor:pointer;padding:1.4rem .6rem .9rem;font:600 var(--fin-size)/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:-.08em}.decimal-readout:after{content:"";position:absolute;left:0;right:0;bottom:.3rem;height:2px;background:linear-gradient(90deg,var(--fin-accent) 0 34%,var(--fin-line) 34% 100%);transform-origin:left;transition:transform .3s ease}.decimal-readout:hover:after,.decimal-readout:focus-visible:after{transform:scaleX(1.04)}.decimal-readout:focus-visible{outline:2px solid var(--fin-accent);outline-offset:7px}.decimal-readout__prefix{font-size:.48em;margin-right:.18em;color:var(--fin-muted);letter-spacing:0}.decimal-readout__integer,.decimal-readout__separator,.decimal-readout__cents{transition:color .2s ease,opacity .2s ease}.decimal-readout__separator{color:var(--fin-accent);margin:0 .02em}.decimal-readout__cents{font-size:.66em;letter-spacing:-.06em}.decimal-readout__unit{font-size:.22em;letter-spacing:.05em;color:var(--fin-muted);margin-left:.7em}.decimal-readout:hover .decimal-readout__integer{color:var(--fin-accent)}.decimal-readout:hover .decimal-readout__cents{color:var(--fin-ink);opacity:.62}.decimal-readout:active .decimal-readout__integer,.decimal-readout:active .decimal-readout__cents{transform:translateY(1px)}@media(max-width:430px){.decimal-readout{padding-inline:.1rem}.decimal-readout__unit{width:100%;text-align:center;margin:.45rem 0 0;font-size:.23em;letter-spacing:.1em}}@media(prefers-reduced-motion:reduce){.decimal-readout:after,.decimal-readout__integer,.decimal-readout__cents{transition:none}}const readout=document.querySelector('.decimal-readout');readout.addEventListener('click',()=>{readout.classList.add('is-read');setTimeout(()=>readout.classList.remove('is-read'),700)});