Neumorfism on uus disainisuund, mis ühendab lameda kujunduse ja skeuomorfismi. See on minimaalne võimalus kujundada pehme, pressitud plastist, peaaegu 3D-stiilis välimusega. Praegu on see disain Interneti kaudu populaarne ja seda kasutavad disainerid ja arendajad laialdaselt.

Kui soovite oma järgmise projekti jaoks neumorfismi proovida, saate siin alustamiseks mõned koodijupid.

1. Neumorfsed kaardid

Kasutage ülaltoodud neumorfsete kaartide loomiseks järgmisi HTML- ja CSS-koodilõike.

HTML-kood

Kujundus

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

Loe rohkem
















Kood

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

Loe rohkem










instagram viewer












Käivitage

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

Loe rohkem

CSS-kood

@impl url (' https://fonts.googleapis.com/css? perekond = Poppins: 400,500,600,700,800,900 & display = swap ');
*
{
varu: 0;
polster: 0;
kasti suurus: äärekast;
font-perekond: 'Poppins', sans-serif;
}
keha
{
kuva: painduv;
õigusta-sisu: keskus;
joondavad elemendid: keskel;
min-kõrgus: 100vh;
taust: # ebf5fc;
}
.konteiner
{
positsioon: sugulane;
kuva: painduv;
õigusta-sisu: ruumi ümber;
joondavad elemendid: keskel;
paindmähis: mähis;
laius: 1100px;
}
.konteiner .kaart
{
laius: 320px;
veeris: 20px;
polster: 40px 30px;
taust: # ebf5fc;
piiri raadius: 40px;
kasti vari: -6px -6px 20px rgba (255,255,255,1), 6px 6px 20px rgba (0,0,0,0,1);
}
.konteiner .kaart: hõljutage kursorit
{
box-shadow: sisestatud -6px -6px 20px rgba (255255255,0,5), sisestatud 6px 6px 20px rgba (0,0,0,0,05);
}
.konteiner .kaart .imgBx
{
positsioon: sugulane;
teksti joondamine: keskel;
}
.konteiner .kaart .imgBx img
{
max laius: 120px;
}
.konteiner .kaart .sisaldusBx
{
positsioon: sugulane;
ülemine serv: 20 pikslit;
teksti joondamine: keskel;
}
.konteiner .kaart .sisaldusBx h2
{
värv: # 32a3b1;
fondi kaal: 700;
fondi suurus: 1,4em;
kirjavahe: 2px;
}
.konteiner .kaart .sisaldusBx lk
{
värv: # 32a3b1;
}
.konteiner .kaart .sisaldusBx a
{
kuva: sisemine-plokk;
polster: 10px 20px;
ülemine serv: 15 pikslit;
piiri raadius: 40px;
värv: # 32a3b1;
fondi suurus: 16px;
teksti kaunistamine: puudub;
kast-vari: -4px -4px 15px rgba (255,255,255,1), 4px 4px 15px rgba (0,0,0,0,1);
}
.container .card .contentBx a: hõljutage kursorit
{
box-shadow: sisestatud -4px -4px 10px rgba (255255255,0,5), sisestatud 4px 4px 10px rgba (0,0,0,0,1);
}
.konteiner .kaart a: hõljumine
{
kuva: plokk;
teisendus: skaala (0,98);
}
.container .card: hõljutage kursorit .imgBx,
.container .card: hõljutage kursorit .contentBx
{
teisendus: skaala (0,98);
}

2. Neumorfne vorm

Kasutage ülaltoodud neumorfse vormi loomiseks järgmisi HTML- ja CSS-koodilõike.

HTML-kood

Registreeri










 Logi sisse

CSS-kood

