Neumorfisms ir jauna dizaina tendence, kas apvieno plakanu dizainu un skeuomorfismu. Tas ir minimāls veids, kā noformēt ar mīkstu, presētu plastmasu, gandrīz ar 3D izskatu. Pašlaik šis dizains ir populārs internetā, un to plaši izmanto dizaineri un izstrādātāji.

Ja vēlaties izmēģināt nākamā projekta neorfismu, šeit ir daži koda fragmenti, lai sāktu darbu.

1. Neumorfās kartes

Izmantojiet šos HTML un CSS koda fragmentus, lai izveidotu iepriekš minētās neororfās kartes.

HTML kods

Dizains

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

Lasīt vairāk
















Kods

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

Lasīt vairāk










instagram viewer












Uzsākt

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

Lasīt vairāk

CSS kods

@import url (' https://fonts.googleapis.com/css? ģimene = Popins: 400,500,600,700,800,900 & display = swap ');
*
{
starpība: 0;
polsterējums: 0;
kastes izmērs: pierobežas kaste;
fontu saime: 'Poppins', sans-serif;
}
ķermeņa
{
displejs: elastīgs;
attaisnot-saturs: centrs;
align-items: centrs;
min-augstums: 100vh;
fons: # ebf5fc;
}
.konteiners
{
amats: radinieks;
displejs: elastīgs;
attaisnot-saturu: atstarpi apkārt;
align-items: centrs;
flex-wrap: ietīšana;
platums: 1100px;
}
.konteiners .karte
{
platums: 320 pikseļi;
piemale: 20px;
polsterējums: 40 pikseļi 30 pikseļi;
fons: # ebf5fc;
apmales rādiuss: 40 pikseļi;
box-shadow: -6px -6px 20px rgba (255,255,255,1), 6px 6px 20px rgba (0,0,0,0,1);
}
.konteiners .karte: virziet kursoru
{
box-shadow: ieliktnis -6px -6px 20px rgba (255,255,255,0,5), ieliktnis 6px 6px 20px rgba (0,0,0,0,05);
}
.konteiners .karte .imgBx
{
amats: radinieks;
text-align: center;
}
.konteiners .karte .imgBx img
{
maksimālais platums: 120 pikseļi;
}
.container .card .contentBx
{
amats: radinieks;
margin-top: 20 pikseļi;
text-align: center;
}
.container .card .contentBx h2
{
krāsa: # 32a3b1;
fonta svars: 700;
fonta lielums: 1,4em;
burtu atstarpes: 2px;
}
.container .card .contentBx lpp
{
krāsa: # 32a3b1;
}
.container .card .contentBx a
{
displejs: inline-block;
polsterējums: 10 pikseļi 20 pikseļi;
margin-top: 15 pikseļi;
apmales rādiuss: 40 pikseļi;
krāsa: # 32a3b1;
fonta lielums: 16 pikseļi;
teksta noformēšana: nav;
box-shadow: -4px -4px 15px rgba (255,255,255,1), 4px 4px 15px rgba (0,0,0,0,1);
}
.container .card .contentBx a: virziet kursoru
{
box-shadow: ieliktnis -4px -4px 10px rgba (255,255,255,0,5), ieliktnis 4px 4px 10px rgba (0,0,0,0,1);
}
.konteiners .card a: lidināties
{
displejs: bloks;
pārveidot: mērogs (0,98);
}
.container .card: virziet kursoru .imgBx,
.container .card: virziet kursoru .contentBx
{
pārveidot: mērogs (0,98);
}

2. Neumorfā forma

Izmantojiet šos HTML un CSS koda fragmentus, lai izveidotu iepriekš minēto neumorfo formu.

HTML kods

Pierakstīties










 Pieslēgties

CSS kods

