Neumorfizmus je nový dizajnérsky trend, ktorý kombinuje plochý dizajn a skeomomorfizmus. Je to minimálny spôsob dizajnu s mäkkým, extrudovaným plastom, takmer v 3D štýle. V súčasnosti je tento dizajn populárny cez internet a je široko používaný návrhármi a vývojármi.

Ak chcete vyskúšať neumorfizmus pre svoj ďalší projekt, tu je niekoľko útržkov kódu, ktoré vám pomôžu začať.

1. Neumorfné karty

Pomocou nasledujúcich útržkov kódu HTML a CSS vytvorte vyššie uvedené neumorfné karty.

HTML kód

Dizajn

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

Čítaj viac
















Zákonníka

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

Čítaj viac










instagram viewer












Spustiť

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

Čítaj viac

Kód CSS

@import url (' https://fonts.googleapis.com/css? rodina = Poppins: 400 500 600 700 800 900 & display = swap ');
*
{
okraj: 0;
výplň: 0;
box-sizing: border-box;
rodina fontov: 'Poppins', sans-serif;
}
telo
{
displej: flex;
justify-content: center;
align-items: center;
minimálna výška: 100vh;
pozadie: # ebf5fc;
}
.kontejner
{
poloha: relatívna;
displej: flex;
justify-content: space-around;
align-items: center;
flex-wrap: zabaliť;
šírka: 1100px;
}
.kontejner .karta
{
šírka: 320px;
okraj: 20px;
výplň: 40px 30px;
pozadie: # ebf5fc;
polomer okraja: 40px;
tieňový box: -6px -6px 20px rgba (255,255,255,1), 6px 6px 20px rgba (0,0,0,0,1);
}
.kontejner .karta: vznášať sa
{
tieňový box: vložka -6px -6px 20px rgba (255,255,255,0,5), vložka 6px 6px 20px rgba (0,0,0,0,05);
}
.kontejner .karta .imgBx
{
poloha: relatívna;
zarovnanie textu: na stred;
}
.kontejner .karta .imgBx obr
{
maximálna šírka: 120px;
}
.kontejner .karta .obsahBx
{
poloha: relatívna;
horný okraj: 20px;
zarovnanie textu: na stred;
}
.kontejner .karta .obsahBx h2
{
farba: # 32a3b1;
váha písma: 700;
veľkosť písma: 1,4em;
medzery medzi písmenami: 2px;
}
.kontejner .karta .obsahBx str
{
farba: # 32a3b1;
}
.kontajner .karta .obsahBx a
{
display: inline-block;
výplň: 10px 20px;
horný okraj: 15px;
polomer okraja: 40px;
farba: # 32a3b1;
veľkosť písma: 16px;
dekorácia textu: žiadny;
tieňový box: -4px -4px 15px rgba (255,255,251,1), 4px 4px 15px rgba (0,0,0,0,1);
}
.kontejner .karta .obsahBx a: vznášať sa
{
tieňový box: vložka -4px -4px 10px rgba (255,255,255,0,5), vložka 4px 4px 10px rgba (0,0,0,0,1);
}
.kontajner .karta a: rozsah vznášania
{
displej: blok;
transformácia: mierka (0,98);
}
.kontajner .card: hover .imgBx,
.kontejner .karta: vznášať sa .contentBx
{
transformácia: mierka (0,98);
}

2. Neumorfná forma

Pomocou nasledujúcich útržkov kódu HTML a CSS vytvorte vyššie uvedený neumorfný tvar.

HTML kód

Prihlásiť Se










 Prihlásiť sa

Kód CSS