keha, html {
taustavärv: # EBECF0;
}
body, p, input, select, textarea, button {
font-perekond: "Montserrat", sans-serif;
kirjavahe: -0,2px;
fondi suurus: 16px;
}
div, p {
värv: #BABECC;
teksti vari: 1px 1px 1px #FFF;
}
vorm {
polster: 16px;
laius: 320px;
veeris: 0 automaatne;
}
.segment {
polster: 32px 0;
teksti joondamine: keskel;
}
nupp, sisend {
piir: 0;
kontuur: 0;
fondi suurus: 16px;
piiri raadius: 320 pikslit;
polster: 16px;
taustavärv: # EBECF0;
teksti vari: 1px 1px 0 #FFF;
}
silt {
kuva: plokk;
alumine serv: 24 pikslit;
laius: 100%;
}
sisend {
paremäär: 8px;
box-shadow: sisestatud 2px 2px 5px #BABECC, inset -5px -5px 10px #FFF;
laius: 100%;
kasti suurus: äärekast;
üleminek: kõik 0,2s hõlbustavad sisse-välja;
välimus: puudub;
-veebikomplekti välimus: puudub;
}
sisend: fookus {
box-shadow: sisesta 1px 1px 2px #BABECC, inset -1px -1px 2px #FFF;
}
nupp {
värv: # 61677C;
fondi kaal: paks;
box-shadow: -5px -5px 20px #FFF, 5px 5px 20px #BABECC;
üleminek: kõik 0,2s hõlbustavad sisse-välja;
kursor: osuti;
fondi kaal: 600;
}
nupp: hõljutage kursorit {
kasti vari: -2px -2px 5px #FFF, 2px 2px 5px #BABECC;
}
nupp: aktiivne {
box-shadow: sisesta 1px 1px 2px #BABECC, inset -1px -1px 2px #FFF;
}
nupp .ikon {
paremäär: 8px;
}
button.unit {
piiri raadius: 8px;
joone kõrgus: 0;
laius: 48px;
kõrgus: 48px;
kuva: inline-flex;
õigusta-sisu: keskus;
joondavad elemendid: keskel;
veeris: 0 8px;
fondi suurus: 19,2 pikslit;
}
button.unit .icon {
paremäär: 0;
}
button.red {
kuva: plokk;
laius: 100%;
värv: # AE1100;
}
.input-group {
kuva: painduv;
joondavad elemendid: keskel;
õigustama-sisu: flex-start;
}
.input-group silt {
varu: 0;
painduma: 1;
}

3. Neumorfne navbar

Kasutage ülaltoodud neumorfse navariba loomiseks järgmisi HTML-, CSS- ja JavaScripti koodilõike.

HTML-kood

Seotud: Parimad saidid kvaliteetsete HTML-kodeerimisnäidete jaoks

Neumorfne navbar

CSS-kood

* {
varu: 0;
polster: 0;
kasti suurus: äärekast;
}
keha {
taustavärv: #efeeee;
}
.nav {
laius: 100vw;
kõrgus: 100px;
taustavärv: #efeeee;
box-shadow: 10px 10px 12px 0 rgba (0, 0, 0, 0,07);
piiri raadius: 0 0 10 pikslit 10 pikslit;
kuva: painduv;
õigusta-sisu: painduv ots;
joondavad elemendid: keskel;
polster: 0 3rem;
list-style-type: puudub;
}
.nav li.logo {
paremäär: parem;
font-perekond: "Roboto", sans-serif;
fondi suurus: 1,5rem;
värv: tumehall;
fondi kaal: 900;
teksti vari: 2px 2px 4px rgba (0, 0, 0, 0,3), -2px -2px 4px valge;
}
.nav li: not (.logo) {
varu: 0 1rem;
polster: 0,5rem 1,5rem;
ääris: 2px tahke rgba (255, 255, 255, 0,3);
box-shadow: 4px 4px 6px 0 rgba (0, 0, 0, 0,1), -4px -4px 6px valge;
piiri raadius: 10 pikslit;
font-perekond: "Roboto", sans-serif;
kursor: osuti;
üleminek: värv 0,2s kergendab, teisendab 0,2s kergendab;
värv: tumehall;
}
.nav li: not (.logo): hõljutage {
teisendus: skaala (1,05);
box-shadow: 4px 4px 10px 0 rgba (0, 0, 0, 0,1), -4px -4px 10px valge;
}
.nav li: not (.logo): fookus {
kontuur: puudub;
teisendus: skaala (0,95);
box-shadow: 4px 4px 10px 0 rgba (0, 0, 0, 0,1), -4px -4px 10px valge, 4px 4px 10px 0 rgba (0, 0, 0, 0,1) sisetüki, -4px -4px 10px valget sisestust;
}
.nav li: not (.logo): hõljumine, .nav li: not (.logo): fookus {
värv: oranž;
}

