Neumorfismi on uusi muotoilutrendi, jossa yhdistyvät litteä muotoilu ja skeuomorfismi. Se on vähäinen tapa suunnitella pehmeällä, puristetulla muovilla, melkein 3D-tyylisellä ulkoasulla. Tällä hetkellä tämä muotoilu on trendi Internetissä ja suunnittelijat ja kehittäjät käyttävät sitä laajalti.

Jos haluat kokeilla uuden projektin neumorfismia, tässä on joitain koodinpätkiä aloittaaksesi.

1. Neumorfiset kortit

Käytä seuraavia HTML- ja CSS-koodinpätkiä luodaksesi yllä olevat neumorfiset kortit.

HTML-koodi

Design

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

Lue lisää
















Koodi

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

Lue lisää










instagram viewer












Tuoda markkinoille

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

Lue lisää

CSS-koodi

@import url (' https://fonts.googleapis.com/css? perhe = Poppins: 400,500,600,700,800,900 & display = swap ');
*
{
marginaali: 0;
pehmuste: 0;
laatikon mitoitus: reunuslaatikko;
font-family: 'Poppins', sans-serif;
}
runko
{
näyttö: joustava;
perustella sisältö: keskus;
kohdista tuotteet: keskellä;
min-korkeus: 100vh;
tausta: # ebf5fc;
}
.kontti
{
asema: suhteellinen;
näyttö: joustava;
perustella sisältö: tilaa ympäri;
kohdista tuotteet: keskellä;
joustava kääre: kääri;
leveys: 1100px;
}
.kontti .kortti
{
leveys: 320px;
marginaali: 20px;
pehmuste: 40px 30px;
tausta: # ebf5fc;
reunan säde: 40 kuvapistettä;
laatikko-varjo: -6px -6px 20px rgba (255255255,1), 6px 6px 20px rgba (0,0,0,0,1);
}
.kontti .kortti: vie hiiri
{
laatikko-varjo: sisäkkäin -6px -6px 20px rgba (255255255,0,5), insertti 6px 6px 20px rgba (0,0,0,0,05);
}
.kontti .kortti .imgBx
{
asema: suhteellinen;
tekstin tasaus: keskellä;
}
.kontti .kortti .imgBx img
{
enimmäisleveys: 120px;
}
.container .card .contentBx
{
asema: suhteellinen;
yläreuna: 20 kuvapistettä;
tekstin tasaus: keskellä;
}
.container .card .contentBx h2
{
väri: # 32a3b1;
kirjasimen paino: 700;
kirjasinkoko: 1.4em;
kirjainten väli: 2px;
}
.container .card .contentBx s
{
väri: # 32a3b1;
}
.container .card .contentBx a
{
näyttö: inline-block;
täyte: 10px 20px;
yläreuna: 15 kuvapistettä;
reunan säde: 40 kuvapistettä;
väri: # 32a3b1;
fontin koko: 16px;
tekstikoristelu: ei mitään;
laatikko-varjo: -4px -4px 15px rgba (255255255,1), 4px 4px 15px rgba (0,0,0,0,1);
}
.container .card .contentBx a: vie hiiri
{
laatikko-varjo: sisäkkäin -4px -4px 10px rgba (255255255,0,5), insertti 4px 4px 10px rgba (0,0,0,0,1)
}
.kontti .kortti a: hover span
{
näyttö: lohko;
muunnos: asteikko (0,98);
}
.container .card: vie hiiri .imgBx,
.container .card: vie hiiri .contentBx
{
muunnos: asteikko (0,98);
}

2. Neumorfinen muoto

Luo yllä oleva neumorfinen muoto seuraavien HTML- ja CSS-koodinpätkien avulla.

HTML-koodi

Kirjaudu










 Kirjaudu sisään

CSS-koodi

