Neumorfisme er en ny designtrend, der kombinerer fladt design og skeuomorfisme. Det er en minimal måde at designe med et blødt, ekstruderet plastik, næsten 3D-udseende. I øjeblikket trender dette design over internettet og bruges i vid udstrækning af designere og udviklere.

Hvis du vil prøve neumorfisme til dit næste projekt, her er nogle kodestykker, der kan komme i gang.

1. Neumorfe kort

Brug følgende HTML- og CSS-kodestykker til at oprette ovenstående neumorfe kort.

HTML-kode

Design

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

Læs mere
















Kode

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

Læs mere










instagram viewer












Start

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

Læs mere

CSS-kode

@import url (' https://fonts.googleapis.com/css? familie = Poppins: 400,500,600,700,800,900 & display = swap ');
*
{
margen: 0;
polstring: 0;
box-størrelse: border-box;
font-familie: 'Poppins', sans-serif;
}
legeme
{
display: flex;
retfærdiggør-indhold: center;
align-items: center;
min. højde: 100vh;
baggrund: # ebf5fc;
}
.beholder
{
position: relativ;
display: flex;
retfærdiggør-indhold: mellemrum;
align-items: center;
flex-wrap: wrap;
bredde: 1100 px;
}
.container .kort
{
bredde: 320px;
margen: 20px;
polstring: 40px 30px;
baggrund: # ebf5fc;
border-radius: 40px;
box-shadow: -6px -6px 20px rgba (255,255,255,1), 6px 6px 20px rgba (0,0,0,0,1);
}
.container .kort: svæver
{
box-shadow: indsats -6px -6px 20px rgba (255,255,255,0.5), indsats 6px 6px 20px rgba (0,0,0,0,05);
}
.container .card .imgBx
{
position: relativ;
tekstjustering: center;
}
.container .card .imgBx img
{
maks. bredde: 120 px;
}
.container .card .contentBx
{
position: relativ;
margin-top: 20 px;
tekstjustering: center;
}
.container .card .contentBx h2
{
farve: # 32a3b1;
fontvægt: 700;
skriftstørrelse: 1.4em;
mellemrum mellem bogstaver: 2 pixel;
}
.container .card .contentBx s
{
farve: # 32a3b1;
}
.container .card .contentBx a
{
display: inline-blok;
polstring: 10px 20px;
margin-top: 15px;
border-radius: 40px;
farve: # 32a3b1;
skriftstørrelse: 16 pixel;
tekst-dekoration: ingen;
box-shadow: -4px -4px 15px rgba (255,255,255,1), 4px 4px 15px rgba (0,0,0,0,1);
}
.container .card .contentBx a: svæver
{
box-shadow: indsats -4px -4px 10px rgba (255,255,255,0,5), indsats 4px 4px 10px rgba (0,0,0,0,1);
}
.container .card a: svævevidde
{
display: blok;
transformere: skala (0,98);
}
.container .card: svæver .imgBx,
.container .card: svæver .contentBx
{
transformere: skala (0,98);
}

2. Neumorf form

Brug følgende HTML- og CSS-kodestykker til at oprette ovenstående neumorfe form.

HTML-kode

Tilmelde










 Log på

CSS-kode

krop, html {
baggrundsfarve: # EBECF0;
}
body, p, input, select, textarea, button {
font-familie: "Montserrat", sans-serif;
mellemrum mellem bogstaver: -0.2px;
skriftstørrelse: 16 pixel;
}
div, p {
farve: #BABECC;
tekst-skygge: 1px 1px 1px #FFF;
}
form {
polstring: 16px;
bredde: 320px;
margen: 0 auto;
}
.segment {
polstring: 32px 0;
tekstjustering: center;
}
knap, input {
grænse: 0;
skitse: 0;
skriftstørrelse: 16 pixel;
border-radius: 320px;
polstring: 16px;
baggrundsfarve: # EBECF0;
tekst-skygge: 1px 1px 0 #FFF;
}
etiket {
display: blok;
margin-bund: 24 pixel;
bredde: 100%;
}
input {
margin-højre: 8px;
box-shadow: indsats 2px 2px 5px #BABECC, indsat -5px -5px 10px #FFF;
bredde: 100%;
box-størrelse: border-box;
overgang: alle 0,2s let-ind-ud;
udseende: ingen;
-webkit-udseende: ingen;
}
input: fokus {
box-shadow: indsats 1px 1px 2px #BABECC, indsat -1px -1px 2px #FFF;
}
knap {
farve: # 61677C;
font-vægt: fed;
box-shadow: -5px -5px 20px #FFF, 5px 5px 20px #BABECC;
overgang: alle 0,2s let-ind-ud;
markør: markør;
font-vægt: 600;
}
knap: svæv {
box-shadow: -2px -2px 5px #FFF, 2px 2px 5px #BABECC;
}
knap: aktiv {
box-shadow: indsats 1px 1px 2px #BABECC, indsat -1px -1px 2px #FFF;
}
knap .ikon {
margin-højre: 8px;
}
button.unit {
border-radius: 8px;
linjehøjde: 0;
bredde: 48px;
højde: 48px;
display: inline-flex;
retfærdiggør-indhold: center;
align-items: center;
margen: 0 8px;
skrifttypestørrelse: 19,2 px;
}
button.unit .icon {
margen-højre: 0;
}
button.red {
display: blok;
bredde: 100%;
farve: # AE1100;
}
.input-gruppe {
display: flex;
align-items: center;
retfærdiggør-indhold: flex-start;
}
.input-gruppe-etiket {
margen: 0;
flex: 1;
}

