Neumorfism är en ny designtrend som kombinerar platt design och skeuomorfism. Det är ett minimalt sätt att designa med ett mjukt, extruderat plast, nästan 3D-stil. För närvarande är denna design trendig över internet och används ofta av designers och utvecklare.

Om du vill prova neumorfism för ditt nästa projekt, här är några kodavsnitt för att komma igång.

1. Neumorfiska kort

Använd följande HTML- och CSS-kodavsnitt för att skapa ovanstående neumorfiska kort.

HTML-kod

Design

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

Läs mer
















Koda

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

Läs mer






instagram viewer












Lansera

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

Läs mer

CSS-kod

@import url (' https://fonts.googleapis.com/css? family = Poppins: 400,500,600,700,800,900 & display = swap ');
*
{
marginal: 0;
stoppning: 0;
box-dimensionering: border-box;
font-family: 'Poppins', sans-serif;
}
kropp
{
display: flex;
justify-content: center;
align-items: center;
min höjd: 100vh;
bakgrund: # ebf5fc;
}
.behållare
{
position: relativ;
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
bredd: 1100 pixlar;
}
.container .kort
{
bredd: 320px;
marginal: 20px;
stoppning: 40px 30px;
bakgrund: # ebf5fc;
gränsradie: 40 pixlar;
box-shadow: -6px -6px 20px rgba (255,255,255,1), 6px 6px 20px rgba (0,0,0,0,1);
}
.container .card: sväva
{
box-shadow: infälld -6px -6px 20px rgba (255,255,255,0.5), infälld 6px 6px 20px rgba (0,0,0,0.05);
}
.container .card .imgBx
{
position: relativ;
textjustera: centrum;
}
.container .card .imgBx img
{
max-bredd: 120px;
}
.container .card .contentBx
{
position: relativ;
margin-top: 20px;
textjustera: centrum;
}
.container .card .contentBx h2
{
färg: # 32a3b1;
font-vikt: 700;
teckenstorlek: 1.4em;
bokstavsavstånd: 2 pixlar;
}
.container .card .contentBx s
{
färg: # 32a3b1;
}
.container .card .contentBx a
{
display: inline-block;
stoppning: 10px 20px;
margin-top: 15px;
gränsradie: 40 pixlar;
färg: # 32a3b1;
teckenstorlek: 16 pixlar;
text-dekoration: ingen;
box-shadow: -4px -4px 15px rgba (255,255,255,1), 4px 4px 15px rgba (0,0,0,0,1);
}
.container .card .contentBx a: sväva
{
box-shadow: infälld -4px -4px 10px rgba (255,255,255,0.5), infälld 4px 4px 10px rgba (0,0,0,0,1);
}
.container .card a: sväva över
{
display: blockera;
transform: skala (0,98);
}
.container .card: sväva .imgBx,
.container .card: sväva .contentBx
{
transform: skala (0,98);
}

2. Neumorf form

Använd följande HTML- och CSS-kodavsnitt för att skapa ovanstående neumorf form.

HTML-kod

Bli Medlem










 Logga in

CSS-kod

body, html {
bakgrundsfärg: # EBECF0;
}
body, p, input, select, textarea, button {
font-family: "Montserrat", sans-serif;
bokstavsavstånd: -0.2px;
teckenstorlek: 16 pixlar;
}
div, p {
färg: #BABECC;
text-skugga: 1px 1px 1px #FFF;
}
form {
stoppning: 16 pixlar;
bredd: 320px;
marginal: 0 auto;
}
.segmentet {
stoppning: 32px 0;
textjustera: centrum;
}
knapp, inmatning {
gräns: 0;
disposition: 0;
teckenstorlek: 16 pixlar;
gränsradie: 320 pixlar;
stoppning: 16 pixlar;
bakgrundsfärg: # EBECF0;
text-skugga: 1px 1px 0 #FFF;
}
etikett {
display: blockera;
marginal-botten: 24 pixlar;
bredd: 100%;
}
inmatning {
marginal-höger: 8 pixlar;
box-shadow: infälld 2px 2px 5px #BABECC, infälld -5px -5px 10px #FFF;
bredd: 100%;
box-dimensionering: border-box;
övergång: alla 0,2s lätthet-in-ut;
utseende: ingen;
-webkit-utseende: ingen;
}
input: fokus {
box-shadow: infälld 1px 1px 2px #BABECC, infälld -1px -1px 2px #FFF;
}
knapp {
färg: # 61677C;
font-vikt: fet;
box-shadow: -5px -5px 20px #FFF, 5px 5px 20px #BABECC;
övergång: alla 0,2s lätthet-in-ut;
markör: pekare;
font-vikt: 600;
}
knapp: sväva {
box-shadow: -2px -2px 5px #FFF, 2px 2px 5px #BABECC;
}
knapp: aktiv {
box-shadow: infälld 1px 1px 2px #BABECC, infälld -1px -1px 2px #FFF;
}
knapp .icon {
marginal-höger: 8 pixlar;
}
button.unit {
gränsradie: 8 pixlar;
linjehöjd: 0;
bredd: 48px;
höjd: 48px;
display: inline-flex;
justify-content: center;
align-items: center;
marginal: 0 8px;
teckenstorlek: 19,2 pixlar;
}
button.unit .icon {
marginal-höger: 0;
}
button.red {
display: blockera;
bredd: 100%;
färg: # AE1100;
}
.input-group {
display: flex;
align-items: center;
justify-content: flex-start;
}
.input-gruppetikett {
marginal: 0;
flex: 1;
}

