Nevmorfizem je nov oblikovalski trend, ki združuje ravno obliko in skeuomorfizem. To je minimalen način oblikovanja z mehko, ekstrudirano plastiko, skoraj v 3D-videzu. Trenutno je ta zasnova priljubljena po internetu in jo pogosto uporabljajo oblikovalci in razvijalci.

Če želite preizkusiti nevmorfizem za naslednji projekt, je tukaj nekaj delčkov kode za začetek.

1. Neumorfne karte

Za ustvarjanje zgornjih neumorfnih kartic uporabite naslednje delčke kode HTML in CSS.

HTML koda

Oblikovanje

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

Preberi več
















Koda

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

Preberi več










instagram viewer












Kosilo

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

Preberi več

Koda CSS

@import url (' https://fonts.googleapis.com/css? družina = Poppins: 400,500,600,700,800,900 & display = swap ');
*
{
marža: 0;
oblazinjenje: 0;
velikost škatle: border-box;
družina pisav: 'Poppins', sans-serif;
}
telo
{
zaslon: flex;
upraviči vsebino: center;
align-items: center;
min-višina: 100vh;
ozadje: # ebf5fc;
}
.kontejner
{
položaj: sorodnik;
zaslon: flex;
justify-content: space-around;
align-items: center;
upogibanje: zavijanje;
širina: 1100px;
}
.container .card
{
širina: 320px;
marža: 20 slikovnih pik;
oblazinjenje: 40px 30px;
ozadje: # ebf5fc;
polmer obrobe: 40 slikovnih pik;
box-shadow: -6px -6px 20px rgba (255,255,255,1), 6px 6px 20px rgba (0,0,0,0.1);
}
.container .card: hover
{
box-shadow: vložek -6px -6px 20px rgba (255,255,255,0.5), vložek 6px 6px 20px rgba (0,0,0,0.05);
}
.kontejner .card .imgBx
{
položaj: sorodnik;
poravnava besedila: sredina;
}
.container .card .imgBx img
{
največja širina: 120 slikovnih pik;
}
.container .card .contentBx
{
položaj: sorodnik;
margin-top: 20px;
poravnava besedila: sredina;
}
.container .card .contentBx h2
{
barva: # 32a3b1;
teža pisave: 700;
velikost pisave: 1.4em;
razmik med črkami: 2 slikovnih pik;
}
.container .card .contentBx str
{
barva: # 32a3b1;
}
.container .card .contentBx a
{
zaslon: vrstni blok;
oblazinjenje: 10px 20px;
margin-top: 15 slikovnih pik;
polmer obrobe: 40 slikovnih pik;
barva: # 32a3b1;
velikost pisave: 16px;
dekoracija besedila: nobena;
box-shadow: -4px -4px 15px rgba (255,255,255,1), 4px 4px 15px rgba (0,0,0,0.1);
}
.container .card .contentBx a: hover
{
box-shadow: vložek -4px -4px 10px rgba (255,255,255,0.5), vložek 4px 4px 10px rgba (0,0,0,0,1);
}
.container .card a: hover span
{
zaslon: blok;
pretvorba: lestvica (0,98);
}
.container .card: hover .imgBx,
.container .card: hover .contentBx
{
pretvorba: lestvica (0,98);
}

2. Nevorfna oblika

Z naslednjimi delčki kode HTML in CSS ustvarite zgornji neumorfni obrazec.

HTML koda

Prijavite se










 Vpiši se

Koda CSS