pamatteksts, html {
fona krāsa: # EBECF0;
}
pamatteksts, p, ievade, atlase, teksta apgabals, poga {
fontu ģimene: "Montserrat", sans-serif;
burtu atstarpe: -0,2 pikseļi;
fonta lielums: 16 pikseļi;
}
div, p {
krāsa: #BABECC;
teksta ēna: 1px 1px 1px #FFF;
}
veidlapa {
polsterējums: 16px;
platums: 320 pikseļi;
margin: 0 auto;
}
.segment {
polsterējums: 32 pikseļi 0;
text-align: center;
}
poga, ievade {
apmale: 0;
kontūra: 0;
fonta lielums: 16 pikseļi;
apmales rādiuss: 320 pikseļi;
polsterējums: 16px;
fona krāsa: # EBECF0;
teksta ēna: 1px 1px 0 #FFF;
}
iezīme {
displejs: bloks;
apmale apakšā: 24 pikseļi;
platums: 100%;
}
ievade {
labā mala: 8px;
box-shadow: ieliktnis 2px 2px 5px #BABECC, ieliktnis -5px -5px 10px #FFF;
platums: 100%;
kastes izmērs: pierobežas kaste;
pāreja: visi 0.2s atvieglo iziešanu;
izskats: nav;
-webkit-izskatu: nav;
}
ievade: fokuss {
box-shadow: ieliktnis 1px 1px 2px #BABECC, ieliktnis -1px -1px 2px #FFF;
}
poga {
krāsa: # 61677C;
fonta svars: treknrakstā;
box-shadow: -5px -5px 20px #FFF, 5px 5px 20px #BABECC;
pāreja: visi 0.2s atvieglo iziešanu;
kursors: rādītājs;
fonta svars: 600;
}
poga: virziet kursoru {
box-shadow: -2px -2px 5px #FFF, 2px 2px 5px #BABECC;
}
poga: aktīvs {
box-shadow: ieliktnis 1px 1px 2px #BABECC, ieliktnis -1px -1px 2px #FFF;
}
poga .icon {
labā mala: 8px;
}
button.unit {
apmales rādiuss: 8px;
līnijas augstums: 0;
platums: 48px;
augstums: 48px;
displejs: inline-flex;
attaisnot-saturs: centrs;
align-items: centrs;
starpība: 0 8px;
fonta lielums: 19,2 pikseļi;
}
button.unit .icon {
labā mala: 0;
}
button.red {
displejs: bloks;
platums: 100%;
krāsa: # AE1100;
}
.input-group {
displejs: elastīgs;
align-items: centrs;
pamatot saturu: elastīgi sākt;
}
.input-group iezīme {
starpība: 0;
elastība: 1;
}

3. Neumorfā navigācijas josla

Izmantojiet šos HTML, CSS un JavaScript koda fragmentus, lai izveidotu iepriekš minēto neumorfo navigācijas joslu.

HTML kods

Saistīts: Labākās vietnes kvalitatīviem HTML kodēšanas piemēriem

Neumorfā navigācijas josla

CSS kods

* {
starpība: 0;
polsterējums: 0;
kastes izmērs: pierobežas kaste;
}
ķermenis {
fona krāsa: #efeeee;
}
.nav {
platums: 100vw;
augstums: 100 pikseļi;
fona krāsa: #efeeee;
box-shadow: 10px 10px 12px 0 rgba (0, 0, 0, 0,07);
apmales rādiuss: 0 0 10 pikseļi 10 pikseļi;
displejs: elastīgs;
attaisnot saturu: elastīgs gals;
align-items: centrs;
polsterējums: 0 3rem;
list-style-type: nav;
}
.nav li.logo {
margin-right: auto;
fontu saime: "Roboto", sans-serif;
fonta lielums: 1,5rem;
krāsa: blāvi;
fonta svars: 900;
teksta ēna: 2 pikseļi 2 pikseļi 4 pikseļi rgba (0, 0, 0, 0,3), -2 pikseļi -2 pikseļi 4 pikseļi balta;
}
.nav li: not (.logo) {
starpība: 0 1rem;
polsterējums: 0,5rem 1,5rem;
apmale: 2px cietā rgba (255, 255, 255, 0,3);
box-shadow: 4px 4px 6px 0 rgba (0, 0, 0, 0,1), -4px -4px 6px white;
apmales rādiuss: 10 pikseļi;
fontu saime: "Roboto", sans-serif;
kursors: rādītājs;
pāreja: krāsa 0.2s atvieglo, pārveido 0.2s atvieglo;
krāsa: blāvi;
}
.nav li: not (.logo): virziet kursoru {
pārveidot: mērogs (1,05);
box-shadow: 4px 4px 10px 0 rgba (0, 0, 0, 0,1), -4px -4px 10px white;
}
.nav li: not (.logo): fokuss {
kontūra: nav;
pārveidot: mērogs (0,95);
box-shadow: 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): virziet kursoru, .nav li: not (.logo): fokuss {
krāsa: orangered;
}