telo, html {
farba pozadia: # EBECF0;
}
telo, p, vstup, výber, textová oblasť, tlačidlo {
rodina fontov: "Montserrat", sans-serif;
medzery medzi písmenami: -0,2px;
veľkosť písma: 16px;
}
div, p {
farba: #BABECC;
tieň textu: 1px 1px 1px #FFF;
}
forma {
výplň: 16px;
šírka: 320px;
okraj: 0 auto;
}
.segment {
výplň: 32px 0;
zarovnanie textu: na stred;
}
tlačidlo, vstup {
ohraničenie: 0;
obrys: 0;
veľkosť písma: 16px;
polomer okraja: 320px;
výplň: 16px;
farba pozadia: # EBECF0;
tieň textu: 1px 1px 0 #FFF;
}
štítok {
displej: blok;
spodný okraj: 24 pixelov;
šírka: 100%;
}
vstup {
pravý okraj: 8 pixelov;
tieň boxu: vložka 2px 2px 5px #BABECC, vložka -5px -5px 10px #FFF;
šírka: 100%;
box-sizing: border-box;
prechod: všetkých 0,2 s easy-in-out;
vzhľad: žiadny;
-webkit-vzhľad: žiadny;
}
vstup: zameranie {
tieň boxu: vložka 1px 1px 2px #BABECC, vložka -1px -1px 2px #FFF;
}
tlačidlo {
farba: # 61677C;
váha písma: tučné;
tieňový box: -5px -5px 20px #FFF, 5px 5px 20px #BABECC;
prechod: všetkých 0,2 s easy-in-out;
kurzor: ukazovateľ;
váha písma: 600;
}
button: hover {
tieňový box: -2px -2px 5px #FFF, 2px 2px 5px #BABECC;
}
tlačidlo: aktívne {
tieň boxu: vložka 1px 1px 2px #BABECC, vložka -1px -1px 2px #FFF;
}
tlačidlo. ikona {
pravý okraj: 8 pixelov;
}
button.unit {
polomer hranice: 8px;
výška riadku: 0;
šírka: 48px;
výška: 48px;
displej: inline-flex;
justify-content: center;
align-items: center;
okraj: 0 8px;
veľkosť písma: 19,2px;
}
button.unit .icon {
pravý okraj: 0;
}
button.red {
displej: blok;
šírka: 100%;
farba: # AE1100;
}
.input-group {
displej: flex;
align-items: center;
justify-content: flex-start;
}
štítok skupiny vstupov {
okraj: 0;
flex: 1;
}

3. Neumorfný Navbar

Pomocou nasledujúcich fragmentov kódu HTML, CSS a JavaScript vytvorte uvedený neumorfný navigačný panel.

HTML kód

Súvisiace: Najlepšie stránky pre príklady kvalitného kódovania HTML

Neumorfný Navbar

Kód CSS

* {
okraj: 0;
výplň: 0;
box-sizing: border-box;
}
telo {
farba pozadia: #efeeee;
}
.nav {
šírka: 100vw;
výška: 100px;
farba pozadia: #efeeee;
tieň boxu: 10px 10px 12px 0 rgba (0, 0, 0, 0,07);
polomer ohraničenia: 0 0 10px 10px;
displej: flex;
justify-content: flex-end;
align-items: center;
výplň: 0 3rem;
list-style-type: none;
}
.nav li.logo {
pravý okraj: auto;
rodina fontov: "Roboto", sans-serif;
veľkosť písma: 1,5rem;
farba: dimgray;
váha písma: 900;
tieňový text: 2px 2px 4px rgba (0, 0, 0, 0,3), -2px -2px 4px biela;
}
.nav li: not (.logo) {
marža: 0 1rem;
výplň: 0,5rem 1,5rem;
orámovanie: 2px pevná rgba (255, 255, 255, 0,3);
tieň boxu: 4px 4px 6px 0 rgba (0, 0, 0, 0,1), -4px -4px 6px biela;
polomer okraja: 10px;
rodina fontov: "Roboto", sans-serif;
kurzor: ukazovateľ;
prechod: uvoľnenie farby 0,2 s, transformácia 0,2 s uvoľnenie;
farba: dimgray;
}
.nav li: not (.logo): hover {
transformácia: mierka (1,05);
tieň boxu: 4px 4px 10px 0 rgba (0, 0, 0, 0,1), -4px -4px 10px biela;
}
.nav li: not (.logo): focus {
obrys: žiadny;
transformácia: mierka (0,95);
tieň: 4px 4px 10px 0 rgba (0, 0, 0, 0,1), -4px -4px 10px biela, 4px 4px 10px 0 rgba (0, 0, 0, 0,1) vložka, -4px -4px 10px biela vložka;
}
.nav li: not (.logo): vznášať sa, .nav li: not (.logo): focus {
farba: oranžová;
}

