Neumorfizam je novi trend dizajna koji kombinira ravni dizajn i skeuomorfizam. To je minimalan način dizajniranja s mekanom, ekstrudiranom plastikom, gotovo u 3D stilu. Trenutno je ovaj dizajn u trendu putem Interneta i naširoko ga koriste dizajneri i programeri.

Ako želite isprobati neumorfizam za sljedeći projekt, evo nekoliko isječaka koda za početak.

1. Neumorfne karte

Upotrijebite sljedeće isječke HTML i CSS koda za izradu gore navedenih neumorfnih karata.

HTML kod

Oblikovati

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

Čitaj više
















Kodirati

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

Čitaj više
















Pokrenite





instagram viewer


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

Čitaj više

CSS kod

@import url (' https://fonts.googleapis.com/css? obitelj = Poppins: 400,500,600,700,800,900 & display = swap ');
*
{
marža: 0;
popunjavanje: 0;
dimenzioniranje kutije: border-box;
obitelj fontova: 'Poppins', sans-serif;
}
tijelo
{
zaslon: flex;
justify-content: centar;
align-items: sredina;
min-visina: 100vh;
pozadina: # ebf5fc;
}
.kontejner
{
položaj: relativan;
zaslon: flex;
opravdati-sadržaj: prostor oko;
align-items: sredina;
flex-wrap: omot;
širina: 1100px;
}
.kontejner .kartica
{
širina: 320px;
marža: 20px;
podstava: 40px 30px;
pozadina: # ebf5fc;
radijus obruba: 40 piksela;
box-shadow: -6px -6px 20px rgba (255,255,255,1), 6px 6px 20px rgba (0,0,0,0.1);
}
.kontejner .kartica: lebdi
{
box-shadow: umetak -6px -6px 20px rgba (255,255,255,0.5), umetak 6px 6px 20px rgba (0,0,0,0.05);
}
.kontejner .kartica .imgBx
{
položaj: relativan;
poravnanje teksta: središte;
}
.kontejner .kartica .imgBx img
{
maksimalna širina: 120 piksela;
}
.kontejner .kartica .sadržajBx
{
položaj: relativan;
margin-top: 20px;
poravnanje teksta: središte;
}
.kontejner .kartica .sadržajBx h2
{
boja: # 32a3b1;
težina fonta: 700;
veličina fonta: 1,4em;
razmak između slova: 2 piksela;
}
.kontejner .kartica .sadržajBx str
{
boja: # 32a3b1;
}
.kontejner .kartica .sadržajBx a
{
prikaz: inline-block;
podstava: 10px 20px;
margin-top: 15 piksela;
radijus obruba: 40 piksela;
boja: # 32a3b1;
veličina slova: 16px;
ukras teksta: nijedan;
box-shadow: -4px -4px 15px rgba (255,255,255,1), 4px 4px 15px rgba (0,0,0,0.1);
}
.kontejner .kartica .sadržajBx a: hover
{
box-shadow: umetak -4px -4px 10px rgba (255,255,255,0.5), umetak 4px 4px 10px rgba (0,0,0,0.1);
}
.kontejner .kartica a: hover span
{
prikaz: blok;
transformacija: ljestvica (0,98);
}
.container .card: hover .imgBx,
.kontejner .kartica: hover .contentBx
{
transformacija: ljestvica (0,98);
}

2. Neumorfni oblik

Upotrijebite sljedeće isječke HTML i CSS koda za izradu gore navedenog neumorfnog oblika.

HTML kod

Prijavite se










 Prijaviti se

CSS kod

