Neumorfisme er en ny designtrend som kombinerer flat design og skeuomorfisme. Det er en minimal måte å designe med et mykt, ekstrudert plast, nesten 3D-stil. Foreløpig trender dette designet over internett og brukes mye av designere og utviklere.

Hvis du vil prøve neumorfisme for ditt neste prosjekt, her er noen kodebiter for å komme i gang.

1. Neumorfe kort

Bruk følgende HTML- og CSS-kodebiter for å lage de ovennevnte neumorfe kortene.

HTML-kode

Design

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

Les mer
















Kode

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

Les mer
















Start

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





instagram viewer


Les mer

CSS-kode

@import url (' https://fonts.googleapis.com/css? familie = Poppins: 400,500,600,700,800,900 & display = swap ');
*
{
margin: 0;
polstring: 0;
boksstørrelse: border-box;
font-family: 'Poppins', sans-serif;
}
kropp
{
skjerm: flex;
rettferdiggjøre innhold: sentrum;
align-items: sentrum;
min høyde: 100vh;
bakgrunn: # ebf5fc;
}
.container
{
posisjon: relativ;
skjerm: flex;
rettferdiggjøre innhold: space-around;
align-items: sentrum;
flex-wrap: wrap;
bredde: 1100 px;
}
.container .kort
{
bredde: 320px;
margin: 20px;
polstring: 40px 30px;
bakgrunn: # ebf5fc;
border-radius: 40px;
bokseskygge: -6px -6px 20px rgba (255,255,255,1), 6px 6px 20px rgba (0,0,0,0,1);
}
.container .kort: svever
{
bokseskygge: innfelt -6px -6px 20px rgba (255,255,255,0.5), innfelt 6px 6px 20px rgba (0,0,0,0,05);
}
.container .card .imgBx
{
posisjon: relativ;
tekstjustering: sentrum;
}
.container .card .imgBx img
{
maks bredde: 120px;
}
.container .card .contentBx
{
posisjon: relativ;
margin-top: 20px;
tekstjustering: sentrum;
}
.container .card .contentBx h2
{
farge: # 32a3b1;
skriftvekt: 700;
skriftstørrelse: 1.4em;
bokstavavstand: 2px;
}
.container .card .contentBx s
{
farge: # 32a3b1;
}
.container .card .contentBx a
{
display: inline-block;
polstring: 10px 20px;
margin-top: 15px;
border-radius: 40px;
farge: # 32a3b1;
skriftstørrelse: 16px;
tekstdekorasjon: ingen;
bokseskygge: -4px -4px 15px rgba (255,255,255,1), 4px 4px 15px rgba (0,0,0,0,1);
}
.container .card .contentBx a: svever
{
bokseskygge: innfelt -4px -4px 10px rgba (255,255,255,0.5), innfelt 4px 4px 10px rgba (0,0,0,0,1);
}
.container .card a: hover span
{
skjerm: blokk;
transform: skala (0,98);
}
.container .card: hover .imgBx,
.container .card: hover .contentBx
{
transform: skala (0,98);
}

2. Neumorf form

Bruk følgende HTML- og CSS-kodebiter for å opprette ovennevnte neumorfe form.

HTML-kode

Melde deg på










 Logg Inn

CSS-kode

