A neumorfizmus egy új tervezési irányzat, amely ötvözi a lapos kialakítást és a skeuomorfizmust. Minimális módja a puha, extrudált műanyag, szinte 3D-stílusú megjelenésnek. Jelenleg ez a kialakítás az interneten keresztül terjed, és a tervezők és fejlesztők széles körben használják.

Ha ki akarja próbálni a neumorfizmust a következő projektjéhez, íme néhány kódrészlet a kezdéshez.

1. Neumorf kártyák

Használja a következő HTML és CSS kódrészleteket a fenti neumorf kártyák létrehozásához.

HTML kód

Tervezés

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

Olvass tovább
















Kód

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

Olvass tovább










instagram viewer












Dob

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

Olvass tovább

CSS kód

@import url (' https://fonts.googleapis.com/css? család = Poppins: 400,500,600,700,800,900 & display = swap ');
*
{
margó: 0;
párnázás: 0;
doboz-méretezés: border-box;
font-family: 'Poppins', sans-serif;
}
test
{
kijelző: flex;
igazol-tartalom: központ;
align-items: center;
min-magasság: 100vh;
háttér: # ebf5fc;
}
.tartály
{
pozíció: rokon;
kijelző: flex;
igazol-tartalom: szóköz körül;
align-items: center;
flex-wrap: csomagolás;
szélesség: 1100px;
}
.konténer .kártya
{
szélesség: 320px;
margó: 20px;
párnázás: 40px 30px;
háttér: # ebf5fc;
határ-sugár: 40px;
box-shadow: -6px -6px 20px rgba (255,255,255,1), 6px 6px 20px rgba (0,0,0,0,1);
}
.konténer .kártya: lebeg
{
box-shadow: beillesztés -6px -6px 20px rgba (255,255,255,0,5), betét 6px 6px 20px rgba (0,0,0,0,05);
}
.konténer .kártya .imgBx
{
pozíció: rokon;
text-align: center;
}
.container .card .imgBx img
{
max szélesség: 120px;
}
.tartály .kártya .tartalomBx
{
pozíció: rokon;
margin-top: 20px;
text-align: center;
}
.tartály .kártya .tartalomBx h2
{
szín: # 32a3b1;
betű súlya: 700;
betűméret: 1,4em;
levélköz: 2px;
}
.container .card .contentBx p
{
szín: # 32a3b1;
}
.container .card .contentBx a
{
kijelző: inline-block;
párnázás: 10px 20px;
margin-top: 15 képpont;
határ-sugár: 40px;
szín: # 32a3b1;
betűméret: 16px;
szövegdíszítés: nincs;
box-shadow: -4px -4px 15px rgba (255,255,255,1), 4px 4px 15px rgba (0,0,0,0,1);
}
.container .card .contentBx a: lebeg
{
box-shadow: beillesztés -4px -4px 10px rgba (255,255,255,0,5), beillesztés 4px 4px 10px rgba (0,0,0,0,1);
}
.konténer .kártya a: lebegő fesztáv
{
kijelző: blokk;
transzformáció: skála (0,98);
}
.container .card: lebegjen .imgBx,
.container .card: lebegjen .contentBx
{
transzformáció: skála (0,98);
}

2. Neumorf forma

Használja a következő HTML és CSS kódrészleteket a fenti neumorf űrlap létrehozásához.

HTML kód

Regisztrálj










 Belépés

CSS kód