tijelo, html {
boja pozadine: # EBECF0;
}
body, p, input, select, textarea, button {
obitelj fontova: "Montserrat", sans-serif;
razmak između slova: -0,2 piksela;
veličina slova: 16px;
}
div, p {
boja: #BABECC;
sjena teksta: 1px 1px 1px #FFF;
}
obrazac {
popunjavanje: 16 piksela;
širina: 320px;
marža: 0 auto;
}
.segment {
popunjavanje: 32 piksela 0;
poravnanje teksta: središte;
}
gumb, unesite {
obrub: 0;
obris: 0;
veličina slova: 16px;
radijus obruba: 320px;
popunjavanje: 16 piksela;
boja pozadine: # EBECF0;
sjena teksta: 1px 1px 0 #FFF;
}
oznaka {
prikaz: blok;
margina-dno: 24 piksela;
širina: 100%;
}
unos {
margina-desno: 8 piksela;
box-shadow: umetak 2px 2px 5px #BABECC, umetak -5px -5px 10px #FFF;
širina: 100%;
dimenzioniranje kutije: border-box;
prijelaz: svih 0,2 s lakoćom ulaska-izlaska;
izgled: nema;
-webkit-izgled: nema;
}
input: focus {
box-shadow: umetak 1px 1px 2px #BABECC, umetak -1px -1px 2px #FFF;
}
dugme {
boja: # 61677C;
font-weight: podebljano;
box-shadow: -5px -5px 20px #FFF, 5px 5px 20px #BABECC;
prijelaz: svih 0,2 s lakoćom ulaska-izlaska;
kursor: pokazivač;
težina fonta: 600;
}
button: hover {
box-shadow: -2px -2px 5px #FFF, 2px 2px 5px #BABECC;
}
gumb: aktivan {
box-shadow: umetak 1px 1px 2px #BABECC, umetak -1px -1px 2px #FFF;
}
button .icon {
margina-desno: 8 piksela;
}
button.unit {
radijus obruba: 8 piksela;
visina crte: 0;
širina: 48px;
visina: 48px;
zaslon: inline-flex;
justify-content: centar;
align-items: sredina;
marža: 0 8px;
veličina slova: 19,2 piksela;
}
button.unit .icon {
margina-desno: 0;
}
button.red {
prikaz: blok;
širina: 100%;
boja: # AE1100;
}
.input-group {
zaslon: flex;
align-items: sredina;
justify-content: flex-start;
}
.input-group label {
marža: 0;
fleks: 1;
}

3. Neumorfni Navbar

Upotrijebite sljedeće isječke HTML, CSS i JavaScript koda za stvaranje gornje neumorfne navbar.

HTML kod

Povezano: Primjeri najboljih web mjesta za kvalitetno HTML kodiranje

Neumorfni Navbar

CSS kod

* {
marža: 0;
popunjavanje: 0;
dimenzioniranje kutije: border-box;
}
tijelo {
boja pozadine: #efeeee;
}
.nav {
širina: 100vw;
visina: 100px;
boja pozadine: #efeeee;
box-shadow: 10px 10px 12px 0 rgba (0, 0, 0, 0,07);
radijus obruba: 0 0 10px 10px;
zaslon: flex;
justify-content: flex-end;
align-items: sredina;
podstava: 0 3rem;
vrsta stila popisa: nema;
}
.nav li.logo {
margina-desno: auto;
obitelj fontova: "Roboto", sans-serif;
veličina slova: 1,5rem;
boja: dimgray;
težina fonta: 900;
text-shadow: 2px 2px 4px rgba (0, 0, 0, 0.3), -2px -2px 4px bijela;
}
.nav li: not (.logo) {
marža: 0 1rem;
podstava: 0,5rem 1,5rem;
obrub: 2px čvrsti rgba (255, 255, 255, 0,3);
box-shadow: 4px 4px 6px 0 rgba (0, 0, 0, 0,1), -4px -4px 6px bijela;
radijus obruba: 10 piksela;
obitelj fontova: "Roboto", sans-serif;
kursor: pokazivač;
prijelaz: ublažavanje boje 0,2 s, ublažavanje preobrazbe 0,2 s;
boja: dimgray;
}
.nav li: not (.logo): hover {
transformacija: ljestvica (1,05);
box-shadow: 4px 4px 10px 0 rgba (0, 0, 0, 0,1), -4px -4px 10px bijela;
}
.nav li: not (.logo): focus {
obris: nema;
pretvoriti: ljestvica (0,95);
box-shadow: 4px 4px 10px 0 rgba (0, 0, 0, 0.1), -4px -4px 10px bijela, 4px 4px 10px 0 rgba (0, 0, 0, 0.1) uložak, -4px -4px 10px bijeli uložak;
}
.nav li: not (.logo): hover, .nav li: not (.logo): focus {
boja: narančasto;
}

