Il neumorfismo è una nuova tendenza di design che combina design piatto e scheumorfismo. È un modo minimale di progettare con un aspetto in plastica morbida ed estrusa, quasi in stile 3D. Attualmente, questo design è di tendenza su Internet ed è ampiamente utilizzato da designer e sviluppatori.

Se vuoi provare il neumorfismo per il tuo prossimo progetto, ecco alcuni frammenti di codice per iniziare.

1. Carte Neumorfe

Usa i seguenti frammenti di codice HTML e CSS per creare le carte neumorfiche di cui sopra.

Codice HTML

Design

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam laboriosam omnis dolore amet sequi nobis Provident nisi esse optio recusandae quod.

Leggi di più
















Codice

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam laboriosam omnis dolore amet sequi nobis Provident nisi esse optio recusandae quod.

Leggi di più










instagram viewer












Lanciare

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam laboriosam omnis dolore amet sequi nobis Provident nisi esse optio recusandae quod.

Leggi di più

Codice CSS

@import url(' https://fonts.googleapis.com/css? famiglia=Poppin: 400,500,600,700,800,900&display=scambio');
*
{
margine: 0;
imbottitura: 0;
box-size: border-box;
font-family: 'Poppins', sans-serif;
}
corpo
{
display: flessibile;
giustifica-contenuto: centro;
allinea-elementi: centro;
altezza minima: 100vh;
sfondo: #ebf5fc;
}
.contenitore
{
posizione: relativa;
display: flessibile;
giustificare-contenuto: spazio-intorno;
allinea-elementi: centro;
flex-wrap: avvolgere;
larghezza: 1100px;
}
.contenitore .carta
{
larghezza: 320px;
margine: 20px;
imbottitura: 40px 30px;
sfondo: #ebf5fc;
bordo-raggio: 40px;
box-shadow: -6px -6px 20px rgba (255,255,255,1), 6px 6px 20px rgba (0,0,0,0.1);
}
.contenitore .carta: hover
{
box-shadow: riquadro -6px -6px 20px rgba (255,255,255,0.5), riquadro 6px 6px 20px rgba (0,0,0,0.05);
}
.contenitore .scheda .imgBx
{
posizione: relativa;
allineamento del testo: centro;
}
.contenitore .carta .imgBx img
{
larghezza massima: 120 px;
}
.contenitore .scheda .contentBx
{
posizione: relativa;
margine superiore: 20 px;
allineamento del testo: centro;
}
.contenitore .scheda .contentBx h2
{
colore: #32a3b1;
peso del carattere: 700;
dimensione del carattere: 1.4em;
spaziatura tra lettere: 2px;
}
.contenitore .card .contentBx p
{
colore: #32a3b1;
}
.contenitore .card .contentBx a
{
display: blocco in linea;
imbottitura: 10px 20px;
margine superiore: 15 px;
bordo-raggio: 40px;
colore: #32a3b1;
dimensione del carattere: 16px;
decorazione del testo: nessuna;
box-shadow: -4px -4px 15px rgba (255,255,255,1), 4px 4px 15px rgba (0,0,0,0.1);
}
.container .card .contentBx a: hover
{
box-shadow: riquadro -4px -4px 10px rgba (255,255,255,0.5), riquadro 4px 4px 10px rgba (0,0,0,0.1);
}
.contenitore .carta a: hover span
{
blocco di visualizzazione;
trasforma: scala (0,98);
}
.contenitore .card: passa il mouse su .imgBx,
.container .card: passa il mouse su .contentBx
{
trasforma: scala (0,98);
}

2. Forma Neumorfa

Utilizzare i seguenti frammenti di codice HTML e CSS per creare la forma neumorfica sopra.

Codice HTML

Iscriviti










 Accesso

Codice CSS