runko, html {
taustaväri: # EBECF0;
}
body, p, input, select, textarea, button {
font-family: "Montserrat", sans-serif;
kirjainten väli: -0,2 kuvapistettä;
fontin koko: 16px;
}
div, p {
väri: #BABECC;
teksti-varjo: 1px 1px 1px #FFF;
}
lomake {
täyte: 16px;
leveys: 320px;
marginaali: 0 auto;
}
.segment {
täyte: 32px 0;
tekstin tasaus: keskellä;
}
painike, syöttö {
reuna: 0;
ääriviivat: 0;
fontin koko: 16px;
reunan säde: 320 kuvapistettä;
täyte: 16px;
taustaväri: # EBECF0;
teksti-varjo: 1px 1px 0 #FFF;
}
tunniste {
näyttö: lohko;
alareuna: 24 kuvapistettä;
leveys: 100%;
}
syöttö {
marginaali oikea: 8 kuvapistettä;
box-shadow: lisäys 2px 2px 5px #BABECC, inset -5px -5px 10px #FFF;
leveys: 100%;
laatikon mitoitus: reunuslaatikko;
siirtyminen: kaikki 0,2 sekunnit helpottavat sisäänmenoa;
ulkonäkö: ei mitään;
-webkit-esiintyminen: ei mitään;
}
syöttö: kohdistus {
laatikko-varjo: inset 1px 1px 2px #BABECC, inset -1px -1px 2px #FFF;
}
painike {
väri: # 61677C;
fontin paino: lihavoitu;
laatikko-varjo: -5px -5px 20px #FFF, 5px 5px 20px #BABECC;
siirtyminen: kaikki 0,2 sekunnit helpottavat sisäänmenoa;
kohdistin: osoitin;
kirjasimen paino: 600;
}
painike: vie hiiri {
laatikko-varjo: -2px -2px 5px #FFF, 2px 2px 5px #BABECC;
}
painike: aktiivinen {
laatikko-varjo: inset 1px 1px 2px #BABECC, inset -1px -1px 2px #FFF;
}
painike .icon {
marginaali oikea: 8 kuvapistettä;
}
button.unit {
reunan säde: 8 kuvapistettä;
viivan korkeus: 0;
leveys: 48px;
korkeus: 48px;
näyttö: inline-flex;
perustella sisältö: keskus;
kohdista tuotteet: keskellä;
marginaali: 0 8px;
kirjasinkoko: 19,2 kuvapistettä;
}
button.unit .icon {
reuna-oikea: 0;
}
button.red {
näyttö: lohko;
leveys: 100%;
väri: # AE1100;
}
.input-group {
näyttö: joustava;
kohdista tuotteet: keskellä;
perustella sisältö: joustava aloitus;
}
.input-group -tunniste {
marginaali: 0;
taipuma: 1;
}

3. Neumorfinen Navbar

Käytä seuraavia HTML-, CSS- ja JavaScript-koodinpätkiä luodaksesi yllä olevan neutrofiilisen navigaattorin.

HTML-koodi

Liittyvät: Parhaat sivustot HTML-koodauslaadun esimerkkejä varten

Neumorfinen Navbar

CSS-koodi

* {
marginaali: 0;
pehmuste: 0;
laatikon mitoitus: reunuslaatikko;
}
runko {
taustaväri: #efeeee;
}
.nav {
leveys: 100vw;
korkeus: 100px;
taustaväri: #efeeee;
laatikko-varjo: 10px 10px 12px 0 rgba (0, 0, 0, 0,07);
reunan säde: 0 0 10 kuvapistettä 10 kuvapistettä;
näyttö: joustava;
perustella sisältö: joustava pää;
kohdista tuotteet: keskellä;
pehmuste: 0 3rem;
list-style-type: ei mitään;
}
.nav li.logo {
marginaali-oikea: auto;
font-family: "Roboto", sans-serif;
kirjasinkoko: 1.5rem;
väri: himmeä;
kirjasimen paino: 900;
teksti-varjo: 2px 2px 4px rgba (0, 0, 0, 0,3), -2px -2px 4px valkoinen;
}
.nav li: not (.logo) {
marginaali: 0 1rem;
pehmuste: 0,5rem 1,5rem;
reunus: 2px kiinteä rgba (255, 255, 255, 0,3);
laatikko-varjo: 4px 4px 6px 0 rgba (0, 0, 0, 0,1), -4px -4px 6px valkoinen;
reunan säde: 10 kuvapistettä;
font-family: "Roboto", sans-serif;
kohdistin: osoitin;
siirtymä: väri 0,2 s helpottaa, muuntaa 0,2 s helpottaa;
väri: himmeä;
}
.nav li: not (.logo): vie hiiri {
muunnos: asteikko (1,05);
laatikko-varjo: 4px 4px 10px 0 rgba (0, 0, 0, 0,1), -4px -4px 10px valkoinen;
}
.nav li: not (.logo): kohdistus {
ääriviivat: ei mitään;
muunnos: asteikko (0,95);
laatikko-varjo: 4px 4px 10px 0 rgba (0, 0, 0, 0,1), -4px -4px 10px valkoinen, 4px 4px 10px 0 rgba (0, 0, 0, 0,1) sisäkkäin, -4px -4px 10px valkoinen insertti;
}
.nav li: not (.logo): hover, .nav li: not (.logo): kohdistus {
väri: oranssi
}