kropp, html {
bakgrunnsfarge: # EBECF0;
}
body, p, input, select, textarea, button {
font-family: "Montserrat", sans-serif;
bokstavavstand: -0.2px;
skriftstørrelse: 16px;
}
div, p {
farge: #BABECC;
tekst-skygge: 1px 1px 1px #FFF;
}
skjema {
polstring: 16px;
bredde: 320px;
margin: 0 auto;
}
.segmentet {
polstring: 32px 0;
tekstjustering: sentrum;
}
knapp, inngang {
grense: 0;
disposisjon: 0;
skriftstørrelse: 16px;
border-radius: 320px;
polstring: 16px;
bakgrunnsfarge: # EBECF0;
tekst-skygge: 1px 1px 0 #FFF;
}
merke {
skjerm: blokk;
margin-bunn: 24px;
bredde: 100%;
}
inngang {
margin-høyre: 8px;
bokseskygge: innfelt 2px 2px 5px #BABECC, innfelt -5px -5px 10px #FFF;
bredde: 100%;
boksstørrelse: border-box;
overgang: alle 0,2s let-in-ut;
utseende: ingen;
-webkit-utseende: ingen;
}
input: fokus {
bokseskygge: innfelt 1px 1px 2px #BABECC, innfelt -1px -1px 2px #FFF;
}
knapp {
farge: # 61677C;
skriftvekt: fet;
bokseskygge: -5px -5px 20px #FFF, 5px 5px 20px #BABECC;
overgang: alle 0,2s let-in-ut;
markør: peker;
skriftvekt: 600;
}
knapp: sveve {
bokseskygge: -2px -2px 5px #FFF, 2px 2px 5px #BABECC;
}
knapp: aktiv {
bokseskygge: innfelt 1px 1px 2px #BABECC, innfelt -1px -1px 2px #FFF;
}
knapp .ikon {
margin-høyre: 8px;
}
button.unit {
border-radius: 8px;
linjehøyde: 0;
bredde: 48px;
høyde: 48px;
display: inline-flex;
rettferdiggjøre innhold: sentrum;
align-items: sentrum;
margin: 0 8px;
skriftstørrelse: 19,2 px;
}
button.unit .icon {
margin-høyre: 0;
}
button.red {
skjerm: blokk;
bredde: 100%;
farge: # AE1100;
}
.inngangsgruppe {
skjerm: flex;
align-items: sentrum;
rettferdiggjøre innhold: flex-start;
}
.inngangsgruppe-etikett
margin: 0;
flex: 1;
}

3. Neumorfisk Navbar

Bruk følgende HTML-, CSS- og JavaScript-kodebiter for å lage ovennevnte navfelt.

HTML-kode

I slekt: Beste nettsteder for kvalitetseksempler på HTML-koding

Neumorfisk Navbar

CSS-kode

* {
margin: 0;
polstring: 0;
boksstørrelse: border-box;
}
kropp {
bakgrunnsfarge: #avgift;
}
.nav {
bredde: 100vw;
høyde: 100px;
bakgrunnsfarge: #avgift;
bokseskygge: 10px 10px 12px 0 rgba (0, 0, 0, 0,07);
border-radius: 0 0 10px 10px;
skjerm: flex;
rettferdiggjøre innhold: flex-end;
align-items: sentrum;
polstring: 0 3rem;
liste-stil-type: ingen;
}
.nav li.logo {
margin-høyre: auto;
font-family: "Roboto", sans-serif;
skriftstørrelse: 1.5rem;
farge: dimgray;
skriftvekt: 900;
tekst-skygge: 2px 2px 4px rgba (0, 0, 0, 0,3), -2px -2px 4px hvit;
}
.nav li: ikke (.logo) {
margin: 0 1rem;
polstring: 0.5rem 1.5rem;
kant: 2px solid rgba (255, 255, 255, 0,3);
bokseskygge: 4px 4px 6px 0 rgba (0, 0, 0, 0.1), -4px -4px 6px hvit;
border-radius: 10px;
font-family: "Roboto", sans-serif;
markør: peker;
overgang: farge 0.2s letthet, transformere 0.2s letthet;
farge: dimgray;
}
.nav li: ikke (.logo): svev {
transform: skala (1.05);
bokseskygge: 4px 4px 10px 0 rgba (0, 0, 0, 0.1), -4px -4px 10px hvit;
}
.nav li: ikke (.logo): fokus {
disposisjon: ingen;
transform: skala (0,95);
bokseskygge: 4px 4px 10px 0 rgba (0, 0, 0, 0.1), -4px -4px 10px hvit, 4px 4px 10px 0 rgba (0, 0, 0, 0.1) innfelt, -4px -4px 10px hvit innfelt;
}
.nav li: ikke (.logo): svever, .nav li: ikke (.logo): fokus {
farge: orangerert;
}

