Neumorfizmas yra nauja dizaino tendencija, jungianti plokščią dizainą ir skeuomorfizmą. Tai minimalus dizaino būdas su minkštu, presuoto plastiko, beveik 3D stiliaus išvaizda. Šiuo metu šis dizainas populiarėja internete ir yra plačiai naudojamas dizainerių ir kūrėjų.

Jei norite išbandyti kito projekto neumorfizmą, pateikite keletą kodo fragmentų, kurie padės jums pradėti.

1. Neumorfinės kortelės

Norėdami sukurti anksčiau nurodytas neumorfines korteles, naudokite šiuos HTML ir CSS kodo fragmentus.

HTML kodas

Dizainas

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

Skaityti daugiau
















Kodas

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

Skaityti daugiau










instagram viewer












Paleiskite

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

Skaityti daugiau

CSS kodas

@import url (' https://fonts.googleapis.com/css? šeima = Poppinsas: 400,500,600,700,800,900 & display = swap ');
*
{
paraštė: 0;
užpildas: 0;
dėžutės dydis: rėmelis;
šriftų šeima: 'Poppins', sans-serif;
}
kūnas
{
ekranas: lankstus;
pateisinti-turinys: centras;
lygiuoti daiktai: centras;
min-aukštis: 100vh;
fonas: # ebf5fc;
}
.konteineris
{
padėtis: giminaitis;
ekranas: lankstus;
pateisinti turinį: aplink erdvę;
lygiuoti daiktai: centras;
lankstus apvyniojimas: apvyniojimas;
plotis: 1100px;
}
.konteineris .kortelė
{
plotis: 320px;
paraštė: 20 taškų;
užpildas: 40px30px;
fonas: # ebf5fc;
krašto spindulys: 40 taškų;
langelis-šešėlis: -6px -6px 20px rgba (255,255,255,1), 6px 6px 20px rgba (0,0,0,0,1);
}
.konteineris .kortelė: užveskite pelę
{
langelis-šešėlis: įdėklas -6px -6px 20px rgba (255,255,255,0,5), įdėklas 6px 6px 20px rgba (0,0,0,0,05);
}
.konteineris .kortelė .imgBx
{
padėtis: giminaitis;
text-align: centre;
}
.konteineris .kortelė .imgBx img
{
maksimalus plotis: 120 taškų;
}
.konteineris .kortelė .turinysBx
{
padėtis: giminaitis;
paraštė viršuje: 20 taškų;
text-align: centre;
}
.konteineris .kortelė .turinysBx h2
{
spalva: # 32a3b1;
šrifto svoris: 700;
šrifto dydis: 1.4em;
tarpai tarp raidžių: 2px;
}
.konteineris .kortelė .turinysBx p
{
spalva: # 32a3b1;
}
.konteineris .kortelė .turinysBx a
{
ekranas: inline-block;
užpildas: 10px20px;
paraštė viršuje: 15 taškų;
krašto spindulys: 40 taškų;
spalva: # 32a3b1;
šrifto dydis: 16 taškų;
teksto dekoravimas: nėra;
langelis-šešėlis: -4px -4px 15px rgba (255,255,255,1), 4px 4px 15px rgba (0,0,0,0,1);
}
.container .card .contentBx a: užveskite pelę
{
langelis-šešėlis: įdėklas -4px -4px 10px rgba (255,255,255,0,5), įdėklas 4px 4px 10px rgba (0,0,0,0,1);
}
.konteineris .kortelė a: pakimba svyruoklė
{
rodyti: blokuoti;
transformuoti: skalė (0,98);
}
.container .card: užveskite pelės žymeklį .imgBx,
.container .card: užveskite pelės žymeklį .contentBx
{
transformuoti: skalė (0,98);
}

2. Neumorfinė forma

Norėdami sukurti aukščiau pateiktą neumorfinę formą, naudokite šiuos HTML ir CSS kodo fragmentus.

HTML kodas

Registruotis










 Prisijungti

CSS kodas