JavaScript kods

spalvas.aizstāt ();

4. Neumorfs teksts un formas

Izmantojiet šos HTML un CSS koda fragmentus, lai izveidotu iepriekšminētos neumorfos tekstus un formas.

HTML kods

Saistīts: Krāpšanās lapa HTML Essentials

Aplis

Virtulis

Kvadrāts

Gluds laukums

Tumbleris

Neumorfs teksts

Laipni lūdzam MUO

CSS kods

Saistīts: Vienkārši CSS koda piemēri, kurus varat uzzināt 10 minūtēs

*, *::pirms pēc {
kastes izmērs: pierobežas kaste;
}
: sakne {
--nColor: #aaa;
--brShadow: -6px 6px 10px rgba (0,0,0,0,5);
--tlShadow: 6px -6px 10px rgba (255,255,255,0,5);
}
ķermenis {
starpība: 0;
fontu saime: sans-serif;
min-augstums: 100vh;
displejs: elastīgs;
align-items: centrs;
attaisnot-saturs: centrs;
flex-wrap: ietīšana;
fons: var (- nColor);
}
.n sākumā
.n-inset {
displejs: elastīgs;
align-items: centrs;
attaisnot-saturs: centrs;
}
.n-aplis {
fona krāsa: var (- nColor);
box-shadow: var (- brShadow), var (- tlShadow);
robežas rādiuss: 50%;
platums: 200px;
augstums: 200 pikseļi;
piemale: 10px;
}
.n-donut {
fona krāsa: var (- nColor);
box-shadow: var (- brShadow), var (- tlShadow);
robežas rādiuss: 50%;
platums: 200px;
augstums: 200 pikseļi;
piemale: 10px;
}
.n-donut .n-inset {
fona krāsa: var (- nColor);
box-shadow: ieliktnis var (- brShadow), ieliktnis var (- tlShadow);
robežas rādiuss: 50%;
platums: 50%;
augstums: 50%;
starpība: 0;
}
.n-tumbler {
fona krāsa: var (- nColor);
box-shadow: var (- brShadow), var (- tlShadow);
robežas rādiuss: 50%;
platums: 200px;
augstums: 200 pikseļi;
piemale: 10px;
}
.n-tumbler .n-outset {
fona krāsa: var (- nColor);
box-shadow: var (- brShadow), var (- tlShadow);
robežas rādiuss: 50%;
platums: 80%;
augstums: 80%;
starpība: 0;
}
.n-square {
fona krāsa: var (- nColor);
box-shadow: var (- brShadow), var (- tlShadow);
robežas rādiuss: 0;
platums: 200px;
augstums: 200 pikseļi;
piemale: 10px;
}
.n-smooth-sq {
fona krāsa: var (- nColor);
box-shadow: var (- brShadow), var (- tlShadow);
robežas rādiuss: 10%;
platums: 200px;
augstums: 200 pikseļi;
piemale: 10px;
}
.n-text {
krāsa: var (- nColor);
teksta ēna: var (- brShadow), var (- tlShadow);
fonta lielums: 6em;
fonta svars: treknrakstā;
}

5. Neumorfās pogas

Lai izveidotu iepriekš minētās neumorfās pogas, izmantojiet šos HTML, CSS un JavaScript koda fragmentus.

HTML kods

Nospiediet pogas




play_arrow


pauze





sajaukt

CSS kods