JavaScript-kode

fjær.bytte ();

4. Neumorf tekst og former

Bruk følgende HTML- og CSS-kodebiter for å lage ovennevnte neumorf tekst og former.

HTML-kode

I slekt: HTML Essentials Cheat Sheet

Sirkel

Smultring

Torget

Glatt firkant

Tumbler

Neumorf tekst

Velkommen til MUO

CSS-kode

I slekt: Enkle CSS-kodeeksempler du kan lære på 10 minutter

*, *::før etter {
boksstørrelse: border-box;
}
: root {
--nFarge: #aaa;
--brShadow: -6px 6px 10px rgba (0,0,0,0,5);
--tlShadow: 6px -6px 10px rgba (255,255,255,0.5);
}
kropp {
margin: 0;
font-familie: sans-serif;
min høyde: 100vh;
skjerm: flex;
align-items: sentrum;
rettferdiggjøre innhold: sentrum;
flex-wrap: wrap;
bakgrunn: var (- nColor);
}
.n-utgangspunkt,
.n-innfelt {
skjerm: flex;
align-items: sentrum;
rettferdiggjøre innhold: sentrum;
}
.n-sirkel {
bakgrunnsfarge: var (- nColor);
bokseskygge: var (- brShadow), var (- tlShadow);
grenseradius: 50%;
bredde: 200px;
høyde: 200px;
margin: 10px;
}
.n-smultring {
bakgrunnsfarge: var (- nColor);
bokseskygge: var (- brShadow), var (- tlShadow);
grenseradius: 50%;
bredde: 200px;
høyde: 200px;
margin: 10px;
}
.n-doughnut .n-inset {
bakgrunnsfarge: var (- nColor);
box-shadow: innfelt var (- brShadow), innfelt var (- tlShadow);
grenseradius: 50%;
bredde: 50%;
høyde: 50%;
margin: 0;
}
.n-tumbler {
bakgrunnsfarge: var (- nColor);
bokseskygge: var (- brShadow), var (- tlShadow);
grenseradius: 50%;
bredde: 200px;
høyde: 200px;
margin: 10px;
}
.n-tumbler .n-utgangspunkt {
bakgrunnsfarge: var (- nColor);
bokseskygge: var (- brShadow), var (- tlShadow);
grenseradius: 50%;
bredde: 80%;
høyde: 80%;
margin: 0;
}
.n-firkantet {
bakgrunnsfarge: var (- nColor);
bokseskygge: var (- brShadow), var (- tlShadow);
grense-radius: 0;
bredde: 200px;
høyde: 200px;
margin: 10px;
}
.n-smooth-sq {
bakgrunnsfarge: var (- nColor);
bokseskygge: var (- brShadow), var (- tlShadow);
grenseradius: 10%;
bredde: 200px;
høyde: 200px;
margin: 10px;
}
.n-tekst {
farge: var (- nFarge);
tekst-skygge: var (- brShadow), var (- tlShadow);
skriftstørrelse: 6 em;
skriftvekt: fet;
}

5. Neumorfe knapper

Bruk følgende HTML-, CSS- og JavaScript-kodebiter for å lage de ovennevnte neumorfe knappene.

HTML-kode

Trykk på knappene




play_arrow


pause





tilfeldig rekkefølge

CSS-kode