JavaScript kod

feather.replace ();

4. Neumorfni tekst i oblici

Upotrijebite sljedeće isječke HTML i CSS koda za izradu gore navedenog neumorfnog teksta i oblika.

HTML kod

Povezano: HTML Essentials varalica

Krug

Krafna

Kvadrat

Glatki kvadrat

Pelivan

Neumorfni tekst

Dobrodošli u MUO

CSS kod

Povezano: Jednostavni primjeri CSS koda koje možete naučiti u 10 minuta

*, *::prije poslije {
dimenzioniranje kutije: border-box;
}
: root {
--nColor: #aaa;
--brShadow: -6px 6px 10px rgba (0,0,0,0,5);
--tlShadow: 6px -6px 10px rgba (255,255,255,0,5);
}
tijelo {
marža: 0;
obitelj fontova: sans-serif;
min-visina: 100vh;
zaslon: flex;
align-items: sredina;
justify-content: centar;
flex-wrap: omot;
pozadina: var (- nColor);
}
.n-outset,
.n-inset {
zaslon: flex;
align-items: sredina;
justify-content: centar;
}
.n-krug {
boja pozadine: var (- nColor);
sjena okvira: var (- brShadow), var (- tlShadow);
granica-radijus: 50%;
širina: 200px;
visina: 200px;
marža: 10 piksela;
}
.n-krafna {
boja pozadine: var (- nColor);
sjena okvira: var (- brShadow), var (- tlShadow);
granica-radijus: 50%;
širina: 200px;
visina: 200px;
marža: 10 piksela;
}
.n-krafna .n-uložak {
boja pozadine: var (- nColor);
kutija-sjena: umetak var (- brShadow), umetak var (- tlShadow);
granica-radijus: 50%;
širina: 50%;
visina: 50%;
marža: 0;
}
.n-tumbler {
boja pozadine: var (- nColor);
sjena okvira: var (- brShadow), var (- tlShadow);
granica-radijus: 50%;
širina: 200px;
visina: 200px;
marža: 10 piksela;
}
.n-tumbler .n-outset {
boja pozadine: var (- nColor);
sjena okvira: var (- brShadow), var (- tlShadow);
granica-radijus: 50%;
širina: 80%;
visina: 80%;
marža: 0;
}
.n-kvadrat {
boja pozadine: var (- nColor);
sjena okvira: var (- brShadow), var (- tlShadow);
granica-radijus: 0;
širina: 200px;
visina: 200px;
marža: 10 piksela;
}
.n-glatko-sq {
boja pozadine: var (- nColor);
sjena okvira: var (- brShadow), var (- tlShadow);
granica-radijus: 10%;
širina: 200px;
visina: 200px;
marža: 10 piksela;
}
.n-text {
boja: var (- nColor);
sjena teksta: var (- brShadow), var (- tlShadow);
veličina slova: 6em;
font-weight: podebljano;
}

5. Neumorfni gumbi

Upotrijebite sljedeće isječke HTML, CSS i JavaScript za stvaranje gore navedenih neumorfnih gumba.

HTML kod

Pritisnite tipke




play_arrow


pauza





promiješati

CSS kod