telo, html {
barva ozadja: # EBECF0;
}
body, p, input, select, textarea, button {
družina pisav: "Montserrat", sans-serif;
razmik med črkami: -0,2 slikovnih pik;
velikost pisave: 16px;
}
div, p {
barva: #BABECC;
text-shadow: 1px 1px 1px #FFF;
}
oblika {
oblazinjenje: 16 slikovnih pik;
širina: 320px;
marža: 0 samodejno;
}
.segment {
oblazinjenje: 32 slikovnih pik 0;
poravnava besedila: sredina;
}
gumb, vnesite {
meja: 0;
oris: 0;
velikost pisave: 16px;
polmer obrobe: 320 slikovnih pik;
oblazinjenje: 16 slikovnih pik;
barva ozadja: # EBECF0;
text-shadow: 1px 1px 0 #FFF;
}
oznaka {
zaslon: blok;
margin-bottom: 24 slikovnih pik;
širina: 100%;
}
vnos {
rob desno: 8 slikovnih pik;
box-shadow: vložek 2px 2px 5px #BABECC, vložek -5px -5px 10px #FFF;
širina: 100%;
velikost škatle: border-box;
prehod: vseh 0,2-ih sprostitev;
videz: noben;
-webkit-izgled: noben;
}
input: focus {
box-shadow: vložek 1px 1px 2px #BABECC, vložek -1px -1px 2px #FFF;
}
gumb {
barva: # 61677C;
teža pisave: krepko;
box-shadow: -5px -5px 20px #FFF, 5px 5px 20px #BABECC;
prehod: vseh 0,2-ih sprostitev;
kazalec: kazalec;
teža pisave: 600;
}
button: hover {
box-shadow: -2px -2px 5px #FFF, 2px 2px 5px #BABECC;
}
gumb: aktiven {
box-shadow: vložek 1px 1px 2px #BABECC, vložek -1px -1px 2px #FFF;
}
button .icon {
rob desno: 8 slikovnih pik;
}
button.unit {
polmer obrobe: 8 slikovnih pik;
višina črte: 0;
širina: 48px;
višina: 48px;
zaslon: inline-flex;
upraviči vsebino: center;
align-items: center;
marža: 0 8px;
velikost pisave: 19,2 slikovnih pik;
}
button.unit .icon {
rob desno: 0;
}
button.red {
zaslon: blok;
širina: 100%;
barva: # AE1100;
}
.input-group {
zaslon: flex;
align-items: center;
justify-content: flex-start;
}
.input-group label {
marža: 0;
upogibanje: 1;
}

3. Nevorfni Navbar

Uporabite naslednje delčke kode HTML, CSS in JavaScript za ustvarjanje zgornje neumorfne vrstice za krmarjenje.

HTML koda

Sorodno: Najboljša spletna mesta za primere kakovostnega HTML kodiranja

Nevorfni Navbar

Koda CSS

* {
marža: 0;
oblazinjenje: 0;
velikost škatle: border-box;
}
telo {
barva ozadja: #efeeee;
}
.nav {
širina: 100vw;
višina: 100px;
barva ozadja: #efeeee;
box-shadow: 10px 10px 12px 0 rgba (0, 0, 0, 0,07);
mejni polmer: 0 0 10px 10px;
zaslon: flex;
upraviči vsebino: flex-end;
align-items: center;
oblazinjenje: 0 3rem;
list-style-type: noben;
}
.nav li.logo {
rob desno: samodejno;
družina pisav: "Roboto", sans-serif;
velikost pisave: 1.5rem;
barva: dimgray;
teža pisave: 900;
text-shadow: 2px 2px 4px rgba (0, 0, 0, 0.3), -2px -2px 4px bela;
}
.nav li: not (.logo) {
marža: 0 1rem;
oblazinjenje: 0,5rem 1,5rem;
obroba: 2px trdna rgba (255, 255, 255, 0,3);
box-shadow: 4px 4px 6px 0 rgba (0, 0, 0, 0.1), -4px -4px 6px bela;
polmer obrobe: 10 slikovnih pik;
družina pisav: "Roboto", sans-serif;
kazalec: kazalec;
prehod: sprostitev barv 0,2s, sprostitev 0,2s;
barva: dimgray;
}
.nav li: not (.logo): hover {
preoblikovanje: lestvica (1,05);
box-shadow: 4px 4px 10px 0 rgba (0, 0, 0, 0.1), -4px -4px 10px bela;
}
.nav li: not (.logo): focus {
oris: noben;
pretvorba: lestvica (0,95);
box-shadow: 4px 4px 10px 0 rgba (0, 0, 0, 0.1), -4px -4px 10px bela, 4px 4px 10px 0 rgba (0, 0, 0, 0.1) vložek, -4px -4px 10px bela vstavka;
}
.nav li: not (.logo): hover, .nav li: not (.logo): focus {
barva: oranžno rdeča;
}