@import url (' https://fonts.googleapis.com/icon? familie = Materiell + Ikoner ');
kropp{
bakgrunnsfarge: # 6ec7ff;
}
.btn-holder {
skjerm: blokk;
margin: 0 auto;
margin-top: 64px;
tekstjustering: sentrum;
}
.intro-tekst {
margin-bunn: 48 px;
font-family: 'Quicksand', sans-serif;
farge: hvit;
skriftstørrelse: 18px;
}
.btn {
bredde: 110px;
høyde: 110px;
skriftstørrelse: 30px;
border-radius: 30px;
grense: ingen;
farge: hvit;
loddrett: topp;
-webkit-overgang: .6s let-in-ut;
overgang: .6s letthet-ut-ut;
}
.btn: sveve {
markør: peker;
}
.btn: fokus {
disposisjon: ingen;
}
.btn: første av typen {
margin-høyre: 30px;
}
. pneumorfisk {
bakgrunn: lineær gradient (145deg, # 76d5ff, # 63b3e6);
bokseskygge: 30px 30px 40px # 1e7689,
-30px -30px 40px # 7fe5ff;
kant: 3px solid rgba (255, 255, 255, .4);
}
. pneumorfisk presset {
bakgrunn: lineær gradient (145deg, # 63b3e6, # 76d5ff);
-webkit-box-shadow: innfelt 15px 15px 20px -20px rgba (0,0,0, .5);
-moz-box-shadow: innfelt 15px 15px 20px -20px rgba (0,0,0, .5);
bokseskygge: innfelt 15px 15px 20px -20px rgba (0,0,0, .5);
}
. pneumorf: fokus,. pneumorf: svever,. pneumorf: fokus,. pneumorf: svever,. pneumorf: press,. pneumorf: hover {
kant: 3px solid rgba (46, 74, 112, .75);
}
.material-icon {
font-family: 'Material Icons';
skriftvekt: normal;
skriftstil: normal;
skriftstørrelse: 32px;
display: inline-block;
linjehøyde: 1;
tekst-transform: ingen;
bokstavavstand: normal;
ordpakning: normal;
white-space: nowrap;
retning: ltr;
-webkit-font-smoothing: antialiasert;
tekstgjengivelse: optimizeLegibility;
-moz-osx-font-smoothing: gråtoner;
font-feature-settings: 'liga';
}
#pause {
farge: # 143664;
display: ingen;
}

JavaScript-kode

function changeStyle (btnPressed) {
var btn = document.getElementById (btnPressed);
btn.classList.toggle ("neumorf");
btn.classList.toggle ("neumorf-presset");
hvis (btnPressed 'play-pause') {
spille();
} annet hvis (btnPressed 'shuffle-btn') {
tilfeldig rekkefølge();
}
}
funksjonsavspilling () {
var playBtn = document.getElementById ('play');
var pauseBtn = document.getElementById ('pause');
if (playBtn.style.display 'none') {
playBtn.style.display = 'blokk';
pauseBtn.style.display = 'ingen';
} annet {
playBtn.style.display = 'ingen';
pauseBtn.style.display = 'blokker';
}
}
funksjon blanding () {
var shuffleBtn = document.getElementById ('shuffle-btn');
hvis (shuffleBtn.style.color == 'hvit' || shuffleBtn.style.color == '') {
shuffleBtn.style.color = '# 143664';
} annet {
shuffleBtn.style.color = 'hvit';
}
}

Hvis du vil se på hele kildekoden som brukes i denne artikkelen, er her GitHub-depot.

Merk: Koden som brukes i denne artikkelen er MIT Lisensiert.

Stil nettstedet ditt med nevorfisme

Du kan bruke det minimalistiske designkonseptet med neumorfisme til å style nettstedet ditt. Det gir et estetisk tiltalende utseende. Men likevel har neumorfisme tilgjengelighetsbegrensninger.

Det er forskjellige måter å gi et nettsted et elegant utseende. Hvis du vil style blide bokser på nettstedet ditt, kan du gi CSS-egenskapen box-shadow CS.

Yuvraj Chandra (33 artikler publisert)

Yuvraj er en informatikkstudent ved University of Delhi, India. Han brenner for Full Stack Web Development. Når han ikke skriver, utforsker han dybden i forskjellige teknologier.

Mer fra Yuvraj Chandra