Il neumorfismo è l'aspetto in cui un pulsante o una scheda sembra essere premuto fuori dalla pagina stessa, come una forma modellata dalla plastica morbida Non c'è bordo, nessun colore di riempimento che differisce dallo sfondo, solo un chiaro punto culminante da un lato e un'ombra morbida dall'altro Fotografa magnificamente nei modelli di design In un'interfaccia reale è facile sbagliare in due modi: l'effetto scompare, o i controlli diventano difficili da vedere.
Entrambi i problemi si riducono a una piccola quantità di aritmetica sui colori e le ombre Questa guida spiega come l'effetto dell'interfaccia utente morbida è costruito da due box-shadow strati, come le tonalità chiare e scure sono derivate da un colore di superficie, cosa cambiano le forme piatte, concave, convesse e pressate e come mantenere utilizzabile un'interfaccia neumorfica secondo le regole di contrasto WCAG. Il Generatore di neumorfismo CSS produce tutto il codice sottostante con un'anteprima dal vivo.
tl; dr: Un elemento neumorfico ha lo stesso colore di sfondo della pagina e due ombre-scatola: uno più scuro sfalsato verso il basso e verso destra, e uno più chiaro sfalsato verso l'alto e verso sinistra Utilizzando la parola chiave inserita su entrambi fa sembrare l'elemento premuto Il generatore di neumorfismi CSS deriva entrambi i colori delle ombre dal colore della superficie, con cursori per distanza (da 2 a 50 px), sfocatura (da 0 a 100 px), intensità (da 2 a 40%) e raggio (da 0 a 80 px), più forme piatte, concave, convesse e pressate La superficie chiara predefinita dà
box-shadow: 12px 12px 24px #bababa, -12px -12px 24px #ffffff. Quelle ombre raggiungono solo circa 1,5:1 di contrasto contro la superficie, ben sotto il 3:1 WCAG chiede sui confini di controllo, quindi gli elementi interattivi hanno bisogno di un bordo visibile o stato di messa a fuoco È lato client, gratuito, nessuna registrazione.
Cos'è il neumorfismo nella progettazione dell'interfaccia utente?
Il neumorfismo, chiamato anche soft UI, è uno stile visivo in cui gli elementi dell'interfaccia appaiono estrusi o pressati nel loro sfondo utilizzando ombre chiare e scure accoppiate invece di bordi o riempimenti contrastanti Il nome fonde & quot;new" e & quot; skeuomorphism" lo stile più antico che imitava i materiali fisici Il neumorfismo imita un materiale, un'unica superficie continua e si basa su una sorgente luminosa immaginata in alto a sinistra.
Lo stile è diventato popolare sui siti di vetrine di design intorno al 2020. ben si adatta a pannelli decorativi, cruscotti visualizzati su buoni schermi e grafica unica per eroi. È poco adatto alle forme dense, a qualsiasi cosa utilizzata all'aperto e a qualsiasi controllo che un utente deve trovare rapidamente, per ragioni trattate nella sezione accessibilità.
Come funziona l'effetto neumorfico nei CSS?
L'effetto ha bisogno di tre cose: un colore di sfondo sull'elemento che corrisponde alla pagina, un raggio di bordo e due ombre proiettate in direzioni opposte Il CSS box-shadow la proprietà accetta un elenco di ombre separato da virgole, ciascuna con un offset x, un offset y, un raggio di sfocatura e un colore, come documentato su MDN's riferimento box-shadow e specificato in sfondi e confini CSS Livello 3.
Ecco l'uscita del generatore's predefinito Preimpostazione luce:
border-radius: 24px;
background: #e0e0e0;
box-shadow: 12px 12px 24px #bababa, -12px -12px 24px #ffffff;
Leggi l'elenco delle ombre da sinistra a destra La prima ombra è sfalsata di 12 pixel a destra e 12 in basso, sfocata su 24 pixel, in un grigio più scuro della superficie: cioè la tonalità sul lato lontano dalla luce La seconda è sfalsata di 12 pixel a sinistra e 12 in alto in un colore più chiaro della superficie: la luce evidenziata sul lato rivolto verso la luce Perché l'elemento's proprio sfondo è lo stesso #e0e0e0 come pagina, non c'è un bordo visibile La forma esiste solo come confine dove le due ombre si incontrano.
Perché il mio effetto neumorfismo non si manifesta?
La causa più comune è una mancata corrispondenza tra lo sfondo dell'elemento's e qualunque cosa ci sia dietro Se la pagina è bianca e la carta lo è #e0e0e0, vedi una carta grigia con un'ombra, non un'estrusione morbida Imposta lo sfondo parent's sullo stesso colore dell'elemento Il pannello di anteprima generator's lo fa automaticamente, motivo per cui sembra proprio lì e sbagliato quando incollato su una pagina bianca.
La seconda causa è un colore di evidenziazione che non può essere visto Su una superficie molto chiara il & quot; light" ombra può già essere bianco puro, e su una pagina bianca pura un'ombra bianca è invisibile Anche per questo il neumorfismo non viene quasi mai fatto su #ffffff.
Come vengono calcolati i colori delle ombre chiare e scure?
Il generatore sposta ogni canale rosso, verde e blu del colore della superficie della stessa quantità: la percentuale di intensità di 255. la tonalità chiara aggiunge quella quantità e la tonalità scura la sottrae, e ogni canale è bloccato alla gamma da 0 a 255 e arrotondato.
Ecco il calcolo per il predefinito Light preset, superficie #e0e0e0 (224, 224, 224) con un'intensità del 15%:
- Importo del turno: 15% di 255 = 38,25.
- Tonalità scura: 224 - 38,25 = 185,75, arrotondata a 186, che è esadecimale
ba. Risultato:#bababa. - Tonalità chiara: 224 + 38,25 = 262,25, fissata a 255, esadecimale
ff. Risultato:#ffffff.
Il passaggio 3 mostra un limite che vale la pena conoscere On #e0e0e0 il momento clou colpisce il bianco puro una volta passata l'intensità (255 - 224) /255 = 12,2% Qualsiasi intensità sopra che renda l'ombra più scura senza rendere il punto saliente più luminoso, quindi l'effetto diventa sbilenco Su superfici chiare, mantieni l'intensità vicino a quel punto di bloccaggio, o scegli una superficie leggermente più scura in modo che il punto saliente abbia spazio.
La stessa regola dà gli altri preset:
| Scaldare | Superficie | Distanza /sfocatura | Intensità | Tonalità scura | Tonalità chiara |
|---|---|---|---|---|---|
| Luce | #e0e0e0 |
12/24 px | 15% | #bababa |
#ffffff |
| Carta | #f0f0f3 |
10/20 px | 12% | #d1d1d4 |
#ffffff |
| Scuro | #2d2f34 |
12/24 px | 12% | #0e1015 |
#4c4e53 |
| Pressato | #e0e0e0 |
12/24 px | 15% | #bababa |
#ffffff |
| Convesso | #e0e0e0 |
12/24 px | 15% | #bababa |
#ffffff |
Nel preset Dark, sottraendo 30,6 da ciascun canale di (45, 47, 52) si ottiene (14, 16, 21), o #0e1015, e sommandolo si ottiene (76, 78, 83), o #4c4e53. Poiché lo spostamento è uguale tra i canali, la leggera tinta blu della superficie si traduce in entrambe le tonalità, quindi una carta neumorfica scura non si trasforma in grigio neutro piatto.
Cosa cambiano le quattro forme?
La forma controlla il riempimento dello sfondo element's e se le ombre si trovano all'esterno o all'interno di esso Distanza, sfocatura e raggio si comportano allo stesso modo per tutti e quattro.
| Forma | fondo | Ombre | assomigliare |
|---|---|---|---|
| Piatto | Colore solido della superficie | Esterno | Un altopiano rialzato |
| Convesso | linear-gradient(145deg, light, dark) |
Esterno | Una cupola rialzata, illuminata dall'alto a sinistra |
| Concavo | linear-gradient(145deg, dark, light) |
Esterno | Un piatto rialzato che si curva verso l'interno |
| Pressato | Colore solido della superficie | ambo inset |
Un vuoto spinto nella pagina |
Il preset Pressato produce
border-radius: 24px;
background: #e0e0e0;
box-shadow: inset 12px 12px 24px #bababa, inset -12px -12px 24px #ffffff;
Con inset, le ombre sono disegnate all'interno della scatola di imbottitura element' s, quindi la tonalità scura appare lungo il bordo interno in alto a sinistra e l'evidenziazione lungo il basso a destra. Ciò inverte la stecca di illuminazione e si legge come una depressione. È il & quot;active" o & quot;on" stato per un interruttore il cui stato di riposo è piatto.
Il preset Convex utilizza le tonalità chiare e scure complete come stop sfumati, linear-gradient(145deg, #ffffff, #bababa), che è una curva abbastanza forte con un'intensità del 15% Per una cupola più sottile, abbassa l'intensità; che ammorbidisce insieme il gradiente e le ombre, poiché entrambi provengono dagli stessi due colori.
Come interagiscono distanza, sfocatura e raggio?
I cursori sono indipendenti, ma l'aspetto dipende dai loro rapporti.
- Distanza (da 2 a 50 px) imposta la distanza di spostamento di ciascuna ombra su entrambi gli assi Controlla l'altezza apparente: distanze maggiori fanno galleggiare l'elemento più in alto sopra la pagina.
- Sfocare (da 0 a 100 px) imposta quanto sono morbidi i bordi delle ombre Una sfocatura intorno al doppio della distanza, come in ogni preset, conferisce il caratteristico aspetto a cuscino Sfocatura uguale o inferiore alla distanza produce ombre dai bordi duri che sembrano più un ritaglio.
- Raggio (da 0 a 80 px) arrotonda gli angoli L'interfaccia utente morbida utilizza quasi sempre arrotondamenti generosi; gli angoli quadrati con ombre morbide sembrano un errore di rendering.
- Intensità (dal 2 al 40%) imposta la distanza delle tonalità dal colore della superficie.
Un pratico rapporto di partenza è sfocatura = 2 x distanza, raggio = 2 x distanza, intensità vicino al punto di bloccaggio per la tua superficie Per piccoli elementi come un pulsante di icona da 40 pixel, scala la distanza fino a 4 a 6 pixel; un offset da 12 pixel su un pulsante da 40 pixel rende l'ombra più grande del controllo.
Il neumorfismo è accessibile?
Non per impostazione predefinita. Un bordo di controllo neumorfico ' s è definito da ombre che differiscono dalla superficie solo di una piccola percentuale in luminanza e che non soddisfano i requisiti WCAG per il confine visibile dei componenti interattivi.
Criterio di successo delle WCAG 2.2 1.4.11, Contrasto non testuale, richiede che le informazioni visive necessarie per identificare un componente dell'interfaccia utente, e i suoi stati, abbiano un rapporto di contrasto di almeno 3:1 rispetto ai colori adiacenti Il rapporto di contrasto utilizza la formula di luminanza relativa definita in WCAG2.2. Elaborandolo per il preset predefinito:
| Coppia | Luminanza relativa | Rapporto di contrasto | Incontra 3:1? |
|---|---|---|---|
Tonalità scura #bababa vs superficie #e0e0e0 |
0,491 contro 0,745 | Circa 1,47:1 | no |
Tonalità chiara #ffffff vs superficie #e0e0e0 |
1.000 contro 0,745 | Circa 1:32:1 | no |
Confine #7f7f7f vs superficie #e0e0e0 |
0,212 contro 0,745 | Circa 3:03:1 | Solo |
Confine #767676 vs superficie #e0e0e0 |
0,181 contro 0,745 | Circa 3:44:1 | Sì, con margine |
Testo #333333 vs superficie #e0e0e0 |
0,033 contro 0,745 | Circa 9,6:1 | Sì (passa anche 4,5:1 per il testo) |
E quelle figure ombra sono il caso migliore La sfocatura diffonde il colore ombra fuori, quindi la maggior parte dell'ombra visibile è più chiara di #bababa. Aumentare l'intensità non aiuta molto su una superficie leggera, perché l'evidenziazione è già fissata al bianco.
Per controllare i propri colori, il controllore di contrasto colore calcola il rapporto per qualsiasi coppia e il guida al controllo del contrasto dei colori spiega la formula in dettaglio.
Come mantenere il look e passare le regole di contrasto
Non devi abbandonare lo stile Devi smettere di fare affidamento su di esso per qualsiasi cosa un utente deve percepire.
- Utilizzare l'interfaccia utente morbida per i contenitori, non per i controlli. Carte, pannelli e pozzetti decorativi possono essere puramente neumorfici Il criterio 1.4.11 riguarda componenti interattivi e grafica significativa, quindi un contenitore il cui contenuto si identifica comporta molti meno rischi di un pulsante il cui bordo è l'unico segno che esiste.
- Dai a ogni elemento interattivo un vero e proprio spunto. Un bordo di 1 o 2 pixel in un colore di 3:1 o superiore, un'icona a contrasto o un'etichetta di testo.
- Rendere evidente la concentrazione. Aggiungi un
:focus-visiblecontorno in un colore ad alto contrasto Le ombre morbide non sono un indicatore di messa a fuoco. - Non segnalare lo stato con la sola profondità. Se premuto significa & quot; on", cambia anche un'icona, un'etichetta o un colore.
- Rispettare le impostazioni dell'utente. la query multimediale Preferisce-Contrasto consente di aggiungere bordi o eliminare l'effetto quando un utente chiede più contrasto.
.neu-button {
border-radius: 16px;
background: #e0e0e0;
box-shadow: 8px 8px 16px #bababa, -8px -8px 16px #ffffff;
border: 2px solid #767676;
color: #333333;
}
.neu-button:focus-visible {
outline: 3px solid #1d4ed8;
outline-offset: 3px;
}
.neu-button[aria-pressed="true"] {
box-shadow: inset 8px 8px 16px #bababa, inset -8px -8px 16px #ffffff;
}
@media (prefers-contrast: more) {
.neu-button { box-shadow: none; border-color: #333333; }
}
Come generare il neumorfismo CSS, passo dopo passo
- Apri il generatore neumorfismo e scegli un preset come punto di partenza: Luce, Carta, Scuro, Pressato o Convesso.
- Imposta il colore della superficie con il selettore di colori per abbinarlo allo sfondo su cui si siederà il tuo elemento.
- Regola la distanza e la sfocatura per altezza e morbidezza, quindi l'intensità per il contrasto, guardando l'anteprima dal vivo.
- Scegli una forma: piatta, concava, convessa o pressata.
- Imposta il raggio in base alle dimensioni dell'elemento.
- Fai clic su Copia CSS e incolla le tre dichiarazioni nella regola Ricorda di dare al genitore lo stesso colore di sfondo.
Come si sostengono i temi chiari e scuri?
Genera un set di valori per ogni tema e scambiali con proprietà personalizzate I preset Luce e Oscuri sopra danno una coppia di lavoro:
:root {
--neu-surface: #e0e0e0;
--neu-dark: #bababa;
--neu-light: #ffffff;
}
@media (prefers-color-scheme: dark) {
:root {
--neu-surface: #2d2f34;
--neu-dark: #0e1015;
--neu-light: #4c4e53;
}
}
body, .neu-card { background: var(--neu-surface); }
.neu-card {
border-radius: 24px;
box-shadow: 12px 12px 24px var(--neu-dark), -12px -12px 24px var(--neu-light);
}
Il neumorfismo scuro ha lo specchio del problema della superficie luminosa: l'ombra si blocca verso il nero e l'evidenziazione porta l'effetto Controlla il contrasto separatamente per ciascun tema.
Neumorfismo, glassmorfismo e ombre semplici a confronto
Soft UI è uno dei diversi modi per mostrare la profondità, e ognuno ha costi diversi.
| Stile | Css principale | Indicativo di profondità | Rischio contrasto | bene per |
|---|---|---|---|---|
| Neumorfismo | Due opposti box-shadow livelli, sfondo corrispondente |
Estrusione dalla pagina | Alto | Pannelli decorativi, cruscotti vetrina |
| Glassmorfismo | backdrop-filter: blur() e un riempimento traslucido |
Strato congelato sul contenuto | Medium, dipende da cosa c'è dietro | Sovrapposizioni, carte su immagini |
| Elevazione in stile materiale | Uno o due verso il basso box-shadow strati |
Carta che fluttua sopra la pagina | Basso | Interfacce generali |
| Piatto con bordi | border e riempi i colori |
nessuno | Più basso | Moduli, dati densi, accessibilità-primo lavoro |
la generatore glassmorphism costruisce lo stile del vetro smerigliato e il guida generatore ombra box copre le ombre di elevazione singole e stratificate Per il testo incandescente o in rilievo anziché le caselle, il generatore di ombre di testo applica un'idea simile al tipo Tutti sono elencati sul Hub degli strumenti CSS.
Il generatore è privato?
Sì. L'anteprima e i CSS vengono generati nel browser con JavaScript, non viene caricato o archiviato nulla e la pagina continua a funzionare offline una volta caricata La copia dei conteggi CSS verso un limite di utilizzo giornaliero e viene visualizzato un messaggio se tale limite viene raggiunto.