Koda JavaScript

feather.replace ();

4. Neumorfno besedilo in oblike

Z naslednjimi delčki kode HTML in CSS ustvarite zgornje neumorfno besedilo in oblike.

HTML koda

Sorodno: HTML Essentials Cheat Sheet

Krog

Krof

Kvadrat

Gladki kvadrat

Tumbler

Nevorfno besedilo

Dobrodošli v MUO

Koda CSS

Sorodno: Primeri preprostih kod CSS, ki se jih lahko naučite v 10 minutah

*, *::prej potem {
velikost škatle: 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);
}
telo {
marža: 0;
družina pisav: sans-serif;
min-višina: 100vh;
zaslon: flex;
align-items: center;
upraviči vsebino: center;
upogibanje: zavijanje;
ozadje: var (- nColor);
}
.n-outset,
.n-inset {
zaslon: flex;
align-items: center;
upraviči vsebino: center;
}
.n-circle {
barva ozadja: var (- nColor);
box-shadow: var (- brShadow), var (- tlShadow);
polmer meje: 50%;
širina: 200px;
višina: 200px;
marža: 10 slikovnih pik;
}
.n-krof {
barva ozadja: var (- nColor);
box-shadow: var (- brShadow), var (- tlShadow);
polmer meje: 50%;
širina: 200px;
višina: 200px;
marža: 10 slikovnih pik;
}
.n-donut .n-inset {
barva ozadja: var (- nColor);
box-shadow: vstavi var (- brShadow), vstavi var (- tlShadow);
polmer meje: 50%;
širina: 50%;
višina: 50%;
marža: 0;
}
.n-tumbler {
barva ozadja: var (- nColor);
box-shadow: var (- brShadow), var (- tlShadow);
polmer meje: 50%;
širina: 200px;
višina: 200px;
marža: 10 slikovnih pik;
}
.n-tumbler .n-outset {
barva ozadja: var (- nColor);
box-shadow: var (- brShadow), var (- tlShadow);
polmer meje: 50%;
širina: 80%;
višina: 80%;
marža: 0;
}
.n-kvadrat {
barva ozadja: var (- nColor);
box-shadow: var (- brShadow), var (- tlShadow);
polmer meje: 0;
širina: 200px;
višina: 200px;
marža: 10 slikovnih pik;
}
.n-smooth-sq {
barva ozadja: var (- nColor);
box-shadow: var (- brShadow), var (- tlShadow);
polmer meje: 10%;
širina: 200px;
višina: 200px;
marža: 10 slikovnih pik;
}
.n-text {
barva: var (- nColor);
text-shadow: var (- brShadow), var (- tlShadow);
velikost pisave: 6em;
teža pisave: krepko;
}

5. Neumorfni gumbi

Z naslednjimi delčki kode HTML, CSS in JavaScript ustvarite zgornje neumorfne gumbe.

HTML koda

Pritisnite gumbe




play_arrow


pavza





premešaj

Koda CSS