JavaScriptový kód

pierko.na miesto ();

4. Neumorfný text a tvary

Pomocou nasledujúcich útržkov kódu HTML a CSS vytvorte uvedený neumorfný text a tvary.

HTML kód

Súvisiace: Podvodný hárok HTML Essentials

Kruh

Šiška

Námestie

Hladký štvorec

Tumbler

Neumorfný text

Vitajte na MUO

Kód CSS

Súvisiace: Jednoduché príklady kódu CSS, ktoré sa môžete naučiť za 10 minút

*, *::predtým potom {
box-sizing: 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 {
okraj: 0;
rodina fontov: sans-serif;
minimálna výška: 100vh;
displej: flex;
align-items: center;
justify-content: center;
flex-wrap: zabaliť;
pozadie: var (- nColor);
}
.n na začiatku,
.n-vložka {
displej: flex;
align-items: center;
justify-content: center;
}
.n-kruh {
farba pozadia: var (- nColor);
tieň boxu: var (- brShadow), var (- tlShadow);
polomer hranice: 50%;
šírka: 200px;
výška: 200px;
okraj: 10px;
}
.n-donut {
farba pozadia: var (- nColor);
tieň boxu: var (- brShadow), var (- tlShadow);
polomer hranice: 50%;
šírka: 200px;
výška: 200px;
okraj: 10px;
}
.n-donut .n-vložka {
farba pozadia: var (- nColor);
tieň poľa: vložka var (- brShadow), vložka var (- tlShadow);
polomer hranice: 50%;
šírka: 50%;
výška: 50%;
okraj: 0;
}
.n-pohárik {
farba pozadia: var (- nColor);
tieň boxu: var (- brShadow), var (- tlShadow);
polomer hranice: 50%;
šírka: 200px;
výška: 200px;
okraj: 10px;
}
.n-pohárik .n-počiatok {
farba pozadia: var (- nColor);
tieň boxu: var (- brShadow), var (- tlShadow);
polomer hranice: 50%;
šírka: 80%;
výška: 80%;
okraj: 0;
}
.n-štvorec {
farba pozadia: var (- nColor);
tieň boxu: var (- brShadow), var (- tlShadow);
polomer hranice: 0;
šírka: 200px;
výška: 200px;
okraj: 10px;
}
.n-hladký-štvorcový {
farba pozadia: var (- nColor);
tieň boxu: var (- brShadow), var (- tlShadow);
polomer hranice: 10%;
šírka: 200px;
výška: 200px;
okraj: 10px;
}
.n-text {
farba: var (- nColor);
textový tieň: var (- brShadow), var (- tlShadow);
veľkosť písma: 6em;
váha písma: tučné;
}

5. Neumorfné tlačidlá

Pomocou nasledujúcich fragmentov kódu HTML, CSS a JavaScript vytvorte vyššie uvedené neumorfné tlačidlá.

HTML kód

Stlačte tlačidlá




play_arrow


pauza





zamiešať

Kód CSS

@import url (' https://fonts.googleapis.com/icon? rodina = Materiál + Ikony ');
telo {
farba pozadia: # 6ec7ff;
}
.btn-držiak {
displej: blok;
okraj: 0 auto;
horný okraj: 64 pixelov;
zarovnanie textu: na stred;
}
.intro-text {
spodný okraj: 48px;
rodina fontov: 'Quicksand', sans-serif;
farba: biela;
veľkosť písma: 18px;
}
.btn {
šírka: 110px;
výška: 110px;
veľkosť písma: 30px;
polomer okraja: 30px;
hranica: žiadna;
farba: biela;
vertical-align: top;
-webkit-transition: .6s easy-in-out;
prechod: .6s easy-in-out;
}
.btn: vznášať sa {
kurzor: ukazovateľ;
}
.btn: zameranie {
obrys: žiadny;
}
.btn: prvý typ {
pravý okraj: 30 pixelov;
}
.neumorfný {
pozadie: lineárny gradient (145 stupňov, # 76d5ff, # 63b3e6);
tieň boxu: 30px 30px 40px # 1e7689,
-30px -30px 40px # 7fe5ff;
orámovanie: 3px pevná rgba (255, 255, 255, .4);
}
.neumorfne lisované {
pozadie: lineárny gradient (145 stupňov, # 63b3e6, # 76d5ff);
-webkit-box-shadow: vložka 15px 15px 20px -20px rgba (0,0,0, 0,5);
-moz-box-shadow: vložka 15px 15px 20px -20px rgba (0,0,0, 0,5);
tieň boxu: vložka 15px 15px 20px -20px rgba (0,0,0, 0,5);
}
.neumorfný: ohnisko, .neumorfný: vznášať sa, .neumorfný: ohnisko, .neumorfný: vznášať sa, .neumorfne stlačený: ohnisko, .neumorfný-stlačený: vznášať sa {
orámovanie: 3px pevná rgba (46, 74, 112, 0,75);
}
.materiál-ikona {
rodina fontov: 'Ikony materiálu';
váha písma: normálne;
štýl písma: normálne;
veľkosť písma: 32px;
display: inline-block;
výška čiary: 1;
textová transformácia: žiadna;
medzery medzi písmenami: normálne;
zalomenie slova: normálne;
biely priestor: nowrap;
smer: ltr;
-webkit-font-smoothing: vyhladený;
vykreslenie textu: optimizeLegibility;
-moz-osx-font-smoothing: odtiene šedej;
font-feature-settings: 'liga';
}
#pauza {
farba: # 143664;
displej: žiadny;
}

JavaScriptový kód

function changeStyle (btnPressed) {
var btn = document.getElementById (btnPressed);
btn.classList.toggle ("neumorphic");
btn.classList.toggle ("neumorphic-press");
if (btnPressed 'play-pause') {
hrať();
} else if (btnPressed 'shuffle-btn') {
zamiešať ();
}
}
funkcia play () {
var playBtn = document.getElementById ('prehrať');
var pauseBtn = document.getElementById ('pause');
if (playBtn.style.display 'none') {
playBtn.style.display = 'blokovať';
pauseBtn.style.display = 'none';
} else {
playBtn.style.display = 'žiadny';
pauseBtn.style.display = 'blokovať';
}
}
shuffle funkcií () {
var shuffleBtn = document.getElementById ('shuffle-btn');
if (shuffleBtn.style.color == 'white' || shuffleBtn.style.color == '') {
shuffleBtn.style.color = '# 143664';
} else {
shuffleBtn.style.color = 'biela';
}
}

Ak sa chcete pozrieť na kompletný zdrojový kód použitý v tomto článku, tu je Úložisko GitHub.

Poznámka: Kód použitý v tomto článku je MIT licencovaný.

Upravte svoj web pomocou neumorfizmu

Môžete použiť minimalistický koncept neumorphism na úpravu vášho webu. Poskytuje esteticky príjemný vzhľad. Napriek tomu má neumorfizmus obmedzenia prístupnosti.

Existujú rôzne spôsoby, ako dať webovým stránkam elegantný vzhľad. Ak chcete na svojich webových stránkach navrhnúť nevýrazné polia, môžete vyskúšať vlastnosť CSS typu box-shadow.

Yuvraj Chandra (Publikovaných 33 článkov)

Yuvraj je vysokoškolský študent v odbore počítačová veda na univerzite v Dillí v Indii. Je vášnivý pre vývoj webových stránok na princípe Full Stack. Ak nepíše, skúma hĺbku rôznych technológií.

Viac od Yuvraja Chandru