body, html {
fono spalva: # EBECF0;
}
body, p, input, select, textarea, button {
šriftų šeima: „Montserrat“, sans-serif;
tarpai tarp raidžių: -0,2 taškų;
šrifto dydis: 16 taškų;
}
div, p {
spalva: #BABECC;
teksto šešėlis: 1px 1px 1px #FFF;
}
forma {
užpildas: 16px;
plotis: 320px;
paraštė: 0 auto;
}
.segment {
užpildas: 32px 0;
text-align: centre;
}
mygtukas, įvestis {
kraštas: 0;
kontūras: 0;
šrifto dydis: 16 taškų;
krašto spindulys: 320 taškų;
užpildas: 16px;
fono spalva: # EBECF0;
teksto šešėlis: 1px 1px 0 #FFF;
}
etiketė {
rodyti: blokuoti;
paraštė apačioje: 24px;
plotis: 100%;
}
įvestis {
paraštė-dešinė: 8 taškų;
langelis-šešėlis: įterpimas 2px 2px 5px #BABECC, intarpas -5px -5px 10px #FFF;
plotis: 100%;
dėžutės dydis: rėmelis;
perėjimas: visi 0.2s palengvina išėjimą;
išvaizda: nėra;
-webkit-pasirodymas: nėra;
}
įvestis: sutelkti dėmesį
langelis-šešėlis: įterpimas 1px 1px 2px #BABECC, intarpas -1px -1px 2px #FFF;
}
mygtukas {
spalva: # 61677C;
šrifto svoris: paryškintas;
langelis-šešėlis: -5px -5px 20px #FFF, 5px 5px 20px #BABECC;
perėjimas: visi 0.2s palengvina išėjimą;
žymeklis: rodyklė;
šrifto svoris: 600;
}
mygtukas: užveskite pelės žymeklį {
langelio šešėlis: -2px -2px 5px #FFF, 2px 2px 5px #BABECC;
}
mygtukas: aktyvus {
langelis-šešėlis: įterpimas 1px 1px 2px #BABECC, intarpas -1px -1px 2px #FFF;
}
mygtukas .icon {
paraštė-dešinė: 8 taškų;
}
button.unit {
krašto spindulys: 8 taškų;
linijos aukštis: 0;
plotis: 48px;
aukštis: 48px;
ekranas: inline-flex;
pateisinti-turinys: centras;
lygiuoti daiktai: centras;
paraštė: 0 8px;
šrifto dydis: 19,2 taškų;
}
mygtukas.vienetas .ikon {
paraštė-dešinė: 0;
}
button.red {
rodyti: blokuoti;
plotis: 100%;
spalva: # AE1100;
}
.input-group {
ekranas: lankstus;
lygiuoti daiktai: centras;
pateisinti turinį: „flex-start“;
}
.input-group etiketė {
paraštė: 0;
lankstumas: 1;
}

3. Neumorfinis „Navbar“

Norėdami sukurti pirmiau pateiktą neumorfinę naršymo juostą, naudokite šiuos HTML, CSS ir „JavaScript“ kodo fragmentus.

HTML kodas

Susijęs: Geriausios kokybės HTML kodavimo pavyzdžių svetainės

Neumorfinis „Navbar“

CSS kodas

* {
paraštė: 0;
užpildas: 0;
dėžutės dydis: rėmelis;
}
kūnas {
fono spalva: #efeeee;
}
.nav {
plotis: 100vw;
aukštis: 100 taškų;
fono spalva: #efeeee;
langelis-šešėlis: 10px 10px 12px 0 rgba (0, 0, 0, 0,07);
kraštinės spindulys: 0 0 10 taškų 10 taškų;
ekranas: lankstus;
pateisinti turinį: lankstus galas;
lygiuoti daiktai: centras;
kamšalas: 0 3rem;
list-style-type: nėra;
}
.nav li.logo {
paraštė-dešinė: automatinė;
šriftų šeima: „Roboto“, sans-serif;
šrifto dydis: 1.5rem;
spalva: tamsiai pilka;
šrifto svoris: 900;
teksto šešėlis: 2px 2px 4px rgba (0, 0, 0, 0,3), -2px -2px 4px balta;
}
.nav li: not (.logo) {
paraštė: 0 1rem;
paminkštinimas: 0,5rem 1,5rem;
kraštinė: 2 taškų vientisa rgba (255, 255, 255, 0,3);
langelis-šešėlis: 4px 4px 6px 0 rgba (0, 0, 0, 0,1), -4px -4px 6px white;
krašto spindulys: 10 taškų;
šriftų šeima: „Roboto“, sans-serif;
žymeklis: rodyklė;
perėjimas: spalva 0,2s palengvina, transformuoja 0,2s palengvina;
spalva: tamsiai pilka;
}
.nav li: not (.logo): užveskite pelės žymeklį {
transformuoti: skalė (1,05);
langelis-šešėlis: 4px 4px 10px 0 rgba (0, 0, 0, 0,1), -4px -4px 10px white;
}
.nav li: not (.logo): sutelkti dėmesį {
kontūras: nėra;
transformuoti: skalė (0,95);
dėžutė-šešėlis: 4px 4px 10px 0 rgba (0, 0, 0, 0,1), -4px -4px 10px white, 4px 4px 10px 0 rgba (0, 0, 0, 0,1) inset, -4px -4px 10px white inset;
}
.nav li: not (.logo): užveskite pelės žymeklį, .nav li: not (.logo): sutelkkite dėmesį {
spalva: apelsinų;
}