3. Neumorf Navbar

Använd följande HTML-, CSS- och JavaScript-kodavsnitt för att skapa ovanstående neumorf navbar.

HTML-kod

Relaterad: Bästa webbplatser för HTML-kodningsexempel av hög kvalitet

Neumorf Navbar

CSS-kod

* {
marginal: 0;
stoppning: 0;
box-dimensionering: border-box;
}
kropp {
bakgrundsfärg: #avgift;
}
.nav {
bredd: 100vw;
höjd: 100px;
bakgrundsfärg: #avgift;
box-shadow: 10px 10px 12px 0 rgba (0, 0, 0, 0,07);
gränsradie: 0 0 10px 10px;
display: flex;
justify-content: flex-end;
align-items: center;
stoppning: 0 3rem;
list-style-type: none;
}
.nav li.logo {
marginal-höger: auto;
font-family: "Roboto", sans-serif;
font-storlek: 1.5rem;
färg: dimgray;
font-vikt: 900;
text-skugga: 2px 2px 4px rgba (0, 0, 0, 0,3), -2px -2px 4px vit;
}
.nav li: inte (.logo) {
marginal: 0 1rem;
stoppning: 0.5rem 1.5rem;
gräns: 2px fast rgba (255, 255, 255, 0,3);
box-shadow: 4px 4px 6px 0 rgba (0, 0, 0, 0.1), -4px -4px 6px vit;
gränsradie: 10 pixlar;
font-family: "Roboto", sans-serif;
markör: pekare;
övergång: färg 0,2 s lätthet, transform 0,2 s lätthet;
färg: dimgray;
}
.nav li: inte (.logo): sväva {
transform: skala (1,05);
box-shadow: 4px 4px 10px 0 rgba (0, 0, 0, 0.1), -4px -4px 10px vit;
}
.nav li: inte (.logo): fokus {
disposition: ingen;
transform: skala (0,95);
box-shadow: 4px 4px 10px 0 rgba (0, 0, 0, 0.1), -4px -4px 10px vit, 4px 4px 10px 0 rgba (0, 0, 0, 0.1) infälld, -4px -4px 10px vit insats;
}
.nav li: inte (.logo): sväva, .nav li: inte (.logo): fokus {
färg: orangerad;
}

JavaScript-kod

feather.replace ();

4. Neumorf text och former

Använd följande HTML- och CSS-kodavsnitt för att skapa ovanstående neumorf text och former.

HTML-kod

Relaterad: HTML Essentials Cheat Sheet

Cirkel

Munk

Fyrkant

Slät kvadrat

Tumlare

Neumorf text

Välkommen till MUO

CSS-kod

Relaterad: Enkla CSS-exempel som du kan lära dig på tio minuter

*, *::före efter {
box-dimensionering: border-box;
}
: root {
--nFärg: #aaa;
--brShadow: -6px 6px 10px rgba (0,0,0,0,5);
--tlShadow: 6px -6px 10px rgba (255,255,255,0,5);
}
kropp {
marginal: 0;
font-family: sans-serif;
min höjd: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
bakgrund: var (- nColor);
}
.n-början,
.n-infälld {
display: flex;
align-items: center;
justify-content: center;
}
.n-cirkel {
bakgrundsfärg: var (- nColor);
box-shadow: var (- brShadow), var (- tlShadow);
gränsradie: 50%;
bredd: 200px;
höjd: 200px;
marginal: 10px;
}
.n-munk {
bakgrundsfärg: var (- nColor);
box-shadow: var (- brShadow), var (- tlShadow);
gränsradie: 50%;
bredd: 200px;
höjd: 200px;
marginal: 10px;
}
.n-munk .n-infälld {
bakgrundsfärg: var (- nColor);
box-shadow: infälld var (- brShadow), infälld var (- tlShadow);
gränsradie: 50%;
bredd: 50%;
höjd: 50%;
marginal: 0;
}
.n-tumbler {
bakgrundsfärg: var (- nColor);
box-shadow: var (- brShadow), var (- tlShadow);
gränsradie: 50%;
bredd: 200px;
höjd: 200px;
marginal: 10px;
}
.n-tumbler .n-start {
bakgrundsfärg: var (- nColor);
box-shadow: var (- brShadow), var (- tlShadow);
gränsradie: 50%;
bredd: 80%;
höjd: 80%;
marginal: 0;
}
.n-kvadrat {
bakgrundsfärg: var (- nColor);
box-shadow: var (- brShadow), var (- tlShadow);
gränsradie: 0;
bredd: 200px;
höjd: 200px;
marginal: 10px;
}
.n-smooth-sq {
bakgrundsfärg: var (- nColor);
box-shadow: var (- brShadow), var (- tlShadow);
gränsradie: 10%;
bredd: 200px;
höjd: 200px;
marginal: 10px;
}
.n-text {
färg: var (- nFärg);
text-skugga: var (- brShadow), var (- tlShadow);
font-storlek: 6em;
font-vikt: fet;
}