@import url (' https://fonts.googleapis.com/icon? družina = Gradivo + Ikone ');
telo {
barva ozadja: # 6ec7ff;
}
.btn-holder {
zaslon: blok;
marža: 0 samodejno;
margin-top: 64 slikovnih pik;
poravnava besedila: sredina;
}
.intro-text {
margin-bottom: 48 slikovnih pik;
družina pisav: 'Živi pesek', sans-serif;
barva: bela;
velikost pisave: 18px;
}
.btn {
širina: 110px;
višina: 110px;
velikost pisave: 30 slikovnih pik;
polmer obrobe: 30 slikovnih pik;
meja: nobena;
barva: bela;
navpična poravnava: zgoraj;
-webkit-prehod: .6s enostavnost vstopa;
prehod: .6s enostavnost vstopa;
}
.btn: hover {
kazalec: kazalec;
}
.btn: focus {
oris: noben;
}
.btn: prva vrsta {
rob desno: 30 slikovnih pik;
}
.neumorphic {
ozadje: linearni gradient (145deg, # 76d5ff, # 63b3e6);
box-shadow: 30px 30px 40px # 1e7689,
-30px -30px 40px # 7fe5ff;
obroba: 3px solid rgba (255, 255, 255, .4);
}
.pnevmorfno stisnjen {
ozadje: linearni gradient (145deg, # 63b3e6, # 76d5ff);
-webkit-box-shadow: vložek 15px 15px 20px -20px rgba (0,0,0, .5);
-moz-box-shadow: vložek 15px 15px 20px -20px rgba (0,0,0, .5);
box-shadow: vložek 15px 15px 20px -20px rgba (0,0,0, .5);
}
.neumorphic: focus, .neumorphic: hover, .neumorphic: focus, .neumorphic: hover, .neumorphic-Press: focus, .neumorphic-Press: hover {
obroba: 3px trdna rgba (46, 74, 112, .75);
}
.material-icon {
družina pisav: 'Ikone materiala';
teža pisave: normalno;
slog pisave: normalno;
velikost pisave: 32 slikovnih pik;
zaslon: vrstni blok;
višina črte: 1;
preoblikovanje besedila: nobeno;
razmik med črkami: normalno;
zavijanje besed: normalno;
presledek: zdaj;
smer: ltr;
-webkit-glajenje pisave: antialiased;
upodabljanje besedila: optimizeLegibility;
-moz-osx-glajenje pisave: sivine;
nastavitve pisave: 'liga';
}
#pavza {
barva: # 143664;
zaslon: noben;
}

Koda JavaScript

function changeStyle (btnPress) {
var btn = document.getElementById (btnPress);
btn.classList.toggle ("neumorphic");
btn.classList.toggle ("neumorfno stisnjeno");
if (btnPress 'play-pause') {
igra ();
} else if (btnPress 'shuffle-btn') {
premešaj ();
}
}
predvajanje funkcije () {
var playBtn = document.getElementById ('predvajanje');
var pauseBtn = document.getElementById ('premor');
če (playBtn.style.display 'none') {
playBtn.style.display = 'blokiraj';
pauseBtn.style.display = 'nič';
} še {
playBtn.style.display = 'nič';
pauseBtn.style.display = 'blokiraj';
}
}
funkcijsko premeščanje () {
var shuffleBtn = document.getElementById ('shuffle-btn');
če (shuffleBtn.style.color == 'bela' || shuffleBtn.style.color == '') {
shuffleBtn.style.color = '# 143664';
} še {
shuffleBtn.style.color = 'bela';
}
}

Če si želite ogledati celotno izvorno kodo, uporabljeno v tem članku, je tukaj Skladišče GitHub.

Opomba: Koda, uporabljena v tem članku, je MIT licenciran.

Spletno mesto oblikujte z nevmorfizmom

Za oblikovanje spletnega mesta lahko uporabite minimalistični oblikovalski koncept neumorfizma. Zagotavlja estetsko prijeten videz. A kljub temu ima nevmorfizem omejitve glede dostopnosti.

Obstajajo različni načini, kako dati spletni strani eleganten videz. Če želite na svojem spletnem mestu oblikovati nenavadne škatle, poskusite lastnost CSS box-shadow.

Yuvraj Chandra (33 objavljenih člankov)

Yuvraj je dodiplomski študent računalništva na Univerzi v Delhiju v Indiji. Navdušen je nad spletnim razvojem Full Stack. Ko ne piše, raziskuje globino različnih tehnologij.

Več od Yuvraj Chandra