corpo, html {
colore di sfondo: #EBECF0;
}
body, p, input, select, textarea, button {
font-family: "Monserrat", sans-serif;
spaziatura tra lettere: -0.2px;
dimensione del carattere: 16px;
}
div, p {
colore: #BABECC;
text-shadow: 1px 1px 1px #FFF;
}
modulo {
imbottitura: 16px;
larghezza: 320px;
margine: 0 automatico;
}
.segmento {
imbottitura: 32px 0;
allineamento del testo: centro;
}
pulsante, ingresso {
bordo: 0;
contorno: 0;
dimensione del carattere: 16px;
bordo-raggio: 320px;
imbottitura: 16px;
colore di sfondo: #EBECF0;
text-shadow: 1px 1px 0 #FFF;
}
etichetta {
blocco di visualizzazione;
margine inferiore: 24px;
larghezza: 100%;
}
ingresso {
margine destro: 8px;
box-shadow: riquadro 2px 2px 5px #BABECC, riquadro -5px -5px 10px #FFF;
larghezza: 100%;
box-size: border-box;
transizione: tutti gli 0,2 secondi di facilità di entrata e uscita;
aspetto: nessuno;
-aspetto-webkit: nessuno;
}
input: focus {
box-shadow: riquadro 1px 1px 2px #BABECC, riquadro -1px -1px 2px #FFF;
}
pulsante {
colore: #61677C;
font-weight: grassetto;
box-shadow: -5px -5px 20px #FFF, 5px 5px 20px #BABECC;
transizione: tutti gli 0,2 secondi di facilità di entrata e uscita;
cursore: puntatore;
peso del carattere: 600;
}
pulsante: passa il mouse {
box-shadow: -2px -2px 5px #FFF, 2px 2px 5px #BABECC;
}
pulsante: attivo {
box-shadow: riquadro 1px 1px 2px #BABECC, riquadro -1px -1px 2px #FFF;
}
pulsante .icona {
margine destro: 8px;
}
button.unit {
bordo-raggio: 8px;
altezza della linea: 0;
larghezza: 48px;
altezza: 48px;
display: in linea flessibile;
giustifica-contenuto: centro;
allinea-elementi: centro;
margine: 0 8px;
dimensione del carattere: 19,2 px;
}
button.unit .icon {
margine destro: 0;
}
pulsante.rosso {
blocco di visualizzazione;
larghezza: 100%;
colore: #AE1100;
}
.input-group {
display: flessibile;
allinea-elementi: centro;
giustificare-contenuto: flex-start;
}
.etichetta del gruppo di input {
margine: 0;
flessione: 1;
}

3. Navbar Neumorfico

Utilizzare i seguenti frammenti di codice HTML, CSS e JavaScript per creare la barra di navigazione neumorfica sopra.

Codice HTML

Relazionato: I migliori siti per esempi di codifica HTML di qualità

Navbar Neumorfico

Codice CSS

* {
margine: 0;
imbottitura: 0;
box-size: border-box;
}
corpo {
colore di sfondo: #efeeee;
}
.nav {
larghezza: 100vw;
altezza: 100px;
colore di sfondo: #efeeee;
box-shadow: 10px 10px 12px 0 rgba (0, 0, 0, 0,07);
bordo-raggio: 0 0 10px 10px;
display: flessibile;
giustificare-contenuto: flex-end;
allinea-elementi: centro;
imbottitura: 0 3rem;
list-style-type: nessuno;
}
.nav li.logo {
margine destro: auto;
font-family: "Roboto", sans-serif;
dimensione del carattere: 1.5rem;
colore: grigio scuro;
peso del carattere: 900;
text-shadow: 2px 2px 4px rgba (0, 0, 0, 0.3), -2px -2px 4px bianco;
}
.nav li: not(.logo) {
margine: 0 1rem;
imbottitura: 0,5 rem 1,5 rem;
bordo: 2px rgba solido (255, 255, 255, 0.3);
box-shadow: 4px 4px 6px 0 rgba (0, 0, 0, 0,1), -4px -4px 6px bianco;
raggio di confine: 10px;
font-family: "Roboto", sans-serif;
cursore: puntatore;
transizione: colore 0.2s allentamento, trasformazione 0.2 s allentamento;
colore: grigio scuro;
}
.nav li: not(.logo):hover {
trasformare: scala (1.05);
box-shadow: 4px 4px 10px 0 rgba (0, 0, 0, 0,1), -4px -4px 10px bianco;
}
.nav li: not(.logo):focus {
contorno: nessuno;
trasforma: scala (0,95);
box-shadow: 4px 4px 10px 0 rgba (0, 0, 0, 0.1), -4px -4px 10px bianco, 4px 4px 10px 0 rgba (0, 0, 0, 0.1) inserto, -4px -4px 10px bianco inserto;
}
.nav li: not(.logo):hover, .nav li: not(.logo):focus {
colore: rosso aranciato;
}