JavaScript-koodi

sulka. korvaa ();

4. Neumorfinen teksti ja muodot

Käytä seuraavia HTML- ja CSS-koodinpätkiä luodaksesi yllä olevat neumorfiset tekstit ja muodot.

HTML-koodi

Liittyvät: HTML Essentials -huijausarkki

Ympyrä

Donitsi

Neliö

Sileä aukio

Juomalasi

Neumorfinen teksti

Tervetuloa MUO: han

CSS-koodi

Liittyvät: Yksinkertaisia ​​CSS-koodiesimerkkejä, jotka voit oppia 10 minuutissa

*, *::ennen jälkeen {
laatikon mitoitus: reunuslaatikko;
}
: root {
--nColor: #aaa;
--brShadow: -6px 6px 10px rgba (0,0,0,0,5);
--tlShadow: 6px -6px10px rgba (255255255,0,5);
}
runko {
marginaali: 0;
font-family: sans-serif;
min-korkeus: 100vh;
näyttö: joustava;
kohdista tuotteet: keskellä;
perustella sisältö: keskus;
joustava kääre: kääri;
tausta: var (- nColor);
}
.n-alku,
.n-inset {
näyttö: joustava;
kohdista tuotteet: keskellä;
perustella sisältö: keskus;
}
.n-ympyrä {
taustaväri: var (- nColor);
laatikko-varjo: var (- brShadow), var (- tlShadow);
reunan säde: 50%;
leveys: 200px;
korkeus: 200px;
marginaali: 10px;
}
.n-donitsi {
taustaväri: var (- nColor);
laatikko-varjo: var (- brShadow), var (- tlShadow);
reunan säde: 50%;
leveys: 200px;
korkeus: 200px;
marginaali: 10px;
}
.n-donitsi .n-inset {
taustaväri: var (- nColor);
laatikko-varjo: inset var (- brShadow), inset var (- tlShadow);
reunan säde: 50%;
leveys: 50%;
korkeus: 50%;
marginaali: 0;
}
.n-tumbler {
taustaväri: var (- nColor);
laatikko-varjo: var (- brShadow), var (- tlShadow);
reunan säde: 50%;
leveys: 200px;
korkeus: 200px;
marginaali: 10px;
}
.n-tumbler .n-outset {
taustaväri: var (- nColor);
laatikko-varjo: var (- brShadow), var (- tlShadow);
reunan säde: 50%;
leveys: 80%;
korkeus: 80%;
marginaali: 0;
}
.n-neliö {
taustaväri: var (- nColor);
laatikko-varjo: var (- brShadow), var (- tlShadow);
reunan säde: 0;
leveys: 200px;
korkeus: 200px;
marginaali: 10px;
}
.n-smooth-sq {
taustaväri: var (- nColor);
laatikko-varjo: var (- brShadow), var (- tlShadow);
reunan säde: 10%;
leveys: 200px;
korkeus: 200px;
marginaali: 10px;
}
.n-text {
väri: var (- nColor);
text-shadow: var (- brShadow), var (- tlShadow);
kirjasinkoko: 6em;
fontin paino: lihavoitu;
}

5. Neumorfiset painikkeet

Käytä seuraavia HTML-, CSS- ja JavaScript-koodinpätkiä luodaksesi yllä olevat neumorfiset painikkeet.

HTML-koodi

Paina painikkeita




play_arrow


tauko





sekoittaa

CSS-koodi