3. Neumorfisk Navbar

Brug følgende HTML-, CSS- og JavaScript-kodestykker til at oprette ovenstående neumorfe navbar.

HTML-kode

Relaterede: Bedste websteder til kvalitetseksempler på HTML-kodning

Neumorfisk Navbar

CSS-kode

* {
margen: 0;
polstring: 0;
box-størrelse: border-box;
}
krop {
baggrundsfarve: #afgift;
}
.nav {
bredde: 100vw;
højde: 100px;
baggrundsfarve: #afgift;
box-shadow: 10px 10px 12px 0 rgba (0, 0, 0, 0,07);
border-radius: 0 0 10px 10px;
display: flex;
retfærdiggør-indhold: flex-end;
align-items: center;
polstring: 0 3rem;
liste-stil-type: ingen;
}
.nav li.logo {
margen-højre: auto;
font-familie: "Roboto", sans-serif;
skriftstørrelse: 1,5 rem;
farve: dimgray;
fontvægt: 900;
tekst-skygge: 2px 2px 4px rgba (0, 0, 0, 0,3), -2px -2px 4px hvid;
}
.nav li: ikke (.logo) {
margen: 0 1rem;
polstring: 0.5rem 1.5rem;
grænse: 2 px solid rgba (255, 255, 255, 0,3);
box-shadow: 4px 4px 6px 0 rgba (0, 0, 0, 0,1), -4px -4px 6px hvid;
grænse-radius: 10 px;
font-familie: "Roboto", sans-serif;
markør: markør;
overgang: farve 0,2 s lethed ud, transform 0,2 s lethed ud;
farve: dimgray;
}
.nav li: ikke (.logo): svæver {
transformere: skala (1.05);
box-shadow: 4px 4px 10px 0 rgba (0, 0, 0, 0,1), -4px -4px 10px hvid;
}
.nav li: ikke (.logo): fokus {
skitse: ingen;
transformere: skala (0,95);
box-shadow: 4px 4px 10px 0 rgba (0, 0, 0, 0.1), -4px -4px 10px hvid, 4px 4px 10px 0 rgba (0, 0, 0, 0.1) indsats, -4px -4px 10px hvid indsats;
}
.nav li: ikke (.logo): svæver, .nav li: ikke (.logo): fokus {
farve: orangeret;
}

JavaScript-kode

feather.replace ();

4. Neumorf tekst og figurer

Brug følgende HTML- og CSS-kodestykker til at oprette ovenstående neumorfe tekst og figurer.

HTML-kode

Relaterede: HTML Essentials Cheat Sheet

Cirkel

Donut

Firkant

Glat firkant

Tumbler

Neumorf tekst

Velkommen til MUO

CSS-kode

Relaterede: Enkle CSS-kodeeksempler, du kan lære på 10 minutter

*, *::før efter {
box-størrelse: border-box;
}
: rod {
--nFarve: #aaa;
--brShadow: -6px 6px 10px rgba (0,0,0,0,5);
--tlShadow: 6px -6px 10px rgba (255,255,255,0,5);
}
krop {
margen: 0;
font-familie: sans-serif;
min. højde: 100vh;
display: flex;
align-items: center;
retfærdiggør-indhold: center;
flex-wrap: wrap;
baggrund: var (- nColor);
}
.n-start,
.n-indsats {
display: flex;
align-items: center;
retfærdiggør-indhold: center;
}
.n-cirkel {
baggrundsfarve: var (- nFarve);
box-shadow: var (- brShadow), var (- tlShadow);
grænseradius: 50%;
bredde: 200 px;
højde: 200px;
margen: 10 px;
}
.n-doughnut {
baggrundsfarve: var (- nFarve);
box-shadow: var (- brShadow), var (- tlShadow);
grænseradius: 50%;
bredde: 200 px;
højde: 200px;
margen: 10 px;
}
.n-doughnut .n-inset {
baggrundsfarve: var (- nFarve);
box-shadow: indsats var (- brShadow), indsats var (- tlShadow);
grænseradius: 50%;
bredde: 50%;
højde: 50%;
margen: 0;
}
.n-tumbler {
baggrundsfarve: var (- nFarve);
box-shadow: var (- brShadow), var (- tlShadow);
grænseradius: 50%;
bredde: 200 px;
højde: 200px;
margen: 10 px;
}
.n-tumbler .n-outset {
baggrundsfarve: var (- nFarve);
box-shadow: var (- brShadow), var (- tlShadow);
grænseradius: 50%;
bredde: 80%;
højde: 80%;
margen: 0;
}
.n-firkant {
baggrundsfarve: var (- nFarve);
box-shadow: var (- brShadow), var (- tlShadow);
grænseradius: 0;
bredde: 200 px;
højde: 200px;
margen: 10 px;
}
.n-smooth-sq {
baggrundsfarve: var (- nFarve);
box-shadow: var (- brShadow), var (- tlShadow);
grænse-radius: 10%;
bredde: 200 px;
højde: 200px;
margen: 10 px;
}
.n-tekst {
farve: var (- nFarve);
tekst-skygge: var (- brShadow), var (- tlShadow);
skriftstørrelse: 6 em;
font-vægt: fed;
}