5. Neumorfiska knappar

Använd följande HTML-, CSS- och JavaScript-kodavsnitt för att skapa ovanstående neumorfiska knappar.

HTML-kod

Tryck på knapparna




play_arrow


paus





blanda

CSS-kod

@import url (' https://fonts.googleapis.com/icon? familj = Material + Ikoner ');
kropp{
bakgrundsfärg: # 6ec7ff;
}
.btn-hållare {
display: blockera;
marginal: 0 auto;
margin-top: 64px;
textjustera: centrum;
}
.intro-text {
marginal-botten: 48 pixlar;
font-family: 'Quicksand', sans-serif;
färg vit;
fontstorlek: 18 pixlar;
}
.btn {
bredd: 110px;
höjd: 110px;
teckenstorlek: 30 pixlar;
gränsradie: 30 pixlar;
gräns: ingen;
färg vit;
lodrätt: topp;
-webkit-övergång: .6s lätt-in-ut;
övergång: .6s lätthet-in-ut;
}
.btn: sväva {
markör: pekare;
}
.btn: fokus {
disposition: ingen;
}
.btn: först-av-typ {
marginal-höger: 30 pixlar;
}
. pneumorfisk {
bakgrund: linjär gradient (145deg, # 76d5ff, # 63b3e6);
box-shadow: 30px 30px 40px # 1e7689,
-30px -30px 40px # 7fe5ff;
gräns: 3px solid rgba (255, 255, 255, .4);
}
. pneumorfisk pressad {
bakgrund: linjär gradient (145deg, # 63b3e6, # 76d5ff);
-webkit-box-shadow: infälld 15px 15px 20px -20px rgba (0,0,0, .5);
-moz-box-shadow: infälld 15px 15px 20px -20px rgba (0,0,0, .5);
box-shadow: infälld 15px 15px 20px -20px rgba (0,0,0, .5);
}
. pneumorf: fokus,. pneumorf: sväva,. pneumorf: fokus,. pneumorf: sväva,. pneumorfisk: fokus,. pneumorf: sväva {
gräns: 3px solid rgba (46, 74, 112, .75);
}
.material-ikon {
font-family: 'Materialikoner';
font-vikt: normal;
typsnitt: normal;
teckenstorlek: 32 pixlar;
display: inline-block;
linjehöjd: 1;
text-transform: ingen;
bokstavsavstånd: normalt;
ordomslag: normal;
white-space: nowrap;
riktning: ltr;
-webkit-font-smoothing: antialised;
textåtergivning: optimizeLegibility;
-moz-osx-font-smoothing: gråskala;
font-feature-settings: 'liga';
}
#pause {
färg: # 143664;
display: ingen;
}

JavaScript-kod

function changeStyle (btnPressed) {
var btn = document.getElementById (btnPressed);
btn.classList.toggle ("neumorf");
btn.classList.toggle ("neumorf-pressad");
if (btnPressed 'play-pause') {
spela();
} annat om (btnPressed 'shuffle-btn') {
blanda();
}
}
funktionsuppspelning () {
var playBtn = document.getElementById ('play');
var pauseBtn = document.getElementById ('paus');
if (playBtn.style.display 'none') {
playBtn.style.display = 'blockera';
pauseBtn.style.display = 'ingen';
} annat {
playBtn.style.display = 'ingen';
pauseBtn.style.display = 'blockera';
}
}
funktionsblandning () {
var shuffleBtn = document.getElementById ('shuffle-btn');
om (shuffleBtn.style.color == 'vit' || shuffleBtn.style.color == '') {
shuffleBtn.style.color = '# 143664';
} annat {
shuffleBtn.style.color = 'vit';
}
}

Om du vill titta på hela källkoden som används i den här artikeln, här är GitHub-förvar.

Notera: Koden som används i den här artikeln är MIT licensierad.

Forma din webbplats med neumorfism

Du kan använda det minimalistiska designkonceptet neumorfism för att utforma din webbplats. Det ger ett estetiskt tilltalande utseende. Men ändå har neumorfism begränsningar för tillgänglighet.

Det finns olika sätt att ge en webbplats en elegant look. Om du vill utforma blid rutor på din webbplats, ge box-shadow CSS-egenskapen en chans.

Yuvraj Chandra (33 artiklar publicerade)

Yuvraj är studenter vid datavetenskap vid University of Delhi, Indien. Han brinner för Full Stack webbutveckling. När han inte skriver utforskar han djupet i olika tekniker.

Mer från Yuvraj Chandra