@import url (' https://fonts.googleapis.com/icon? perhe = materiaali + kuvakkeet ');
runko {
taustaväri: # 6ec7ff;
}
.btn-haltija {
näyttö: lohko;
marginaali: 0 auto;
yläreuna: 64 kuvapistettä;
tekstin tasaus: keskellä;
}
.intro-text {
alareuna: 48 kuvapistettä;
font-family: 'Quicksand', sans-serif;
väri valkoinen;
fontin koko: 18px;
}
.btn {
leveys: 110px;
korkeus: 110px;
kirjasinkoko: 30 kuvapistettä;
reunan säde: 30 kuvapistettä;
raja: ei mitään;
väri valkoinen;
pystysuora: ylhäältä;
-webkit-siirtyminen: .6s helppous sisään-ulos;
siirtyminen: .6s helppo sisään-ulos;
}
.btn: vie hiiri {
kohdistin: osoitin;
}
.btn: kohdistus {
ääriviivat: ei mitään;
}
.btn: ensimmäisen tyyppinen {
marginaali oikea: 30 kuvapistettä;
}
.neumorfinen {
tausta: lineaarinen gradientti (145 astetta, # 76d5ff, # 63b3e6);
laatikko-varjo: 30px 30px 40px # 1e7689,
-30px -30px40px # 7fe5ff;
reunus: 3px kiinteä rgba (255, 255, 255, .4);
}
.neumorfisesti painettu {
tausta: lineaarinen gradientti (145 astetta, # 63b3e6, # 76d5ff);
-webkit-box-shadow: lisäys 15px 15px 20px -20px rgba (0,0,0, .5);
-moz-box-shadow: lisäys 15px 15px 20px -20px rgba (0,0,0, .5);
laatikko-varjo: lisäys 15px 15px 20px -20px rgba (0,0,0, .5)
}
.neumorfinen: tarkennus, .neumorfinen: leijuva, .neumorfinen: tarkennus, .neumorfinen: leijuva, .neumorfisesti painettu: tarkennus, .neumorfisesti painettu: leijuva {
reunus: 3px kiinteä rgba (46, 74, 112, 0,75);
}
.material-icon {
font-family: 'Materiaalikuvakkeet';
fontin paino: normaali;
kirjasintyyli: normaali;
fontin koko: 32px;
näyttö: inline-block;
viivan korkeus: 1;
tekstimuunnos: ei mitään;
kirjainten väli: normaali;
sanan rivitys: normaali;
valkoinen tila: nowrap;
suunta: ltr;
-webkit-font-smoothing: antialiased;
tekstin renderointi: optimizeLegibility;
-moz-osx-font-smoothing: harmaasävy;
font-feature-settings: 'liga';
}
#pause {
väri: # 143664;
näyttö: ei mitään;
}

JavaScript-koodi

funktion muutosTyyli (btnPressed) {
var btn = document.getElementById (btnPressed);
btn.classList.toggle ("neumorfinen");
btn.classList.toggle ("neumorfisesti painettu");
if (btnPaina "toista-tauko") {
pelata();
} else if (btnPaina "shuffle-btn") {
sekoitus ();
}
}
funktion toisto () {
var playBtn = document.getElementById ('toisto');
var pauseBtn = document.getElementById ('tauko');
if (playBtn.style.display 'ei mitään') {
playBtn.style.display = 'estä';
pauseBtn.style.display = 'ei mitään';
} muu {
playBtn.style.display = 'ei mitään';
pauseBtn.style.display = 'estä';
}
}
funktion sekoitus () {
var shuffleBtn = document.getElementById ('shuffle-btn');
jos (shuffleBtn.style.color == 'valkoinen' || shuffleBtn.style.color == '') {
shuffleBtn.style.color = '# 143664';
} muu {
shuffleBtn.style.color = 'valkoinen';
}
}

Jos haluat tutustua tässä artikkelissa käytettyyn täydelliseen lähdekoodiin, tässä on GitHub-arkisto.

Merkintä: Tässä artikkelissa käytetty koodi on MIT lisensoitu.

Suunnittele verkkosivustosi tyylillä neutrofeilla

Voit käyttää minimalistista neumorfismin muotoilukonseptia verkkosivustosi muotoiluun. Se tarjoaa esteettisen miellyttävän ilmeen. Mutta silti, neumorfismilla on esteettömyysrajoituksia.

On olemassa erilaisia ​​tapoja antaa verkkosivustolle tyylikäs ilme. Jos haluat muotoilla verkkosivustosi tyylikkäitä laatikoita, anna box-shadow CSS -ominaisuuden mennä.

Yuvraj Chandra (33 artikkelia julkaistu)

Yuvraj on tietojenkäsittelytieteen perustutkinto-opiskelija Delhin yliopistossa Intiassa. Hän on intohimoisesti Full Stack -verkkokehitys. Kun hän ei kirjoita, hän tutkii eri tekniikoiden syvyyttä.

Lisää artistilta Yuvraj Chandra