JavaScripti kood

sulg.asendus ();

4. Neumorfne tekst ja kujundid

Kasutage ülaltoodud neumorfse teksti ja kujundite loomiseks järgmisi HTML- ja CSS-koodilõike.

HTML-kood

Seotud: HTML Essentialsi petulehekülg

Ring

Sõõrik

Ruut

Sile väljak

Tumbler

Neumorfne tekst

Tere tulemast MUO-sse

CSS-kood

Seotud: Lihtsad CSS-koodinäited, mida saate õppida 10 minutiga

*, *::enne pärast {
kasti suurus: äärekast;
}
: juur {
--nColor: #aaa;
--brShadow: -6px 6px 10px rgba (0,0,0,0,5);
--tlShadow: 6px -6px10px rgba (255,255,255,0,5);
}
keha {
varu: 0;
font-perekond: sans-serif;
min-kõrgus: 100vh;
kuva: painduv;
joondavad elemendid: keskel;
õigusta-sisu: keskus;
paindmähis: mähis;
taust: var (- nColor);
}
.n algusest peale,
.n-inset {
kuva: painduv;
joondavad elemendid: keskel;
õigusta-sisu: keskus;
}
.n-ring {
taustavärv: var (- nColor);
box-shadow: var (- brShadow), var (- tlShadow);
piiri raadius: 50%;
laius: 200px;
kõrgus: 200px;
veeris: 10px;
}
.n-sõõrik {
taustavärv: var (- nColor);
box-shadow: var (- brShadow), var (- tlShadow);
piiri raadius: 50%;
laius: 200px;
kõrgus: 200px;
veeris: 10px;
}
.n-sõõrik .n-sisestatud {
taustavärv: var (- nColor);
kasti-vari: inset var (- brShadow), inset var (- tlShadow);
piiri raadius: 50%;
laius: 50%;
kõrgus: 50%;
varu: 0;
}
.n-tumbler {
taustavärv: var (- nColor);
box-shadow: var (- brShadow), var (- tlShadow);
piiri raadius: 50%;
laius: 200px;
kõrgus: 200px;
veeris: 10px;
}
.n-tumbler .n-outset {
taustavärv: var (- nColor);
box-shadow: var (- brShadow), var (- tlShadow);
piiri raadius: 50%;
laius: 80%;
kõrgus: 80%;
varu: 0;
}
.n-ruut {
taustavärv: var (- nColor);
box-shadow: var (- brShadow), var (- tlShadow);
piiri raadius: 0;
laius: 200px;
kõrgus: 200px;
veeris: 10px;
}
.n-smooth-sq {
taustavärv: var (- nColor);
box-shadow: var (- brShadow), var (- tlShadow);
piiri raadius: 10%;
laius: 200px;
kõrgus: 200px;
veeris: 10px;
}
.n-text {
värv: var (- nColor);
teksti vari: var (- brShadow), var (- tlShadow);
fondi suurus: 6em;
fondi kaal: paks;
}

5. Neumorfsed nupud

Kasutage ülaltoodud neumorfsete nuppude loomiseks järgmisi HTML-, CSS- ja JavaScripti koodilõike.

HTML-kood

Vajutage nuppe




play_arrow


paus





segama

CSS-kood