@import url (' https://fonts.googleapis.com/icon? obitelj = Materijal + Ikone ');
tijelo{
boja pozadine: # 6ec7ff;
}
.btn-holder {
prikaz: blok;
marža: 0 auto;
margin-top: 64px;
poravnanje teksta: središte;
}
.intro-text {
margina-dno: 48 piksela;
obitelj fontova: 'Živi pijesak', sans-serif;
boja: bijela;
veličina fonta: 18px;
}
.btn {
širina: 110px;
visina: 110px;
veličina fonta: 30px;
radijus obruba: 30 piksela;
granica: nema;
boja: bijela;
okomito poravnanje: vrh;
-webkit-prijelaz: .6s lakoća ulaska-out;
prijelaz: .6s lakoća ulaska-out;
}
.btn: hover {
kursor: pokazivač;
}
.btn: focus {
obris: nema;
}
.btn: prva vrsta {
margina-desno: 30 piksela;
}
.neumorphic {
pozadina: linearni gradijent (145deg, # 76d5ff, # 63b3e6);
box-shadow: 30px 30px 40px # 1e7689,
-30px -30px 40px # 7fe5ff;
obrub: 3px solid rgba (255, 255, 255, .4);
}
. pneumorfno prešani {
pozadina: linearni gradijent (145deg, # 63b3e6, # 76d5ff);
-webkit-box-shadow: umetak 15px 15px 20px -20px rgba (0,0,0, .5);
-moz-box-shadow: umetak 15px 15px 20px -20px rgba (0,0,0, .5);
box-shadow: umetak 15px 15px 20px -20px rgba (0,0,0, .5);
}
.neumorphic: focus, .neumorphic: hover, .neumorphic: focus, .neumorphic: hover, .neumorphic-Press: focus, .neumorphic-Press: hover {
obrub: 3px čvrsti rgba (46, 74, 112, .75);
}
.material-icon {
obitelj fontova: 'Ikone materijala';
težina fonta: normalno;
stil fonta: normalan;
veličina slova: 32px;
prikaz: inline-block;
visina crte: 1;
transformacija teksta: nema;
razmak između slova: normalno;
oblaganje riječima: normalno;
razmak: sadako;
smjer: ltr;
-webkit-font-glađenje: antialiased;
prikazivanje teksta: optimizeLegibility;
-moz-osx-glačanje fonta: sive boje;
postavke značajke fonta: 'liga';
}
#pause {
boja: # 143664;
zaslon: nema;
}

JavaScript kod

function changeStyle (btnPress) {
var btn = document.getElementById (btnPress);
btn.classList.toggle ("neumorfni");
btn.classList.toggle ("neumorfno pritisnuto");
if (btnPress 'play-pause') {
igra();
} else if (btnPress 'shuffle-btn') {
promiješati ();
}
}
funkcija reprodukcije () {
var playBtn = document.getElementById ('reproduciraj');
var pauseBtn = document.getElementById ('pauza');
if (playBtn.style.display 'none') {
playBtn.style.display = 'blokiraj';
pauseBtn.style.display = 'nema';
} ostalo {
playBtn.style.display = 'nema';
pauseBtn.style.display = 'blokiraj';
}
}
shuffle funkcije () {
var shuffleBtn = document.getElementById ('shuffle-btn');
if (shuffleBtn.style.color == 'white' || shuffleBtn.style.color == '') {
shuffleBtn.style.color = '# 143664';
} ostalo {
shuffleBtn.style.color = 'bijelo';
}
}

Ako želite pogledati cjeloviti izvorni kod korišten u ovom članku, ovdje je GitHub spremište.

Bilješka: Kôd korišten u ovom članku je MIT licenciran.

Oblikujte svoju web stranicu neumorfizmom

Za oblikovanje svoje web stranice možete koristiti minimalistički koncept dizajna neumorfizma. Pruža estetski ugodan izgled. Ali ipak, neumorfizam ima ograničenja pristupačnosti.

Postoje različiti načini kako web mjestu dati elegantan izgled. Ako želite oblikovati nepristojne okvire na svojoj web stranici, pokrenite CSS svojstvo box-shadow.

Yuvraj Chandra (Objavljeni članci 33)

Yuvraj je studentica preddiplomskog studija računarstva na Sveučilištu u Delhiju u Indiji. Zaljubljen je u Full Stack web razvoj. Kad ne piše, istražuje dubinu različitih tehnologija.

Više od Yuvraja Chandre