test, html {
háttérszín: # EBECF0;
}
body, p, input, select, textarea, button {
font-family: "Montserrat", sans-serif;
betűköz: -0,2 képpont;
betűméret: 16px;
}
div, p {
szín: #BABECC;
szöveg-árnyék: 1px 1px 1px #FFF;
}
form {
párnázás: 16px;
szélesség: 320px;
margó: 0 auto;
}
.segment {
párnázás: 32px 0;
text-align: center;
}
gomb, bemenet {
határ: 0;
vázlat: 0;
betűméret: 16px;
határ-sugár: 320 képpont;
párnázás: 16px;
háttérszín: # EBECF0;
szöveg-árnyék: 1px 1px 0 #FFF;
}
címke {
kijelző: blokk;
margin-bottom: 24px;
szélesség: 100%;
}
input {
jobb-jobb: 8px;
box-shadow: beszúrás 2px 2px 5px #BABECC, beillesztés -5px -5px 10px #FFF;
szélesség: 100%;
doboz-méretezés: border-box;
átmenet: mind a 0,2-es könnyebb ki-be;
megjelenés: nincs;
-webkit-megjelenés: nincs;
}
input: fókusz {
box-shadow: beszúrás 1px 1px 2px #BABECC, beillesztés -1px -1px 2px #FFF;
}
gomb {
szín: # 61677C;
betű súlya: félkövér;
box-shadow: -5px -5px 20px #FFF, 5px 5px 20px #BABECC;
átmenet: mind a 0,2-es könnyebb ki-be;
kurzor: mutató;
betű súlya: 600;
}
gomb: lebegés {
box-shadow: -2px -2px 5px #FFF, 2px 2px 5px #BABECC;
}
gomb: aktív {
box-shadow: beszúrás 1px 1px 2px #BABECC, beillesztés -1px -1px 2px #FFF;
}
gomb .ikon {
jobb-jobb: 8px;
}
button.unit {
határ-sugár: 8 képpont;
vonal-magasság: 0;
szélesség: 48px;
magasság: 48px;
kijelző: inline-flex;
igazol-tartalom: központ;
align-items: center;
margó: 0 8px;
betűméret: 19,2 képpont;
}
button.unit .icon {
jobb-jobb: 0;
}
button.red {
kijelző: blokk;
szélesség: 100%;
szín: # AE1100;
}
.input-group {
kijelző: flex;
align-items: center;
igazol-tartalom: flex-start;
}
.input-group címke {
margó: 0;
hajlítás: 1;
}

3. Neumorf Navbar

Használja a következő HTML, CSS és JavaScript kódrészleteket a fenti neumorf navigációs sáv létrehozásához.

HTML kód

Összefüggő: Legjobb webhelyek a minőségi HTML kódolási példákhoz

Neumorf Navbar

CSS kód

* {
margó: 0;
párnázás: 0;
doboz-méretezés: border-box;
}
body {
háttérszín: # díj
}
.nav {
szélesség: 100vw;
magasság: 100px;
háttérszín: # díj
box-shadow: 10px 10px 12px 0 rgba (0, 0, 0, 0,07);
határsugár: 0 0 10px 10px;
kijelző: flex;
igazol-tartalom: flex-end;
align-items: center;
párnázás: 0 3rem;
list-style-type: nincs;
}
.nav li.logo {
jobb-jobb: auto;
font-family: "Roboto", sans-serif;
betűméret: 1,5rem;
szín: halványszürke;
betű súlya: 900;
szöveg-árnyék: 2px 2px 4px rgba (0, 0, 0, 0,3), -2px -2px 4px fehér;
}
.nav li: not (.logo) {
margó: 0 1rem;
párnázás: 0,5rem 1,5rem;
határ: 2px szilárd rgba (255, 255, 255, 0,3);
box-shadow: 4px 4px 6px 0 rgba (0, 0, 0, 0,1), -4px -4px 6px fehér;
határ sugara: 10 képpont;
font-family: "Roboto", sans-serif;
kurzor: mutató;
átmenet: a 0,2-es szín megkönnyíti a kimenetet, a 0,2-es átalakítja a könnyítést
szín: halványszürke;
}
.nav li: not (.logo): lebeg {
transzformáció: skála (1,05);
box-shadow: 4px 4px 10px 0 rgba (0, 0, 0, 0,1), -4px -4px 10px fehér;
}
.nav li: not (.logo): fókusz {
vázlat: nincs;
transzformáció: skála (0,95);
box-shadow: 4px 4px 10px 0 rgba (0, 0, 0, 0,1), -4px -4px 10px fehér, 4px 4px 10px 0 rgba (0, 0, 0, 0,1) betét, -4px -4px 10px fehér betét;
}
.nav li: not (.logo): lebeg, .nav li: not (.logo): fókusz {
szín: narancssárga;
}