@impl url (' https://fonts.googleapis.com/icon? perekond = materjal + ikoonid ');
keha {
taustavärv: # 6ec7ff;
}
.btn-omanik {
kuva: plokk;
veeris: 0 automaatne;
ülemine serv: 64 pikslit;
teksti joondamine: keskel;
}
.intro-text {
alumine serv: 48 pikslit;
font-perekond: 'Quicksand', sans-serif;
värvus: valge;
fondi suurus: 18 pikslit;
}
.btn {
laius: 110px;
kõrgus: 110px;
fondi suurus: 30 pikslit;
piiri raadius: 30 pikslit;
piir: puudub;
värvus: valge;
vertikaalne joondus: ülemine;
-veebikomplekt-üleminek: .6s hõlpsasti sisse-välja;
üleminek: .6s hõlpsasti sisse-välja;
}
.btn: hõljutage kursorit {
kursor: osuti;
}
.btn: fookus {
kontuur: puudub;
}
.btn: esimene tüüp {
paremäär: 30px;
}
.neumorfne {
taust: lineaarne gradient (145deg, # 76d5ff, # 63b3e6);
box-shadow: 30px 30px 40px # 1e7689,
-30px -30px40px # 7fe5ff;
ääris: 3px tahke rgba (255, 255, 255, .4);
}
.neumorfselt pressitud {
taust: lineaarne gradient (145deg, # 63b3e6, # 76d5ff);
-webkit-box-shadow: sisestatud 15px 15px 20px -20px rgba (0,0,0, .5);
-moz-box-shadow: sisestatud 15px 15px 20px -20px rgba (0,0,0, .5);
box-shadow: sisestatud 15px 15px 20px -20px rgba (0,0,0, .5);
}
.neumorfne: fookus, .neumorfne: hõljumine, .neumorfne: fookus, .neumorfne: hõljumine, .neumorfne vajutamine: fookus, .neumorfne vajutamine: hõljumine {
piir: 3px tahke rgba (46, 74, 112, 0,75);
}
.material-icon {
font-family: 'Materiaalsed ikoonid';
fondi kaal: normaalne;
fondi stiil: tavaline;
fondi suurus: 32px;
kuva: sisemine-plokk;
joone kõrgus: 1;
teksti muundamine: puudub;
kirjavahe: tavaline;
sõna mähis: normaalne;
tühik: nowrap;
suund: ltr;
-webkit-font-silumine: antialiased;
teksti renderdamine: optimizeLegibility;
-moz-osx-font-silumine: halltoon;
font-feature-settings: 'liga';
}
#pause {
värv: # 143664;
kuva: puudub;
}

JavaScripti kood

funktsioon changeStyle (btnPressed) {
var btn = document.getElementById (btnPressed);
btn.classList.toggle ("neumorfne");
btn.classList.toggle ("neumorfselt surutud");
if (btnPressitud 'play-pause') {
mängima ();
} else if (btnPressitud 'shuffle-btn') {
segama ();
}
}
funktsiooni esitamine () {
var playBtn = document.getElementById ('esita');
var pauseBtn = document.getElementById ('paus');
if (playBtn.style.display 'puudub') {
playBtn.style.display = 'blokeeri';
pauseBtn.style.display = 'puudub';
} muu {
playBtn.style.display = 'pole';
pauseBtn.style.display = 'blokeeri';
}
}
funktsiooni segamine () {
var shuffleBtn = document.getElementById ('shuffle-btn');
kui (shuffleBtn.style.color == 'valge' || shuffleBtn.style.color == '') {
shuffleBtn.style.color = '# 143664';
} muu {
shuffleBtn.style.color = 'valge';
}
}

Kui soovite vaadata selles artiklis kasutatud täielikku lähtekoodi, siis siin GitHubi hoidla.

Märge: Selles artiklis kasutatud kood on MIT litsentsitud.

Tehke oma veebisaidile stiil neumorfismiga

Veebisaidi kujundamiseks võite kasutada minimalistlikku neumorfismi kujunduskontseptsiooni. See pakub esteetiliselt meeldivat välimust. Kuid ikkagi on neumorfismil juurdepääsetavuse piirangud.

Veebisaidile elegantse ilme andmiseks on erinevaid viise. Kui soovite oma veebisaidil stiilseid kaste kujundada, andke kastivari CSS-i atribuudile võimalus.

Yuvraj Chandra (33 artiklit on avaldatud)

Yuvraj on arvutiteaduse eriala üliõpilane Delhis, Indias. Ta on kirglik Full Stacki veebiarenduse vastu. Kui ta ei kirjuta, uurib ta erinevate tehnoloogiate sügavust.

Veel Yuvraj Chandrast