@import url (' https://fonts.googleapis.com/icon? ģimene = materiāls + ikonas ');
ķermenis {
fona krāsa: # 6ec7ff;
}
.btn-īpašnieks {
displejs: bloks;
margin: 0 auto;
margin-top: 64 pikseļi;
text-align: center;
}
.intro-text {
apmale apakšā: 48 pikseļi;
fontu saime: 'Quicksand', sans-serif;
krāsa: balta;
fonta lielums: 18 pikseļi;
}
.btn {
platums: 110 pikseļi;
augstums: 110 pikseļi;
fonta lielums: 30 pikseļi;
apmales rādiuss: 30 pikseļi;
apmale: nav;
krāsa: balta;
vertikāli-izlīdzināt: augšpusē;
-webkit-pāreja: .6s viegla ieeja;
pāreja: .6s viegla ieeja;
}
.btn: virziet kursoru {
kursors: rādītājs;
}
.btn: fokuss {
kontūra: nav;
}
.btn: pirmā veida {
labā mala: 30 pikseļi;
}
.neumorphic {
fons: lineārs-gradients (145deg, # 76d5ff, # 63b3e6);
box-shadow: 30 pikseļi 30 pikseļi 40 pikseļi # 1e7689,
-30px -30px 40px # 7fe5ff;
apmale: 3px cietā rgba (255, 255, 255, .4);
}
.neumorfiski nospiests {
fons: lineārs-gradients (145deg, # 63b3e6, # 76d5ff);
-webkit-box-shadow: ieliktnis 15px 15px 20px -20px rgba (0,0,0, .5);
-moz-box-shadow: ieliktnis 15px 15px 20px -20px rgba (0,0,0, .5);
box-shadow: ieliktnis 15px 15px 20px -20px rgba (0,0,0, .5);
}
.neororfs: fokuss, .neumorfs: lidināties, .neumorfs: fokuss, .neumorfs: lidināties, .neumorfiski nospiests: fokuss, .neumorfiski nospiests: lidināties {
apmale: 3px cieta rgba (46, 74, 112, .75);
}
.material-icon {
font-family: “Materiālās ikonas”;
fonta svars: normāls;
fonta stils: normāls;
fonta lielums: 32 pikseļi;
displejs: inline-block;
līnijas augstums: 1;
teksta pārveidošana: nav;
burtu atstarpes: normālas;
vārdu ietīšana: normāla;
baltā telpa: nowrap;
virziens: ltr;
-webkit-font-smoothing: antialiased;
teksta atveide: optimizeLegibility;
-moz-osx-font-smoothing: pelēktoņi;
font-feature-settings: 'liga';
}
#pause {
krāsa: # 143664;
displejs: nav;
}

JavaScript kods

funkcija changeStyle (btnPressed) {
var btn = document.getElementById (btnPressed);
btn.classList.toggle ("neumorfs");
btn.classList.toggle ("neumorfiski nospiests");
if (btnPiespiesta 'play-pause') {
spēlēt ();
} else if (btnPiespiests 'shuffle-btn') {
sajaukt ();
}
}
funkciju atskaņošana () {
var playBtn = document.getElementById ('atskaņot');
var pauseBtn = document.getElementById ('pauze');
ja (playBtn.style.display 'nav') {
playBtn.style.display = 'bloķēt';
pauseBtn.style.display = 'nav';
} cits
playBtn.style.display = 'neviens';
pauseBtn.style.display = 'bloķēt';
}
}
funkciju sajaukšana () {
var shuffleBtn = document.getElementById ('shuffle-btn');
ja (shuffleBtn.style.color == 'white' || shuffleBtn.style.color == '') {
shuffleBtn.style.color = '# 143664';
} cits
shuffleBtn.style.color = 'balts';
}
}

Ja vēlaties apskatīt visu šajā rakstā izmantoto avota kodu, šeit ir GitHub krātuve.

Piezīme: Šajā rakstā izmantotais kods ir MIT licencēts.

Veidojiet savu vietni ar neirorfismu

Lai veidotu savu vietni, varat izmantot minimālisma neumorfisma dizaina koncepciju. Tas nodrošina estētiski pievilcīgu izskatu. Bet tomēr neumorfismam ir pieejamības ierobežojumi.

Ir dažādi veidi, kā vietnei piešķirt elegantu izskatu. Ja vēlaties savā vietnē veidot stilīgus lodziņus, dodiet priekšroku CSS lodziņa ēnas īpašumam.

Yuvraj Chandra (Publicēti 33 raksti)

Yuvraj ir datorzinātņu bakalaura students Deli universitātē, Indijā. Viņš aizrauj pilnas skursteņa tīmekļa izstrādi. Kad viņš neraksta, viņš pēta dažādu tehnoloģiju dziļumu.

Vairāk no Yuvraj Chandra