5. Neumorfe knapper

Brug følgende HTML-, CSS- og JavaScript-kodestykker til at oprette ovenstående neumorfe knapper.

HTML-kode

Tryk på knapperne




play_arrow


pause





blande

CSS-kode

@import url (' https://fonts.googleapis.com/icon? familie = materiale + ikoner ');
legeme{
baggrundsfarve: # 6ec7ff;
}
.btn-holder {
display: blok;
margen: 0 auto;
margin-top: 64 px;
tekstjustering: center;
}
.intro-tekst {
margin-bund: 48 pixel;
font-familie: 'Quicksand', sans-serif;
farve: hvid;
skriftstørrelse: 18 pixel;
}
.btn {
bredde: 110 px;
højde: 110px;
skriftstørrelse: 30 pixel;
border-radius: 30px;
grænse: ingen;
farve: hvid;
lodret-justere: top;
-webkit-overgang: .6s let-ind-ud;
overgang: .6s let-ind-ud;
}
.btn: svæver {
markør: markør;
}
.btn: fokus {
skitse: ingen;
}
.btn: første af typen {
margen-højre: 30 px;
}
. pneumorfisk {
baggrund: lineær-gradient (145deg, # 76d5ff, # 63b3e6);
box-shadow: 30px 30px 40px # 1e7689,
-30px -30px 40px # 7fe5ff;
grænse: 3 pix solid rgba (255, 255, 255, .4);
}
. pneumorfisk presset {
baggrund: lineær gradient (145deg, # 63b3e6, # 76d5ff);
-webkit-box-shadow: indsat 15px 15px 20px -20px rgba (0,0,0, .5);
-moz-box-shadow: indsat 15px 15px 20px -20px rgba (0,0,0, .5);
box-shadow: indsat 15px 15px 20px -20px rgba (0,0,0, .5);
}
. pneumorf: fokus,. pneumorf: svæver,. pneumorf: fokus,. pneumorf: svæver,. pneumorf: presset,. pneumorf: presset:
grænse: 3 px solid rgba (46, 74, 112, .75);
}
.material-icon {
font-familie: 'Materielle ikoner';
font-vægt: normal;
skrifttypestil: normal;
skriftstørrelse: 32 pixel;
display: inline-blok;
linjehøjde: 1;
tekst-transformation: ingen;
mellemrum mellem bogstaver: normal;
ordindpakning: normal;
hvid-plads: nowrap;
retning: ltr;
-webkit-font-udjævning: antialiseret;
tekstgengivelse: optimizeLegibility;
-moz-osx-font-udjævning: gråtoner;
font-feature-settings: 'liga';
}
#pause {
farve: # 143664;
display: ingen;
}

JavaScript-kode

function changeStyle (btnPressed) {
var btn = document.getElementById (btnPressed);
btn.classList.toggle ("neumorf");
btn.classList.toggle ("neumorf-presset");
hvis (btnPressed 'play-pause') {
Spil();
} ellers hvis (btnPressed 'shuffle-btn') {
bland ();
}
}
funktionsafspilning () {
var playBtn = document.getElementById ('play');
var pauseBtn = document.getElementById ('pause');
hvis (playBtn.style.display 'none') {
playBtn.style.display = 'blok';
pauseBtn.style.display = 'ingen';
} andet {
playBtn.style.display = 'ingen';
pauseBtn.style.display = 'blok';
}
}
funktionsblanding () {
var shuffleBtn = document.getElementById ('shuffle-btn');
hvis (shuffleBtn.style.color == 'hvid' || shuffleBtn.style.color == '') {
shuffleBtn.style.color = '# 143664';
} andet {
shuffleBtn.style.color = 'hvid';
}
}

Hvis du vil se på den komplette kildekode, der bruges i denne artikel, er her GitHub-arkiv.

Bemærk: Koden anvendt i denne artikel er MIT licenseret.

Stil dit websted med neumorfisme

Du kan bruge det minimalistiske designkoncept neumorfisme til at style dit websted. Det giver et æstetisk tiltalende udseende. Men stadig har neumorfisme begrænsninger for tilgængelighed.

Der er forskellige måder at give et websted et elegant udseende. Hvis du vil oprette kedelige kasser på dit websted, skal du give CSS-egenskaben box-shadow en chance.

Yuvraj Chandra (33 artikler offentliggjort)

Yuvraj er en bachelorstudent i datalogi ved University of Delhi, Indien. Han brænder for Full Stack Webudvikling. Når han ikke skriver, udforsker han dybden af ​​forskellige teknologier.

Mere fra Yuvraj Chandra