„JavaScript“ kodas

plunksna.pakeisti ();

4. Neumorfinis tekstas ir formos

Naudokite šiuos HTML ir CSS kodo fragmentus, kad sukurtumėte anksčiau pateiktus neorfinius tekstus ir figūras.

HTML kodas

Susijęs: „HTML Essentials“ apgaulės lapas

Apskritimas

Spurga

Aikštė

Lygi aikštė

Tumbleris

Neumorfinis tekstas

Sveiki atvykę į MUO

CSS kodas

Susijęs: Paprasti CSS kodo pavyzdžiai, kuriuos galite sužinoti per 10 minučių

*, *::prieš po {
dėžutės dydis: rėmelis;
}
: šaknis {
--nColor: #aaa;
--brShadow: -6px 6px 10px rgba (0,0,0,0,5);
--tlShadow: 6px -6px 10px rgba (255,255,255,0,5);
}
kūnas {
paraštė: 0;
šriftų šeima: sans-serif;
min-aukštis: 100vh;
ekranas: lankstus;
lygiuoti daiktai: centras;
pateisinti-turinys: centras;
lankstus apvyniojimas: apvyniojimas;
fonas: var (- nColor);
}
.n pradžioje
.n-inset {
ekranas: lankstus;
lygiuoti daiktai: centras;
pateisinti-turinys: centras;
}
.n-circle {
fono spalva: var (- nColor);
langelis-šešėlis: var (- brShadow), var (- tlShadow);
sienos spindulys: 50%;
plotis: 200 taškų;
aukštis: 200 taškų;
paraštė: 10 taškų;
}
.n-spurga {
fono spalva: var (- nColor);
langelis-šešėlis: var (- brShadow), var (- tlShadow);
sienos spindulys: 50%;
plotis: 200 taškų;
aukštis: 200 taškų;
paraštė: 10 taškų;
}
.n-spurga .n-inset {
fono spalva: var (- nColor);
langelis-šešėlis: intet var (- brShadow), inset var (- tlShadow);
sienos spindulys: 50%;
plotis: 50%;
aukštis: 50%;
paraštė: 0;
}
.n-tumbler {
fono spalva: var (- nColor);
langelis-šešėlis: var (- brShadow), var (- tlShadow);
sienos spindulys: 50%;
plotis: 200 taškų;
aukštis: 200 taškų;
paraštė: 10 taškų;
}
.n-tumbler .n-outset {
fono spalva: var (- nColor);
langelis-šešėlis: var (- brShadow), var (- tlShadow);
sienos spindulys: 50%;
plotis: 80%;
aukštis: 80%;
paraštė: 0;
}
.n-square {
fono spalva: var (- nColor);
langelis-šešėlis: var (- brShadow), var (- tlShadow);
krašto spindulys: 0;
plotis: 200 taškų;
aukštis: 200 taškų;
paraštė: 10 taškų;
}
.n-smooth-sq {
fono spalva: var (- nColor);
langelis-šešėlis: var (- brShadow), var (- tlShadow);
sienos spindulys: 10%;
plotis: 200 taškų;
aukštis: 200 taškų;
paraštė: 10 taškų;
}
.n-text {
spalva: var (- nColor);
teksto šešėlis: var (- brShadow), var (- tlShadow);
šrifto dydis: 6em;
šrifto svoris: paryškintas;
}

5. Neumorfiniai mygtukai

Norėdami sukurti anksčiau nurodytus neumorfinius mygtukus, naudokite šiuos HTML, CSS ir „JavaScript“ kodo fragmentus.

HTML kodas

Paspauskite mygtukus




play_arrow


Pauzė





maišyti

CSS kodas