JavaScript kód

toll.pótlás ();

4. Neumorf szöveg és alakzatok

Használja a következő HTML és CSS kódrészleteket a fenti neumorf szöveg és alakzat létrehozásához.

HTML kód

Összefüggő: A HTML Essentials csalólap

Kör

Fánk

Négyzet

Sima tér

Tumbler

Neumorf szöveg

Üdvözöljük a MUO-ban

CSS kód

Összefüggő: Egyszerű CSS kód példák, amelyeket 10 perc alatt megtanulhat

*, *::előtte utána {
doboz-méretezés: 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);
}
body {
margó: 0;
font-család: sans-serif;
min-magasság: 100vh;
kijelző: flex;
align-items: center;
igazol-tartalom: központ;
flex-wrap: csomagolás;
háttér: var (- nColor);
}
.n eleve,
.n-inset {
kijelző: flex;
align-items: center;
igazol-tartalom: központ;
}
.n-kör {
háttérszín: var (- nColor);
box-shadow: var (- brShadow), var (- tlShadow);
határsugár: 50%;
szélesség: 200px;
magasság: 200px;
margó: 10px;
}
.n-fánk {
háttérszín: var (- nColor);
box-shadow: var (- brShadow), var (- tlShadow);
határsugár: 50%;
szélesség: 200px;
magasság: 200px;
margó: 10px;
}
.n-fánk .n-inset {
háttérszín: var (- nColor);
box-shadow: beillesztett var (- brShadow), beillesztett var (- tlShadow);
határsugár: 50%;
szélesség: 50%;
magasság: 50%;
margó: 0;
}
.n-tumbler {
háttérszín: var (- nColor);
box-shadow: var (- brShadow), var (- tlShadow);
határsugár: 50%;
szélesség: 200px;
magasság: 200px;
margó: 10px;
}
.n-tumbler .n-outset {
háttérszín: var (- nColor);
box-shadow: var (- brShadow), var (- tlShadow);
határsugár: 50%;
szélesség: 80%;
magasság: 80%;
margó: 0;
}
.n-square {
háttérszín: var (- nColor);
box-shadow: var (- brShadow), var (- tlShadow);
határ-sugár: 0;
szélesség: 200px;
magasság: 200px;
margó: 10px;
}
.n-smooth-sq {
háttérszín: var (- nColor);
box-shadow: var (- brShadow), var (- tlShadow);
határsugár: 10%;
szélesség: 200px;
magasság: 200px;
margó: 10px;
}
.n-text {
szín: var (- nColor);
text-shadow: var (- brShadow), var (- tlShadow);
betűméret: 6em;
betű súlya: félkövér;
}

5. Neumorf gombok

Használja a következő HTML, CSS és JavaScript kódrészleteket a fenti neumorf gombok létrehozásához.

HTML kód

Nyomja meg a gombokat




play_arrow


szünet





keverés

CSS kód