Codice JavaScript

piuma.replace();

4. Testo e forme neumorfiche

Utilizzare i seguenti frammenti di codice HTML e CSS per creare il testo e le forme neumorfici sopra.

Codice HTML

Relazionato: Il cheat sheet di HTML Essentials

Cerchio

Ciambella

Piazza

Quadrato liscio

bicchiere

Testo Neumorfico

Benvenuto in MUO

Codice CSS

Relazionato: Semplici esempi di codice CSS che puoi imparare in 10 minuti

*, *::prima dopo {
box-size: border-box;
}
:radice {
--nColore: #aaa;
--brShadow: -6px 6px 10px rgba (0,0,0,0,5);
--tlShadow: 6px -6px 10px rgba (255,255,255,0.5);
}
corpo {
margine: 0;
famiglia di caratteri: sans-serif;
altezza minima: 100vh;
display: flessibile;
allinea-elementi: centro;
giustifica-contenuto: centro;
flex-wrap: avvolgere;
sfondo: var(--nColor);
}
.n-inizio,
.n-inserto {
display: flessibile;
allinea-elementi: centro;
giustifica-contenuto: centro;
}
.n-cerchio {
colore di sfondo: var(--nColor);
box-shadow: var(--brShadow), var(--tlShadow);
raggio di confine: 50%;
larghezza: 200px;
altezza: 200px;
margine: 10px;
}
.n-ciambella {
colore di sfondo: var(--nColor);
box-shadow: var(--brShadow), var(--tlShadow);
raggio di confine: 50%;
larghezza: 200px;
altezza: 200px;
margine: 10px;
}
.n-ciambella .n-inset {
colore di sfondo: var(--nColor);
box-shadow: inset var(--brShadow), inset var(--tlShadow);
raggio di confine: 50%;
larghezza: 50%;
altezza: 50%;
margine: 0;
}
.n-bicchiere {
colore di sfondo: var(--nColor);
box-shadow: var(--brShadow), var(--tlShadow);
raggio di confine: 50%;
larghezza: 200px;
altezza: 200px;
margine: 10px;
}
.n-bicchiere .n-inizio {
colore di sfondo: var(--nColor);
box-shadow: var(--brShadow), var(--tlShadow);
raggio di confine: 50%;
larghezza: 80%;
altezza: 80%;
margine: 0;
}
.n-quadrato {
colore di sfondo: var(--nColor);
box-shadow: var(--brShadow), var(--tlShadow);
raggio di confine: 0;
larghezza: 200px;
altezza: 200px;
margine: 10px;
}
.n-liscio-sq {
colore di sfondo: var(--nColor);
box-shadow: var(--brShadow), var(--tlShadow);
raggio di confine: 10%;
larghezza: 200px;
altezza: 200px;
margine: 10px;
}
.n-testo {
colore: var(--nColor);
text-shadow: var(--brShadow), var(--tlShadow);
dimensione del carattere: 6em;
font-weight: grassetto;
}

5. Pulsanti Neumorfici

Utilizzare i seguenti frammenti di codice HTML, CSS e JavaScript per creare i pulsanti neumorfici sopra.

Codice HTML

Premi i pulsanti




play_arrow


pausa





mescola

Codice CSS