@import url (' https://fonts.googleapis.com/icon? šeima = medžiaga + piktogramos ');
kūnas{
fono spalva: # 6ec7ff;
}
.btn-savininkas {
rodyti: blokuoti;
paraštė: 0 auto;
paraštė viršuje: 64 tšk.
text-align: centre;
}
.intro-text {
paraštė apačioje: 48 taškų;
šriftų šeima: 'Quicksand', sans-serif;
spalva: balta;
šrifto dydis: 18 taškų;
}
.btn {
plotis: 110px;
aukštis: 110 taškų;
šrifto dydis: 30 taškų;
krašto spindulys: 30 taškų;
riba: nėra;
spalva: balta;
vertikaliai lygiuoti: viršuje;
-webkit-perėjimas: .6s palengvinimas;
perėjimas: .6s palengvėjimas;
}
.btn: užveskite pelės žymeklį {
žymeklis: rodyklė;
}
.btn: sutelkti dėmesį {
kontūras: nėra;
}
.btn: pirmojo tipo {
paraštė-dešinė: 30 taškų;
}
.neumorfinis {
fonas: tiesinis gradientas (145 laipsniai, # 76d5ff, # 63b3e6);
langelio šešėlis: 30 piks. 30 piks. 40 piks. # 1e7689,
-30px -30px40px # 7fe5ff;
kraštinė: 3 taškų vientisa rgba (255, 255, 255, .4);
}
.neumorfiškai nuspaustas {
fonas: tiesinis gradientas (145 laipsniai, # 63b3e6, # 76d5ff);
-webkit-box-shadow: įdėti 15px 15px 20px -20px rgba (0,0,0, .5);
-moz-box-shadow: įdėti 15px 15px 20px -20px rgba (0,0,0, .5);
langelis-šešėlis: įdėti 15 taškų 15 taškų 20 taškų –20 taškų rgba (0,0,0, .5);
}
.neumorfinis: židinys, .neumorfinis: pakimba, .neumorfinis: židinys, .neumorfinis: pakimba, .neumorfiškai nuspaustas: židinys, .neumorfiškai nuspaustas: pakimba {
kraštas: 3 taškų vientisa rgba (46, 74, 112, .75);
}
.material-icon {
font-family: „Material Piktogramos“;
šrifto svoris: normalus;
šrifto stilius: įprastas;
šrifto dydis: 32 taškų;
ekranas: inline-block;
linijos aukštis: 1;
teksto transformacija: nėra;
tarpai tarp raidžių: normalus;
žodžio įvyniojimas: normalus;
white-space: nowrap;
kryptis: ltr;
-webkit-font-smoothing: antialiased;
teksto atvaizdavimas: optimizeLegibility;
-moz-osx-font-glodinimas: pilkos spalvos;
font-feature-settings: 'liga';
}
#Pauzė {
spalva: # 143664;
rodyti: nėra;
}

„JavaScript“ kodas

funkcija changeStyle (btnPressed) {
var btn = document.getElementById (btnPressed);
btn.classList.toggle ("neumorfinis");
btn.classList.toggle ("neumorfiškai prispaustas");
if (btnPaspaustas „play-pause“) {
žaisti();
} else if (btnPaspaustas 'shuffle-btn') {
maišyti ();
}
}
funkcijos grojimas () {
var playBtn = document.getElementById ('žaisti');
var pauseBtn = document.getElementById ('pauzė');
jei (playBtn.style.display „nėra“) {
playBtn.style.display = 'blokuoti';
pauseBtn.style.display = 'nėra';
} Kitas {
playBtn.style.display = 'nėra';
pauseBtn.style.display = 'blokuoti';
}
}
funkcija shuffle () {
var shuffleBtn = document.getElementById ('shuffle-btn');
jei (shuffleBtn.style.color == 'balta' || shuffleBtn.style.color == '') {
shuffleBtn.style.color = '# 143664';
} Kitas {
shuffleBtn.style.color = 'balta';
}
}

Jei norite pažvelgti į visą šiame straipsnyje naudojamą šaltinio kodą, žiūrėkite „GitHub“ saugykla.

Pastaba: Šiame straipsnyje naudojamas kodas yra MIT licencijuota.

Sukurkite savo svetainės stilių naudodamiesi neumorfizmu

Norėdami sukurti savo svetainę, galite naudoti minimalistinę neumorfizmo dizaino koncepciją. Tai suteikia estetišką išvaizdą. Tačiau vis dėlto neumorfizmas turi prieinamumo apribojimų.

Yra keletas būdų, kaip suteikti svetainei elegantišką išvaizdą. Jei norite stilizuoti švelnius langelius savo svetainėje, duokite langelio šešėlio CSS nuosavybę.

Yuvraj Chandra (Paskelbti 33 straipsniai)

Yuvraj yra kompiuterių bakalauro studentas Delio universitete, Indijoje. Jis aistringai domisi „Full Stack“ interneto plėtra. Kai nerašo, jis tyrinėja įvairių technologijų gylį.

Daugiau iš „Yuvraj Chandra“