@import url (' https://fonts.googleapis.com/icon? család = Anyag + Ikonok ');
test{
háttérszín: # 6ec7ff;
}
.btn-tartó {
kijelző: blokk;
margó: 0 auto;
margin-top: 64 képpont;
text-align: center;
}
.intro-text {
margin-bottom: 48px;
font-family: 'Quicksand', sans-serif;
fehér szín;
betűméret: 18 képpont;
}
.btn {
szélesség: 110px;
magasság: 110px;
betűméret: 30 képpont;
határ sugara: 30 képpont;
határ: nincs;
fehér szín;
függőleges-igazítás: felső;
-webkit-átmenet: .6s könnyebb ki-be;
átmenet: .6-os könnyebb ki-be;
}
.btn: hover {
kurzor: mutató;
}
.btn: fókusz {
vázlat: nincs;
}
.btn: first-of-type {
jobb szél: 30 képpont;
}
.neumorphic {
háttér: lineáris gradiens (145deg, # 76d5ff, # 63b3e6);
box-shadow: 30px 30px 40px # 1e7689,
-30px -30px 40px # 7fe5ff;
szegély: 3 képpontos szilárd rgba (255, 255, 255, .4);
}
.neumorf nyomással {
háttér: lineáris gradiens (145deg, # 63b3e6, # 76d5ff);
-webkit-box-shadow: beillesztett 15px 15px 20px -20px rgba (0,0,0, .5);
-moz-box-shadow: beszúrás 15px 15px 20px -20px rgba (0,0,0, .5);
box-shadow: beszúrás 15px 15px 20px -20px rgba (0,0,0, .5);
}
.neumorf: fókusz, .neumorf: lebeg, .neumorf: fókusz, .neumorf: lebeg, .neumorf-nyomott: fókusz, .neumorf-nyomott: lebeg {
határ: 3 képpont szilárd rgba (46, 74, 112, 0,75);
}
.material-icon {
font-family: „Anyagi ikonok”;
betű súlya: normál;
betűtípus: normális;
betűméret: 32 képpont;
kijelző: inline-block;
vonal-magasság: 1;
szöveg-átalakítás: nincs;
betűköz: normális;
szócsomagolás: normális;
white-space: nowrap;
irány: ltr;
-webkit-font-smoothing: antialiased;
szövegmegjelenítés: optimizeLegibility;
-moz-osx-font-simítás: szürkeárnyalatos;
font-feature-settings: 'liga';
}
#szünet {
szín: # 143664;
kijelző: nincs;
}

JavaScript kód

függvény changeStyle (btnPressed) {
var btn = document.getElementById (btnPressed);
btn.classList.toggle ("neumorf");
btn.classList.toggle ("neumorf nyomással");
if (btnNyomott 'lejátszás-szünet') {
játék();
} else if (btnNyomott 'shuffle-btn') {
keverés();
}
}
függvény lejátszása () {
var playBtn = document.getElementById ('lejátszás');
var pauseBtn = document.getElementById ('szünet');
if (playBtn.style.display 'nincs') {
playBtn.style.display = 'blokk';
pauseBtn.style.display = 'nincs';
} más {
playBtn.style.display = 'nincs';
pauseBtn.style.display = 'blokk';
}
}
function shuffle () {
var shuffleBtn = document.getElementById ('shuffle-btn');
if (shuffleBtn.style.color == 'fehér' || shuffleBtn.style.color == '') {
shuffleBtn.style.color = '# 143664';
} más {
shuffleBtn.style.color = 'fehér';
}
}

Ha meg szeretné tekinteni a cikkben használt teljes forráskódot, íme a GitHub tárház.

jegyzet: A cikkben használt kód: MIT Licensed.

Stílusolja webhelyét neumorfizmussal

Használhatja a neumorfizmus minimalista tervezési koncepcióját weboldalának stílusához. Esztétikus megjelenést nyújt. De a neumorfizmusnak vannak akadálymentességei.

Különböző módon lehet elegáns megjelenést adni a weboldalnak. Ha a webhelyén szelíd dobozokat szeretne stilizálni, adja meg a box-shadow CSS tulajdonságot.

Yuvraj Chandra (33 cikk megjelent)

Yuvraj informatikus egyetemi hallgató az indiai Delhi Egyetemen. Szenvedélyes a Full Stack webfejlesztés. Amikor nem ír, a különböző technológiák mélységét kutatja.

Több Yuvraj Chandra-tól