Inkline Resolve
Una breve frase editoriale parte da un lettering tracciato con precisione. Al passaggio del cursore, con il focus o con l’attivazione, l’inchiostro caldo avanza da sinistra a destra e trasforma l’enfasi in una variazione controllata della densità tipografica, senza cambiare le parole né il loro ingombro.
Prova l’esperimento
Cos’è Inkline Resolve?
Una singola frase editoriale passa da un contorno nitido a una superficie d’inchiostro decisa. Il riempimento percorre le forme già esistenti, così l’enfasi sembra accumularsi invece di sostituire, ingrandire o spostare il testo.
Come funziona
Il pulsante usa un testo trasparente con un bordo avorio visibile e un livello di sfondo ritagliato sulle lettere. Il passaggio del cursore, il focus da tastiera o lo stato attivo fissato con un clic espandono lo sfondo da zero fino all’intera larghezza del testo, mentre il bordo assume lo stesso colore d’accento.
Dove usarlo
- Principi editoriali interattivi che richiedono enfasi senza modificare l’impaginazione
- Controlli testuali per selezionare una modalità di lettura o una sezione
- Specimen tipografici per brand e campagne che mostrano stati attivi discreti
Accessibilità
L’interazione usa un pulsante nativo con testo visibile, uno stile di focus ben riconoscibile e lo stato aria-pressed per il comportamento fissato al clic. Chi preferisce ridurre il movimento vede lo stesso cambio di stato senza transizione.
Prestazioni
L’effetto è realizzato in CSS e riguarda un solo pulsante. JavaScript si limita ad alternare una classe e l’attributo pressed, senza timer, observer, librerie o risorse esterne.
Il codice
Esplora e copia il codice originale. Nell’anteprima le etichette vengono tradotte, mentre nel sorgente restano quelle originali (di solito inglesi). Per i testi dinamici usa AuroraLabI18n.t(chiave, testoPredefinito).
<main class="stage">
<button class="inkline" type="button" aria-pressed="false" data-ali-i18n="copy_1">Make space</button>
</main>:root{
--stage:#0D0B0F;
--ink:#EEEAE4;
--muted:#A49DAB;
--accent:#F5BA09;
--ink-speed:280ms;
}
*{box-sizing:border-box}
.stage{
min-height:100vh;
width:100%;
display:grid;
place-items:center;
padding:clamp(24px,7vw,72px);
background:var(--stage);
overflow:hidden;
}
.inkline{
appearance:none;
border:0;
padding:0;
margin:0;
max-width:100%;
background-color:transparent;
background-image:linear-gradient(90deg,var(--accent),var(--accent));
background-repeat:no-repeat;
background-position:0 58%;
background-size:0% 72%;
color:transparent;
-webkit-text-fill-color:transparent;
-webkit-background-clip:text;
background-clip:text;
-webkit-text-stroke:clamp(1px,.12vw,2px) var(--ink);
font-family:Georgia,"Times New Roman",serif;
font-size:clamp(3.2rem,10vw,8.5rem);
font-weight:400;
line-height:.92;
letter-spacing:-.065em;
text-align:center;
cursor:pointer;
transition:
background-size var(--ink-speed) cubic-bezier(.2,.75,.2,1),
-webkit-text-stroke-color var(--ink-speed) ease,
letter-spacing var(--ink-speed) cubic-bezier(.2,.75,.2,1);
}
.inkline:hover,
.inkline:focus-visible,
.inkline.is-filled{
background-size:100% 72%;
-webkit-text-stroke-color:var(--accent);
letter-spacing:-.045em;
}
.inkline:focus-visible{
outline:2px solid var(--accent);
outline-offset:10px;
}
.inkline:active{
transform:translateY(1px);
}
@media (max-width:480px){
.inkline{
font-size:clamp(3rem,16vw,4.8rem);
line-height:.98;
}
}
@media (prefers-reduced-motion:reduce){
.inkline{
transition:none;
}
}var inkline = document.querySelector('.inkline');
inkline.addEventListener('click', function () {
var filled = inkline.classList.toggle('is-filled');
inkline.setAttribute('aria-pressed', String(filled));
});