@import url(' https://fonts.googleapis.com/icon? famiglia=Materiale+Icone');
corpo{
colore di sfondo: #6ec7ff;
}
.btn-titolare{
blocco di visualizzazione;
margine: 0 automatico;
margine superiore: 64 px;
allineamento del testo: centro;
}
.intro-testo{
margine inferiore: 48px;
font-family: 'Sabbie mobili', sans-serif;
colore bianco;
dimensione del carattere: 18px;
}
.btn{
larghezza: 110px;
altezza: 110px;
dimensione del carattere: 30px;
raggio del bordo: 30px;
confine: nessuno;
colore bianco;
allineamento verticale: in alto;
-webkit-transition: .6s easy-in-out;
transizione: .6s easy-in-out;
}
.btn: hover{
cursore: puntatore;
}
.btn: focus{
contorno: nessuno;
}
.btn: primo del tipo{
margine destro: 30 px;
}
.neumorfico{
sfondo: gradiente lineare (145deg, #76d5ff, #63b3e6);
box-shadow: 30px 30px 40px #1e7689,
-30px -30px 40px #7fe5ff;
bordo: 3px rgba solido (255, 255, 255, .4);
}
.neumorfico-pressato{
sfondo: gradiente lineare (145deg, #63b3e6, #76d5ff);
-webkit-box-shadow: inset 15px 15px 20px -20px rgba (0,0,0,.5);
-moz-box-shadow: inset 15px 15px 20px -20px rgba (0,0,0,.5);
box-shadow: inset 15px 15px 20px -20px rgba (0,0,0,.5);
}
.neumorphic: focus, .neumorphic: hover, .neumorphic: focus, .neumorphic: hover, .neumorphic-pressed: focus, .neumorphic-pressed: hover {
bordo: 3px rgba solido (46, 74, 112, .75);
}
.material-icon {
font-family: 'Icone materiali';
font-weight: normale;
stile del carattere: normale;
dimensione del carattere: 32px;
display: blocco in linea;
altezza della linea: 1;
trasformazione del testo: nessuno;
spaziatura tra lettere: normale;
a capo automatico: normale;
spazio bianco: nowrap;
direzione: lt;
-webkit-font-smoothing: antialiased;
rendering del testo: ottimizzazione della leggibilità;
-moz-osx-font-smoothing: scala di grigi;
font-feature-settings: 'liga';
}
#pausa {
colore: #143664;
display: nessuno;
}

Codice JavaScript

funzione changeStyle (btnPressed) {
var btn = document.getElementById (btnPressed);
btn.classList.toggle("neumorfico");
btn.classList.toggle("neumorphic-pressed");
if (btnPreme 'play-pausa') {
giocare();
} else if (btnPressed 'shuffle-btn') {
mescola();
}
}
funzione play() {
var playBtn = document.getElementById('play');
var pauseBtn = document.getElementById('pause');
if (playBtn.style.display 'none') {
playBtn.style.display = 'blocca';
pauseBtn.style.display = 'nessuno';
} altro {
playBtn.style.display = 'nessuno';
pauseBtn.style.display = 'blocca';
}
}
funzione casuale() {
var shuffleBtn = document.getElementById('shuffle-btn');
if (shuffleBtn.style.color == 'bianco' || shuffleBtn.style.color == '') {
shuffleBtn.style.color = '#143664';
} altro {
shuffleBtn.style.color = 'bianco';
}
}

Se vuoi dare un'occhiata al codice sorgente completo utilizzato in questo articolo, ecco il Archivio GitHub.

Nota: Il codice utilizzato in questo articolo è Licenza MIT.

Dai stile al tuo sito web con il neumorfismo

Puoi utilizzare il concetto di design minimalista del neumorfismo per dare uno stile al tuo sito web. Fornisce un aspetto esteticamente gradevole. Tuttavia, il neumorfismo ha limitazioni di accessibilità.

Ci sono diversi modi per dare a un sito web un aspetto elegante. Se vuoi dare uno stile alle scatole blande sul tuo sito web, prova la proprietà CSS box-shadow.

Yuvraj Chandra (33 articoli pubblicati)

Yuvraj è uno studente universitario di Informatica presso l'Università di Delhi, in India. È appassionato di sviluppo Web Full Stack. Quando non scrive, esplora la profondità di diverse tecnologie.

Altro da Yuvraj Chandra